Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nrwl/nx/llms.txt

Use this file to discover all available pages before exploring further.

The @nx/react plugin integrates React into your Nx workspace. It provides generators for scaffolding applications, libraries, components, and hooks, along with executors for Module Federation dev servers. It works with Vite, Webpack, and Rspack bundlers.

​
Installation

nx add @nx/react
Or install manually and run the init generator: 
npm install --save-dev @nx/react

​
What the plugin provides

Generators

Scaffold applications, libraries, components, hooks, Redux slices, and Storybook configuration.

Executors

Module Federation dev server executors for serving host and remote applications.

Integrations

Works with Jest, Vitest, Playwright, Cypress, and Storybook out of the box.

​
Generators

​
application

Create a new React application. 
nx generate @nx/react:application myapp
Choose your bundler with the --bundler flag: 
# Vite (default)
nx generate @nx/react:application myapp --bundler=vite

# Webpack
nx generate @nx/react:application myapp --bundler=webpack

# Rspack
nx generate @nx/react:application myapp --bundler=rspack

​
library

Create a React library that can be shared across your workspace. 
nx generate @nx/react:library mylib
Create a publishable library for npm distribution: 
nx generate @nx/react:library mylib --bundler=vite --publishable --importPath=@myorg/mylib

​
component

Generate a React component inside an existing project. 
nx generate @nx/react:component MyButton --project=mylib

​
hook

Generate a custom React hook. 
nx generate @nx/react:hook useMyHook --project=mylib

​
redux

Create a Redux slice for a project using @reduxjs/toolkit. 
nx generate @nx/react:redux counter --project=myapp

​
storybook-configuration

Add Storybook configuration to a React application or library. 
nx generate @nx/react:storybook-configuration mylib

​
host

Generate a Module Federation host application that consumes remote applications. 
nx generate @nx/react:host shell --remotes=remote1,remote2

​
remote

Generate a Module Federation remote application that exposes modules. 
nx generate @nx/react:remote remote1 --host=shell

​
setup-ssr

Add Server-Side Rendering (SSR) configuration to an existing React application. 
nx generate @nx/react:setup-ssr myapp

​
federate-module

Expose a module from an existing application as a Module Federation module. 
nx generate @nx/react:federate-module MyComponent --path=./src/components/MyComponent.tsx --name=remote1

​
Executors

​
module-federation-dev-server

Serve a Module Federation host or remote application in development mode. This executor starts the webpack dev server for the target application and optionally starts all known remotes. 
{
  "targets": {
    "serve": {
      "executor": "@nx/react:module-federation-dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "shell:build",
        "port": 4200
      }
    }
  }
}

​
module-federation-ssr-dev-server

Serve a Module Federation host application along with all known remotes, with SSR support. 
{
  "targets": {
    "serve-ssr": {
      "executor": "@nx/react:module-federation-ssr-dev-server",
      "options": {
        "buildTarget": "shell:build",
        "port": 4200
      }
    }
  }
}

​
module-federation-static-server

Serve a Module Federation host and all its remotes as static assets. Useful for e2e testing. 
{
  "targets": {
    "serve-static": {
      "executor": "@nx/react:module-federation-static-server",
      "options": {
        "serveTarget": "shell:serve"
      }
    }
  }
}

​
Inferred tasks

@nx/react relies on bundler plugins such as @nx/vite/plugin and @nx/webpack/plugin to infer build, serve, and test targets from your project’s config files (vite.config.ts, webpack.config.js). You do not need to configure these targets manually when using the recommended defaults.
To infer tasks, the corresponding bundler plugin must be registered in your nx.json plugins array. The nx add @nx/react command configures this automatically.

​
Configuration examples

​
Application project.json with Vite

{
  "name": "myapp",
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "options": {
        "outputPath": "dist/myapp"
      }
    },
    "serve": {
      "executor": "@nx/vite:dev-server",
      "options": {
        "buildTarget": "myapp:build"
      }
    },
    "test": {
      "executor": "@nx/vite:test"
    }
  }
}

​
Module Federation nx.json plugin config

{
  "plugins": [
    {
      "plugin": "@nx/webpack/plugin",
      "options": {
        "buildTargetName": "build",
        "serveTargetName": "serve"
      }
    }
  ]
}

​
Module Federation

@nx/react integrates with @nx/module-federation to support Webpack Module Federation. Use the host and remote generators to scaffold a federated architecture, then use the module-federation-dev-server executor to serve the host with all remotes during development.
1

Generate a host application

nx generate @nx/react:host shell --remotes=products,cart
2

Serve the full federated graph

nx serve shell
The host dev server automatically starts all declared remotes.
3

Build for production

nx build shell
nx build products
nx build cart

Build docs developers (and LLMs) love

Get started for freeTalk to us