React Plugin for Nx

The React plugin for Nx, @nx/react, provides generators for applications and libraries, executors for Module Federation, and library build support. It integrates with popular bundlers and test runners so you can configure each project to match your team's toolchain.

You don't need the plugin to use React with Nx. Any project already benefits from caching, task orchestration, and the project graph. The plugin simplifies scaffolding and code generation.

Using a React Meta-Framework?

If you're building with Next.js or Remix, use their dedicated plugins which include inferred task support. See the Next.js plugin or Remix plugin hub pages. For React Router in framework mode, see the React Router guide.

Setting Up @nx/react

Add to an Existing Nx Workspace

Keep Nx Package Versions In Sync

Make sure to install the @nx/react version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe. Using nx add helps ensure the correct version is installed and configured.

nx add @nx/react

Verification

1. Check that @nx/react is listed:

   nx report

2. Verify generators are available:

   nx list @nx/react

Create a New Workspace

npx create-nx-workspace@latest --template=nrwl/react-template

Tutorial

For a guided walkthrough, follow the React Monorepo Tutorial.

Generate a New Application

nx g @nx/react:app apps/my-app

To start the application in development mode, run nx serve my-app. Read more about the options available for the application generator.

Choose a Bundler

The --bundler option selects the build tool for your application or buildable library. You can learn more about the specific bundler you scaffolded your project with on the bundler's plugin page:

• Vite (Recommended)
• Webpack
• Rspack
• Rollup

Generate a New Library

nx g @nx/react:lib libs/my-lib

# With a bundler for buildable/publishable libraries
nx g @nx/react:lib libs/my-lib --bundler=vite
nx g @nx/react:lib libs/my-lib --bundler=rollup
nx g @nx/react:lib libs/my-lib --publishable --importPath=@myorg/my-lib

The same bundler options apply when creating buildable libraries. Read more about the options available for the library generator. You can also read more about buildable and publishable libraries.

Serve Applications

nx serve my-app

This starts the development server with hot module replacement so you can iterate on your application locally.

Build Projects

nx build my-app
nx build my-lib

Build output goes to the dist folder by default. You can customize the output folder by setting outputPath in the project's configuration file.

Nx caches build results automatically. Subsequent builds of unchanged projects restore from cache.

View Project Configuration

To see the full configuration for a project:

nx show project my-app

Or open the project details view in Nx Console.

For full generator and executor option lists, see the generators reference and executors reference.

CI Considerations

See Set Up CI for a complete CI configuration guide.

Build and Test Only What Changed

nx affected -t build test lint

This uses the project graph to determine which projects are affected by your changes and only runs tasks for those.

Remote Caching

Share build and test cache results across your team and CI with remote caching:

nx connect

What's Next

React Monorepo Tutorial Build a React monorepo step-by-step with Nx.

React Router Guide Set up React Router in framework mode with Nx.

Module Federation with SSR Configure Module Federation with server-side rendering.

Next.js Plugin Use Nx with Next.js for inferred tasks and generators.

Generators Reference Full API reference for @nx/react generators.

Executors Reference Full API reference for @nx/react executors.