@nx/react:remote

Create Module Federation configuration files for given React Producer (Remote) Application.

Usage

1nx generate remote ... 2
1nx g producer ... #same 2

By default, Nx will search for remote in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

1nx g @nx/react:remote ... 2

Show what will be generated without writing to disk:

1nx g remote ... --dry-run 2

Options

directory

dirRequired
string

The directory of the new application.

bundler

string
Default: rspack
Accepted values: rspack, webpack

The bundler to use.

devServerPort

number

The port for the dev server of the Producer (remote) app.

host

consumer
string

The Consumer (host) application for this Producer (remote).

name

string
Pattern: ^[a-zA-Z_$][a-zA-Z_$0-9]*$

The name of the Producer (remote) application to generate the Module Federation configuration

classComponent

C
boolean
Default: false

Use class components instead of functional component.

compiler

string
Default: babel
Accepted values: babel, swc

The compiler to use.

e2eTestRunner

string
Default: playwright
Accepted values: playwright, cypress, none

Test runner to use for end to end (E2E) tests.

globalCss

boolean
Default: false

Default is false. When true, the component is generated with .css/.scss instead of .module.css/.module.scss.

js

boolean
Default: false

Generate JavaScript files rather than TypeScript files.

linter

string
Default: eslint
Accepted values: eslint

The tool to use for running lint checks.

routing

boolean
Default: false

Generate application with routes.

style

s
string
Default: css

The file extension to be used for style files.

strict

boolean
Default: true

Creates an application with strict mode and strict type checking.

setParserOptionsProject

boolean
Default: false

Whether or not to configure the ESLint "parserOptions.project" option. We do not do this by default for lint performance reasons.

ssr

boolean
Default: false

Whether to configure SSR for the Consumer (host) application

tags

t
string

Add tags to the application (used for linting).

typescriptConfiguration

boolean
Default: true

Whether the module federation configuration and webpack configuration files should use TS. When --js is used, this flag is ignored.

unitTestRunner

string
Default: jest
Accepted values: jest, none

Test runner to use for unit tests.

dynamic

Internal
boolean
Default: false

Should the Consumer (host) application use dynamic federation?

skipFormat

Internal
boolean
Default: false

Skip formatting files.

skipNxJson

Internal
boolean
Default: false

Skip updating nx.json with default options based on values provided to this app (e.g. babel, style).

skipPackageJson

Internal
boolean
Default: false

Do not add dependencies to package.json.