Creating a new React Monorepo

Create a new React monorepo with the following command:

npx create-nx-workspace@latest react-monorepo --preset=react-monorepo --nx-cloud=skip

NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Application name · react-store
✔ Which bundler would you like to use? · vite
✔ Which unit test runner would you like to use? · vitest
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · css
✔ Would you like to use ESLint? · Yes
✔ Would you like to use Prettier for code formatting? · Yes

Let’s name the initial application react-store. In this tutorial we’re going to use vite as a bundler, cypress for e2e tests and css for styling. We’ll talk more about how Nx integrates with GitHub Actions later in the tutorial. The above command generates the following structure:

└─ react-monorepo
   ├─ ...
   ├─ apps
   │  ├─ react-store
   │  │  ├─ public
   │  │  │  └─ ...
   │  │  ├─ src
   │  │  │  ├─ app
   │  │  │  │  ├─ app.module.css
   │  │  │  │  ├─ app.spec.tsx
   │  │  │  │  ├─ app.tsx
   │  │  │  │  └─ nx-welcome.tsx
   │  │  │  ├─ assets
   │  │  │  ├─ main.tsx
   │  │  │  └─ styles.css
   │  │  ├─ index.html
   │  │  ├─ package.json
   │  │  ├─ tsconfig.app.json
   │  │  ├─ tsconfig.json
   │  │  ├─ tsconfig.spec.json
   │  │  └─ vite.config.ts
   │  └─ react-store-e2e
   │     └─ ...
   ├─ nx.json
   ├─ tsconfig.base.json
   └─ package.json

The setup includes..

• a new React application (apps/react-store/)
• a Cypress based set of e2e tests (apps/react-store-e2e/)
• Prettier preconfigured
• ESLint preconfigured
• Jest preconfigured

One way to structure an Nx monorepo is to place application projects in the apps folder and library projects in the libs folder. Applications are encouraged to be as light-weight as possible so that more code is pushed into libraries and can be reused in other projects. This folder structure is just a suggestion and can be modified to suit your organization’s needs.

The nx.json file contains configuration settings for Nx itself and global default settings that individual projects inherit.