> ## 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.
# @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
```bash theme={null}
nx add @nx/react
```
Or install manually and run the init generator:
```bash npm theme={null}
npm install --save-dev @nx/react
```
```bash pnpm theme={null}
pnpm add --save-dev @nx/react
```
```bash yarn theme={null}
yarn add --dev @nx/react
```
## What the plugin provides
Scaffold applications, libraries, components, hooks, Redux slices, and Storybook configuration.
Module Federation dev server executors for serving host and remote applications.
Works with Jest, Vitest, Playwright, Cypress, and Storybook out of the box.
## Generators
### application
Create a new React application.
```bash theme={null}
nx generate @nx/react:application myapp
```
Choose your bundler with the `--bundler` flag:
```bash theme={null}
# 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.
```bash theme={null}
nx generate @nx/react:library mylib
```
Create a publishable library for npm distribution:
```bash theme={null}
nx generate @nx/react:library mylib --bundler=vite --publishable --importPath=@myorg/mylib
```
### component
Generate a React component inside an existing project.
```bash theme={null}
nx generate @nx/react:component MyButton --project=mylib
```
### hook
Generate a custom React hook.
```bash theme={null}
nx generate @nx/react:hook useMyHook --project=mylib
```
### redux
Create a Redux slice for a project using `@reduxjs/toolkit`.
```bash theme={null}
nx generate @nx/react:redux counter --project=myapp
```
### storybook-configuration
Add Storybook configuration to a React application or library.
```bash theme={null}
nx generate @nx/react:storybook-configuration mylib
```
### host
Generate a Module Federation host application that consumes remote applications.
```bash theme={null}
nx generate @nx/react:host shell --remotes=remote1,remote2
```
### remote
Generate a Module Federation remote application that exposes modules.
```bash theme={null}
nx generate @nx/react:remote remote1 --host=shell
```
### setup-ssr
Add Server-Side Rendering (SSR) configuration to an existing React application.
```bash theme={null}
nx generate @nx/react:setup-ssr myapp
```
### federate-module
Expose a module from an existing application as a Module Federation module.
```bash theme={null}
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.
```json theme={null}
{
"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.
```json theme={null}
{
"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.
```json theme={null}
{
"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
```json theme={null}
{
"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
```json theme={null}
{
"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.
```bash theme={null}
nx generate @nx/react:host shell --remotes=products,cart
```
```bash theme={null}
nx serve shell
```
The host dev server automatically starts all declared remotes.
```bash theme={null}
nx build shell
nx build products
nx build cart
```