Two Styles of Repo

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:

Our Workspace Requirements

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
Opting into Nx Cloud

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 in apps/store-e2e.
Nx Cypress Support

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 --directory=apps/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
Nx 15 and lower use @nrwl/ instead of @nx/

Nx Generator Syntax

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 --directory=libs/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
Nx 15 and lower use @nrwl/ instead of @nx/

~/myorg❯

npx nx g @nx/js:lib products --directory=libs/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
Nx 15 and lower use @nrwl/ instead of @nx/

You should now be able to see all four projects of our design:

  • store in apps/store
  • admin in apps/admin
  • products in libs/products
  • common-ui in libs/common-ui

What's Next