There are two styles of repos: integrated and package-based. This tutorial shows the integrated style.
You can find more information on the difference between the two in our introduction.
Angular Monorepo Tutorial - Part 1: Code Generation
Contents
Your Objective
For this tutorial, you'll create two Angular applications, an Angular lib for your common components, and a library for your business logic as follows:
Creating an Nx Workspace
Run the command npx create-nx-workspace@latest
and when prompted, provide the following responses:
~❯
npx create-nx-workspace@latest
1
2 > NX Let's create a new workspace [https://nx.dev/getting-started/intro]
3
4✔ Where would you like to create your workspace? · myorg
5✔ Which stack do you want to use? · angular
6✔ Standalone project or integrated monorepo? · integrated
7✔ Application name · store
8✔ Default stylesheet format · css
9✔ Would you like to use Standalone Components in your application? · No
10✔ Would you like to add routing? · Yes
11✔ Enable distributed caching to make your CI faster · Yes
12
You will also be prompted whether to add Nx Cloud to your workspace. We won't address this in this tutorial, but you can see the introduction to Nx Cloud for more details.
Once the command completes, notice two projects were added to the workspace:
- An Angular application located in
apps/store
. - A Project for Cypress e2e tests for our
store
application inapps/store-e2e
.
While we see the Cypress project here, we won't go deeper on Cypress in this tutorial. You can find more materials on Nx Cypress support on the @nx/cypress package page.
Adding Another Application to Your Workspace
Run this command to create your admin
app:
~/myorg❯
npx nx g @nx/angular:app admin
1npx nx g @nx/angular:app admin
2
3> NX Generating @nx/angular:application
4
5✔ Would you like to configure routing for this application? (y/N) · false
6[NX] Angular devkit called `writeWorkspace`, this may have created 'workspace.json' or 'angular.json
7[NX] Double check workspace configuration before proceeding
8Skipping admin since apps/admin/project.json already exists.
9CREATE apps/admin/tsconfig.app.json
10CREATE apps/admin/tsconfig.spec.json
11CREATE apps/admin/src/favicon.ico
12CREATE apps/admin/src/index.html
13CREATE apps/admin/src/main.ts
14CREATE apps/admin/src/styles.css
15CREATE apps/admin/src/assets/.gitkeep
16CREATE apps/admin/src/app/app.module.ts
17CREATE apps/admin/src/app/app.component.css
18CREATE apps/admin/src/app/app.component.html
19CREATE apps/admin/src/app/app.component.spec.ts
20CREATE apps/admin/src/app/app.component.ts
21CREATE apps/admin/project.json
22CREATE apps/admin/tsconfig.editor.json
23CREATE apps/admin/tsconfig.json
24CREATE apps/admin/src/app/nx-welcome.component.ts
25CREATE apps/admin/.eslintrc.json
26CREATE apps/admin/jest.config.ts
27CREATE apps/admin/src/test-setup.ts
28CREATE apps/admin-e2e/cypress.config.ts
29CREATE apps/admin-e2e/src/e2e/app.cy.ts
30CREATE apps/admin-e2e/src/fixtures/example.json
31CREATE apps/admin-e2e/src/support/app.po.ts
32CREATE apps/admin-e2e/src/support/commands.ts
33CREATE apps/admin-e2e/src/support/e2e.ts
34CREATE apps/admin-e2e/tsconfig.json
35CREATE apps/admin-e2e/project.json
36CREATE apps/admin-e2e/.eslintrc.json
37
Generating Libraries
To create the common-ui
and products
libraries, use the @nx/angular:lib
and @nx/js:lib
generators respectively:
~/myorg❯
npx nx g @nx/angular:lib common-ui
1
2> NX Generating @nx/angular:library
3
4[NX] Angular devkit called `writeWorkspace`, this may have created 'workspace.json' or 'angular.json
5[NX] Double check workspace configuration before proceeding
6Skipping common-ui since libs/common-ui/project.json already exists.
7CREATE libs/common-ui/README.md
8CREATE libs/common-ui/tsconfig.lib.json
9CREATE libs/common-ui/tsconfig.spec.json
10CREATE libs/common-ui/src/index.ts
11CREATE libs/common-ui/src/lib/common-ui.module.ts
12CREATE libs/common-ui/project.json
13CREATE libs/common-ui/tsconfig.json
14UPDATE tsconfig.base.json
15CREATE libs/common-ui/jest.config.ts
16CREATE libs/common-ui/src/test-setup.ts
17CREATE libs/common-ui/.eslintrc.json
18
~/myorg❯
npx nx g @nx/js:lib products
1
2> NX Generating @nx/js:library
3
4CREATE libs/products/README.md
5CREATE libs/products/package.json
6CREATE libs/products/src/index.ts
7CREATE libs/products/src/lib/products.spec.ts
8CREATE libs/products/src/lib/products.ts
9CREATE libs/products/tsconfig.json
10CREATE libs/products/tsconfig.lib.json
11CREATE libs/products/project.json
12UPDATE tsconfig.base.json
13CREATE libs/products/.eslintrc.json
14CREATE libs/products/jest.config.ts
15CREATE libs/products/tsconfig.spec.json
16
You should now be able to see all four projects of our design:
store
inapps/store
admin
inapps/admin
products
inlibs/products
common-ui
inlibs/common-ui
What's Next
- Continue to 2: Project Graph