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/standalone-react-app

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:

Terminal

~❯

npx create-nx-workspace@latest

> NX Let's create a new workspace [https://nx.dev/getting-started/intro] ✔ Choose what to create · react ✔ Application name · store ✔ What framework would you like to use? · none ✔ Bundler to be used to build the application · vite ✔ Default stylesheet format · css ✔ Enable distributed caching to make your CI faster · Yes
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:

store/ ├── e2e/ ├── src/ ├── tools/ ├── nx.json ├── package.json ├── project.json ├── README.md ├── tsconfig.base.json └── tsconfig.json

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

Terminal

~/store❯

npx nx g @nx/react:component shop

> NX Generating @nx/react:component ✔ Which stylesheet format would you like to use? · css ✔ Should this component be exported in the project? (y/N) · false CREATE src/app/shop/shop.module.css CREATE src/app/shop/shop.spec.tsx CREATE src/app/shop/shop.tsx
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:

Terminal

~/store❯

npx nx g @nx/react:library cart

> NX Generating @nx/react:library ✔ Which stylesheet format would you like to use? · css ✔ What unit test runner should be used? · vitest ✔ Which bundler would you like to use to build the library? · vite UPDATE nx.json CREATE cart/project.json CREATE .eslintrc.base.json UPDATE project.json UPDATE .eslintrc.json UPDATE e2e/.eslintrc.json CREATE cart/.eslintrc.json CREATE cart/README.md CREATE cart/package.json CREATE cart/src/index.ts CREATE cart/tsconfig.json CREATE cart/tsconfig.lib.json CREATE cart/index.html CREATE cart/src/demo.tsx UPDATE tsconfig.base.json UPDATE package.json CREATE cart/vite.config.ts CREATE cart/tsconfig.spec.json CREATE cart/src/lib/cart.module.css CREATE cart/src/lib/cart.spec.tsx CREATE cart/src/lib/cart.tsx
Nx 15 and lower use @nrwl/ instead of @nx/
Terminal

~/store❯

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

> NX Generating @nx/react:library ✔ Which bundler would you like to use to build the library? · vite UPDATE nx.json CREATE shared/ui/project.json CREATE shared/ui/.eslintrc.json CREATE shared/ui/README.md CREATE shared/ui/package.json CREATE shared/ui/src/index.ts CREATE shared/ui/tsconfig.json CREATE shared/ui/tsconfig.lib.json CREATE shared/ui/index.html CREATE shared/ui/src/demo.tsx UPDATE tsconfig.base.json CREATE shared/ui/vite.config.ts CREATE shared/ui/tsconfig.spec.json CREATE shared/ui/src/lib/shared-ui.module.css CREATE shared/ui/src/lib/shared-ui.spec.tsx CREATE shared/ui/src/lib/shared-ui.tsx
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