@nx/react

The React plugin for Nx provides generators, executors, and utilities for managing React applications and libraries within an Nx workspace.

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

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