Docs
Getting started
CLI
Plugins
Community
Nx Cloud
Nx Consulting

Nx Plugin for React

The Nx Plugin for React contains schematics 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.json

See Also

Builders

React applications are built using the builders 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.

Schematics