Looking for React monorepos?

This tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. If you are looking for a React monorepo setup then check out our React monorepo tutorial.

Example repository/nrwl/nx-recipes/tree/main/react-standalone

React Standalone Tutorial - Part 1: Code Generation

Contents

Creating a New 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? · store 5✔ Which stack do you want to use? · react 6✔ What framework would you like to use? · none 7✔ Standalone project or integrated monorepo? · standalone 8✔ Which bundler would you like to use? · vite 9✔ Default stylesheet format · css 10✔ Enable distributed caching to make your CI faster · Yes 11
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, the file structure should look like this:

1store/ 2├── e2e/ 3├── src/ 4├── tools/ 5├── nx.json 6├── package.json 7├── project.json 8├── README.md 9├── tsconfig.base.json 10└── tsconfig.json 11

There are two projects that have been created for you:

  • A React application (store) with its configuration files at the root of the repo and source code in src.
  • A project for Cypress e2e tests for our store application in e2e.

As far as Nx is concerned, the root-level store app owns every file that doesn't belong to a different project. So files in the e2e folder belong to the e2e project, everything else belongs to store.

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.

Generating a Component for the Store

~/store❯

npx nx g @nx/react:component shop

1 2> NX Generating @nx/react:component 3 4✔ Which stylesheet format would you like to use? · css 5✔ Should this component be exported in the project? (y/N) · false 6CREATE src/app/shop/shop.module.css 7CREATE src/app/shop/shop.spec.tsx 8CREATE src/app/shop/shop.tsx 9
Nx 15 and lower use @nrwl/ instead of @nx/

Nx Generator Syntax

Generating Libraries

To create the cart and shared/ui libraries, use the @nx/react:lib generator:

~/store❯

npx nx g @nx/react:library cart

1 2> NX Generating @nx/react:library 3✔ Which stylesheet format would you like to use? · css 4✔ What unit test runner should be used? · vitest 5✔ Which bundler would you like to use to build the library? · vite 6UPDATE nx.json 7CREATE cart/project.json 8CREATE .eslintrc.base.json 9UPDATE project.json 10UPDATE .eslintrc.json 11UPDATE e2e/.eslintrc.json 12CREATE cart/.eslintrc.json 13CREATE cart/README.md 14CREATE cart/package.json 15CREATE cart/src/index.ts 16CREATE cart/tsconfig.json 17CREATE cart/tsconfig.lib.json 18CREATE cart/index.html 19CREATE cart/src/demo.tsx 20UPDATE tsconfig.base.json 21UPDATE package.json 22CREATE cart/vite.config.ts 23CREATE cart/tsconfig.spec.json 24CREATE cart/src/lib/cart.module.css 25CREATE cart/src/lib/cart.spec.tsx 26CREATE cart/src/lib/cart.tsx 27
Nx 15 and lower use @nrwl/ instead of @nx/

~/store❯

npx nx g @nx/react:lib shared/ui

1 2> NX Generating @nx/react:library 3 4✔ Which bundler would you like to use to build the library? · vite 5UPDATE nx.json 6CREATE shared/ui/project.json 7CREATE shared/ui/.eslintrc.json 8CREATE shared/ui/README.md 9CREATE shared/ui/package.json 10CREATE shared/ui/src/index.ts 11CREATE shared/ui/tsconfig.json 12CREATE shared/ui/tsconfig.lib.json 13CREATE shared/ui/index.html 14CREATE shared/ui/src/demo.tsx 15UPDATE tsconfig.base.json 16CREATE shared/ui/vite.config.ts 17CREATE shared/ui/tsconfig.spec.json 18CREATE shared/ui/src/lib/shared-ui.module.css 19CREATE shared/ui/src/lib/shared-ui.spec.tsx 20CREATE shared/ui/src/lib/shared-ui.tsx 21
Nx 15 and lower use @nrwl/ instead of @nx/

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

  • store in the root
  • cart in cart
  • shared-ui in shared/ui

What's Next