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.
React Monorepo Tutorial - Part 1: Code Generation
Contents
Your Objective
For this tutorial, you'll create two React applications, a React 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? · react
6✔ What framework would you like to use? · none
7✔ Standalone project or integrated monorepo? · integrated
8✔ Application name · store
9✔ Which bundler would you like to use? · vite
10✔ Default stylesheet format · css
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:
- A React 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/react:app admin
1
2> NX Generating @nx/react:application
3
4CREATE apps/admin/.babelrc
5CREATE apps/admin/.browserslistrc
6CREATE apps/admin/src/app/app.spec.tsx
7CREATE apps/admin/src/app/nx-welcome.tsx
8CREATE apps/admin/src/assets/.gitkeep
9CREATE apps/admin/src/environments/environment.prod.ts
10CREATE apps/admin/src/environments/environment.ts
11CREATE apps/admin/src/favicon.ico
12CREATE apps/admin/src/index.html
13CREATE apps/admin/src/main.tsx
14CREATE apps/admin/src/polyfills.ts
15CREATE apps/admin/tsconfig.app.json
16CREATE apps/admin/tsconfig.json
17CREATE apps/admin/src/app/app.module.css
18CREATE apps/admin/src/app/app.tsx
19CREATE apps/admin/src/styles.css
20CREATE apps/admin/project.json
21CREATE apps/admin/.eslintrc.json
22CREATE apps/admin-e2e/cypress.config.ts
23CREATE apps/admin-e2e/src/e2e/app.cy.ts
24CREATE apps/admin-e2e/src/fixtures/example.json
25CREATE apps/admin-e2e/src/support/app.po.ts
26CREATE apps/admin-e2e/src/support/commands.ts
27CREATE apps/admin-e2e/src/support/e2e.ts
28CREATE apps/admin-e2e/tsconfig.json
29CREATE apps/admin-e2e/project.json
30CREATE apps/admin-e2e/.eslintrc.json
31CREATE apps/admin/jest.config.ts
32CREATE apps/admin/tsconfig.spec.json
33
Generating Libraries
To create the common-ui
and products
libraries, use the @nx/react:lib
and @nx/js:lib
generators respectively:
~/myorg❯
npx nx g @nx/react:lib common-ui
1
2> NX Generating @nx/react:library
3
4CREATE libs/common-ui/project.json
5CREATE libs/common-ui/.eslintrc.json
6CREATE libs/common-ui/.babelrc
7CREATE libs/common-ui/README.md
8CREATE libs/common-ui/src/index.ts
9CREATE libs/common-ui/tsconfig.json
10CREATE libs/common-ui/tsconfig.lib.json
11UPDATE tsconfig.base.json
12CREATE libs/common-ui/jest.config.ts
13CREATE libs/common-ui/tsconfig.spec.json
14CREATE libs/common-ui/src/lib/common-ui.module.css
15CREATE libs/common-ui/src/lib/common-ui.spec.tsx
16CREATE libs/common-ui/src/lib/common-ui.tsx
17
~/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/.babelrc
12CREATE libs/products/project.json
13UPDATE tsconfig.base.json
14CREATE libs/products/.eslintrc.json
15CREATE libs/products/jest.config.ts
16CREATE libs/products/tsconfig.spec.json
17
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