Nx comes with dedicated documentation for each framework:

Nx Plugin for React

The Nx Plugin for React contains generators for managing React applications and libraries within an Nx workspace. It provides:

  • Integration with libraries such as Jest, Cypress, and Storybook.
  • Scaffolding for state management with Redux Toolkit libraries.
  • Scaffolding for creating buildable libraries that can be published to npm.
  • Utilities for automatic workspace refactoring.

Adding the React plugin

Adding the React plugin to a workspace can be done with the following:

#yarn
yarn add -D @nrwl/react
#npm
npm install -D @nrwl/react

Note: You can create a new workspace that has React set up by doing npx create-nx-workspace@latest --preset=react

The file structure for a React application looks like:

myorg/
ā”œā”€ā”€ apps/
ā”‚   ā”œā”€ā”€ myapp/
ā”‚   ā”‚   ā”œā”€ā”€ src/
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ app/
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ assets/
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ environments/
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ favicon.ico
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ index.html
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ main.tsx
ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ polyfills.ts
ā”‚   ā”‚   ā”‚   ā””ā”€ā”€ styles.css
ā”‚   ā”‚   ā”œā”€ā”€ browserslist
ā”‚   ā”‚   ā”œā”€ā”€ jest.config.js
ā”‚   ā”‚   ā”œā”€ā”€ tsconfig.app.json
ā”‚   ā”‚   ā”œā”€ā”€ tsconfig.json
ā”‚   ā”‚   ā””ā”€ā”€ tsconfig.spec.json
ā”‚   ā””ā”€ā”€ myapp-e2e/
ā”‚       ā”œā”€ā”€ src/
ā”‚       ā”‚   ā”œā”€ā”€ fixtures/
ā”‚       ā”‚   ā”‚   ā””ā”€ā”€ example.json
ā”‚       ā”‚   ā”œā”€ā”€ integration/
ā”‚       ā”‚   ā”‚   ā””ā”€ā”€ app.spec.ts
ā”‚       ā”‚   ā”œā”€ā”€ plugins/
ā”‚       ā”‚   ā”‚   ā””ā”€ā”€ index.ts
ā”‚       ā”‚   ā””ā”€ā”€ support/
ā”‚       ā”‚       ā”œā”€ā”€ app.po.ts
ā”‚       ā”‚       ā”œā”€ā”€ commands.ts
ā”‚       ā”‚       ā””ā”€ā”€ index.ts
ā”‚       ā”œā”€ā”€ cypress.json
ā”‚       ā”œā”€ā”€ tsconfig.e2e.json
ā”‚       ā””ā”€ā”€ tsconfig.json
ā”œā”€ā”€ libs/
ā”œā”€ā”€ tools/
ā”œā”€ā”€ README.md
ā”œā”€ā”€ workspace.json
ā”œā”€ā”€ nx.json
ā”œā”€ā”€ package.json
ā””ā”€ā”€ tsconfig.base.json

See Also

Executors / Builders

React applications are built using the executors from the @nrwl/web plugin.

  • build - Builds a web components application
  • dev-server - Builds and serves a web application
  • package - Bundles artifacts for a buildable library that can be distributed as an NPM package.

Generators