Rescope @nrwl to @nx
@nx/reactSee schema

@nx/react:application

Create a React application for Nx.

Examples

Create an application named my-app:

nx g @nx/react:application my-app
Nx 15 and lower use @nrwl/ instead of @nx/

Usage

nx generate application ...
nx g app ... #same

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

You can specify the collection explicitly as follows:

nx g @nx/react:application ...
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

nx g application ... --dry-run

Examples

Generate apps/myorg/myapp and apps/myorg/myapp-e2e:

nx g app myapp --directory=myorg

Use class components instead of functional components:

nx g app myapp --classComponent

Set up React Router:

nx g app myapp --routing

Options

name

Required
string
Pattern: ^[a-zA-Z].*$

The name of the application.

bundler

string
Default: webpack
Accepted values: vite, webpack, rspack

The bundler to use.

directory

dir
string

The directory of the new application.

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: Which E2E test runner would you like to use?
Accepted values: cypress, playwright, 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.

inSourceTests

boolean
Default: false

When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html

js

boolean
Default: false

Generate JavaScript files rather than TypeScript files.

linter

string
Default: eslint
Accepted values: eslint, none

The tool to use for running lint checks.

minimal

boolean
Default: false

Generate a React app with a minimal setup, no separate test files.

pascalCaseFiles

P
boolean
Default: false

Use pascal case component file name (e.g. App.tsx).

routing

boolean
Default: false

Generate application with routes.

rootProject

Hidden
boolean
Default: false

Create a application at the root of the workspace

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.

tags

t
string

Add tags to the application (used for linting).

unitTestRunner

string
Default: jest
Accepted values: jest, vitest, none

Test runner to use for unit tests.

skipFormat

boolean
Default: false

Skip formatting files.

skipNxJson

boolean
Default: false

Skip updating nx.json with default options based on values provided to this app.

skipPackageJson

boolean
Default: false

Do not add dependencies to package.json.