docs(misc): remove installation instructions for Nx < 18 (#30950)
This PR removes installation instructions for Nx < 18 since it has fallen out of support window. Users can always `npm install <plugin>` as usual if they are on an unsupported Nx version, but the docs will assume `nx add` moving forward. The changes are on the plugin overview page: https://nx-dev-git-docs-remove-nx-pre-18-install-nrwl.vercel.app/nx-api
This commit is contained in:
parent
cdbd97e98e
commit
766d1b32e0
@ -39,27 +39,12 @@ Make sure to install the `@nx/angular` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/angular` by running the following command:
|
In any Nx workspace, you can install `@nx/angular` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/angular
|
nx add @nx/angular
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/angular`.
|
This will install the correct version of `@nx/angular`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/angular` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/angular
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
{% callout type="note" title="Angular Tutorial" %}
|
{% callout type="note" title="Angular Tutorial" %}
|
||||||
For a full tutorial experience, follow the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
For a full tutorial experience, follow the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
||||||
{% /callout %}
|
{% /callout %}
|
||||||
|
|||||||
@ -38,9 +38,6 @@ Make sure to install the `@nx/detox` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/detox` by running the following command:
|
In any Nx workspace, you can install `@nx/detox` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/detox
|
nx add @nx/detox
|
||||||
```
|
```
|
||||||
@ -81,24 +78,6 @@ The `@nx/detox/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
Once a Detox configuration file has been identified, the targets are created with the name you specify under `buildTargetName`, `startTargetName` or `testTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `build` and `test`.
|
Once a Detox configuration file has been identified, the targets are created with the name you specify under `buildTargetName`, `startTargetName` or `testTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `build` and `test`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/detox` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/detox
|
|
||||||
```
|
|
||||||
|
|
||||||
### Generating Applications
|
|
||||||
|
|
||||||
By default, when creating a mobile application, Nx will use Detox to create the e2e tests project.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
nx g @nx/react-native:app apps/frontend --e2eTestRunner=deotx
|
|
||||||
nx g @nx/expo:app apps/frontend --e2eTestRunner=detox
|
|
||||||
```
|
|
||||||
|
|
||||||
## Using Detox
|
## Using Detox
|
||||||
|
|
||||||
### Testing Applications
|
### Testing Applications
|
||||||
|
|||||||
@ -22,27 +22,12 @@ Make sure to install the `@nx/esbuild` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/esbuild` by running the following command:
|
In any Nx workspace, you can install `@nx/esbuild` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/esbuild
|
nx add @nx/esbuild
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/esbuild`.
|
This will install the correct version of `@nx/esbuild`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/esbuild` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/esbuild
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/esbuild Plugin
|
## Using the @nx/esbuild Plugin
|
||||||
|
|
||||||
### Creating a new JS library
|
### Creating a new JS library
|
||||||
|
|||||||
@ -18,27 +18,12 @@ Make sure to install the `@nx/eslint-plugin` version that matches the version of
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/eslint-plugin` by running the following commands if the package is not already installed:
|
In any Nx workspace, you can install `@nx/eslint-plugin` by running the following commands if the package is not already installed:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/eslint-plugin
|
nx add @nx/eslint-plugin
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/eslint-plugin`.
|
This will install the correct version of `@nx/eslint-plugin`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/eslint-plugin` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/eslint-plugin
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Included plugins
|
## Included plugins
|
||||||
|
|
||||||
The plugin contains the following rule configurations divided into sub-plugins.
|
The plugin contains the following rule configurations divided into sub-plugins.
|
||||||
|
|||||||
@ -15,9 +15,6 @@ Make sure to install the `@nx/eslint` version that matches the version of `nx` i
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/eslint` by running the following command:
|
In any Nx workspace, you can install `@nx/eslint` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/eslint
|
nx add @nx/eslint
|
||||||
```
|
```
|
||||||
@ -66,27 +63,6 @@ The `@nx/eslint/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
- The `targetName` option controls the name of the inferred ESLint tasks. The default name is `lint`.
|
- The `targetName` option controls the name of the inferred ESLint tasks. The default name is `lint`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx 17" %}
|
|
||||||
|
|
||||||
Install the `@nx/eslint` package with your package manager.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
npm add -D @nx/eslint
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 17" %}
|
|
||||||
|
|
||||||
Install the `@nx/linter` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/linter
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Lint
|
## Lint
|
||||||
|
|
||||||
You can lint an application or a library with the following command:
|
You can lint an application or a library with the following command:
|
||||||
|
|||||||
@ -23,27 +23,12 @@ Make sure to install the `@nx/expo` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/expo` by running the following command:
|
In any Nx workspace, you can install `@nx/expo` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/expo
|
nx add @nx/expo
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/expo`.
|
This will install the correct version of `@nx/expo`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/expo` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/expo
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
### How @nx/expo Infers Tasks
|
### How @nx/expo Infers Tasks
|
||||||
|
|
||||||
The `@nx/expo` plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file:
|
The `@nx/expo` plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file:
|
||||||
|
|||||||
@ -24,27 +24,12 @@ Make sure to install the `@nx/express` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/express` by running the following command:
|
In any Nx workspace, you can install `@nx/express` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/express
|
nx add @nx/express
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/express`.
|
This will install the correct version of `@nx/express`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/express` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/express
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Recipes
|
## Recipes
|
||||||
|
|
||||||
- [Add an Express Application to Your Workspace](/showcase/example-repos/add-express)
|
- [Add an Express Application to Your Workspace](/showcase/example-repos/add-express)
|
||||||
|
|||||||
@ -19,27 +19,12 @@ Make sure to install the `@nx/jest` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/jest` by running the following command:
|
In any Nx workspace, you can install `@nx/jest` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/jest
|
nx add @nx/jest
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/jest`.
|
This will install the correct version of `@nx/jest`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/jest` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/jest
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
#### Configuring @nx/jest/plugin for both E2E and Unit Tests
|
#### Configuring @nx/jest/plugin for both E2E and Unit Tests
|
||||||
|
|
||||||
While Jest is most often used for unit tests, there are cases where it can be used for e2e tests as well as unit tests
|
While Jest is most often used for unit tests, there are cases where it can be used for e2e tests as well as unit tests
|
||||||
|
|||||||
@ -15,27 +15,12 @@ Make sure to install the `@nx/js` version that matches the version of `nx` in yo
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/js` by running the following command:
|
In any Nx workspace, you can install `@nx/js` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/js
|
nx add @nx/js
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/js`.
|
This will install the correct version of `@nx/js`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/js` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/js
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
### `ts` Preset
|
### `ts` Preset
|
||||||
|
|
||||||
When initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nx/js` pre-installed.
|
When initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nx/js` pre-installed.
|
||||||
|
|||||||
@ -37,27 +37,12 @@ Make sure to install the `@nx/nest` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/nest` by running the following command:
|
In any Nx workspace, you can install `@nx/nest` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/nest
|
nx add @nx/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/nest`.
|
This will install the correct version of `@nx/nest`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/nest` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/nest
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
### Create Applications
|
### Create Applications
|
||||||
|
|
||||||
You can add a new Nest application with the following command:
|
You can add a new Nest application with the following command:
|
||||||
|
|||||||
@ -15,27 +15,12 @@ Make sure to install the `@nx/node` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/node` by running the following command:
|
In any Nx workspace, you can install `@nx/node` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/node
|
nx add @nx/node
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/node`.
|
This will install the correct version of `@nx/node`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/node` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/node
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/node Plugin
|
## Using the @nx/node Plugin
|
||||||
|
|
||||||
### Creating Applications
|
### Creating Applications
|
||||||
|
|||||||
@ -21,9 +21,6 @@ Make sure to install the `@nx/playwright` version that matches the version of `n
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/playwright` by running the following command:
|
In any Nx workspace, you can install `@nx/playwright` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/playwright
|
nx add @nx/playwright
|
||||||
```
|
```
|
||||||
@ -71,18 +68,6 @@ The `targetName` and `ciTargetName` options control the name of the inferred Pla
|
|||||||
|
|
||||||
If you would like to disable Atomizer for Playwright tasks, set `ciTargetName` to `false`.
|
If you would like to disable Atomizer for Playwright tasks, set `ciTargetName` to `false`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/playwright` package with your package manager.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
npm add -D @nx/playwright
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## E2E Testing
|
## E2E Testing
|
||||||
|
|
||||||
By default, when creating a new frontend application, Nx will prompt for which e2e test runner to use. Select `playwright` or pass in the arg `--e2eTestRunner=playwright`
|
By default, when creating a new frontend application, Nx will prompt for which e2e test runner to use. Select `playwright` or pass in the arg `--e2eTestRunner=playwright`
|
||||||
|
|||||||
@ -30,27 +30,12 @@ Make sure to install the `@nx/react` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/react` by running the following command:
|
In any Nx workspace, you can install `@nx/react` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/react
|
nx add @nx/react
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/react`.
|
This will install the correct version of `@nx/react`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/react` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/react
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/react Plugin
|
## Using the @nx/react Plugin
|
||||||
|
|
||||||
### Creating Applications and Libraries
|
### Creating Applications and Libraries
|
||||||
|
|||||||
@ -25,9 +25,6 @@ Make sure to install the `@nx/remix` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/remix` by running the following command:
|
In any Nx workspace, you can install `@nx/remix` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/remix
|
nx add @nx/remix
|
||||||
```
|
```
|
||||||
@ -68,18 +65,6 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`.
|
The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/remix` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/remix
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the Remix Plugin
|
## Using the Remix Plugin
|
||||||
|
|
||||||
## Generate a Remix Application
|
## Generate a Remix Application
|
||||||
|
|||||||
@ -15,9 +15,6 @@ Make sure to install the `@nx/rspack` version that matches the version of `nx` i
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/rspack` by running the following command:
|
In any Nx workspace, you can install `@nx/rspack` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/rspack
|
nx add @nx/rspack
|
||||||
```
|
```
|
||||||
@ -61,18 +58,6 @@ The `@nx/rspack/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Rspack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Rspack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/rspack` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/rspack
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using @nx/rspack
|
## Using @nx/rspack
|
||||||
|
|
||||||
### Generate a new project using Rspack
|
### Generate a new project using Rspack
|
||||||
|
|||||||
@ -17,9 +17,6 @@ Make sure to install the `@nx/storybook` version that matches the version of `nx
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/storybook` by running the following command:
|
In any Nx workspace, you can install `@nx/storybook` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/storybook
|
nx add @nx/storybook
|
||||||
```
|
```
|
||||||
@ -63,18 +60,6 @@ The `@nx/storybook/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
|
The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/storybook` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/storybook
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using Storybook
|
## Using Storybook
|
||||||
|
|
||||||
### Generating Storybook Configuration
|
### Generating Storybook Configuration
|
||||||
|
|||||||
@ -32,19 +32,10 @@ Make sure to install the `@nx/vite` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/vite` by running the following command:
|
In any Nx workspace, you can install `@nx/vite` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/vite
|
nx add @nx/vite
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also pass the `--setupPathsPlugin` flag to add [`nxViteTsPaths` plugin](/recipes/vite/configure-vite#typescript-paths), so your projects can use workspace libraries.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
nx add @nx/vite --setupPathsPlugin
|
|
||||||
```
|
|
||||||
|
|
||||||
This will install the correct version of `@nx/vite`.
|
This will install the correct version of `@nx/vite`.
|
||||||
|
|
||||||
### How @nx/vite Infers Tasks
|
### How @nx/vite Infers Tasks
|
||||||
@ -91,18 +82,6 @@ The `@nx/vite/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
|
The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/vite` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/vite
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using @nx/vite
|
## Using @nx/vite
|
||||||
|
|
||||||
### Generate a new project using Vite
|
### Generate a new project using Vite
|
||||||
|
|||||||
@ -19,27 +19,12 @@ Make sure to install the `@nx/vue` version that matches the version of `nx` in y
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/vue` by running the following command:
|
In any Nx workspace, you can install `@nx/vue` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/vue
|
nx add @nx/vue
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/vue`.
|
This will install the correct version of `@nx/vue`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/vue` package with your package manager.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
npm add -D @nx/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/vue Plugin
|
## Using the @nx/vue Plugin
|
||||||
|
|
||||||
### Generate a new project using Vue
|
### Generate a new project using Vue
|
||||||
|
|||||||
@ -23,27 +23,12 @@ Make sure to install the `@nx/web` version that matches the version of `nx` in y
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/web` by running the following command:
|
In any Nx workspace, you can install `@nx/web` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/web
|
nx add @nx/web
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/web`.
|
This will install the correct version of `@nx/web`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/web` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/web
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/web Plugin
|
## Using the @nx/web Plugin
|
||||||
|
|
||||||
### Creating Applications
|
### Creating Applications
|
||||||
|
|||||||
@ -33,9 +33,6 @@ Make sure to install the `@nx/webpack` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/webpack` by running the following command:
|
In any Nx workspace, you can install `@nx/webpack` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/webpack
|
nx add @nx/webpack
|
||||||
```
|
```
|
||||||
@ -77,18 +74,6 @@ The `@nx/webpack/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/webpack` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/webpack
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Generate a new project using Webpack
|
## Generate a new project using Webpack
|
||||||
|
|
||||||
You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/node:app`](/nx-api/node/generators/application) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
|
You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/node:app`](/nx-api/node/generators/application) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
|
||||||
|
|||||||
@ -39,27 +39,12 @@ Make sure to install the `@nx/angular` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/angular` by running the following command:
|
In any Nx workspace, you can install `@nx/angular` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/angular
|
nx add @nx/angular
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/angular`.
|
This will install the correct version of `@nx/angular`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/angular` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/angular
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
{% callout type="note" title="Angular Tutorial" %}
|
{% callout type="note" title="Angular Tutorial" %}
|
||||||
For a full tutorial experience, follow the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
For a full tutorial experience, follow the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
||||||
{% /callout %}
|
{% /callout %}
|
||||||
|
|||||||
@ -38,9 +38,6 @@ Make sure to install the `@nx/detox` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/detox` by running the following command:
|
In any Nx workspace, you can install `@nx/detox` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/detox
|
nx add @nx/detox
|
||||||
```
|
```
|
||||||
@ -81,24 +78,6 @@ The `@nx/detox/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
Once a Detox configuration file has been identified, the targets are created with the name you specify under `buildTargetName`, `startTargetName` or `testTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `build` and `test`.
|
Once a Detox configuration file has been identified, the targets are created with the name you specify under `buildTargetName`, `startTargetName` or `testTargetName` in the `nx.json` `plugins` array. The default names for the inferred targets are `build` and `test`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/detox` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/detox
|
|
||||||
```
|
|
||||||
|
|
||||||
### Generating Applications
|
|
||||||
|
|
||||||
By default, when creating a mobile application, Nx will use Detox to create the e2e tests project.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
nx g @nx/react-native:app apps/frontend --e2eTestRunner=deotx
|
|
||||||
nx g @nx/expo:app apps/frontend --e2eTestRunner=detox
|
|
||||||
```
|
|
||||||
|
|
||||||
## Using Detox
|
## Using Detox
|
||||||
|
|
||||||
### Testing Applications
|
### Testing Applications
|
||||||
|
|||||||
@ -22,27 +22,12 @@ Make sure to install the `@nx/esbuild` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/esbuild` by running the following command:
|
In any Nx workspace, you can install `@nx/esbuild` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/esbuild
|
nx add @nx/esbuild
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/esbuild`.
|
This will install the correct version of `@nx/esbuild`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/esbuild` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/esbuild
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/esbuild Plugin
|
## Using the @nx/esbuild Plugin
|
||||||
|
|
||||||
### Creating a new JS library
|
### Creating a new JS library
|
||||||
|
|||||||
@ -18,27 +18,12 @@ Make sure to install the `@nx/eslint-plugin` version that matches the version of
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/eslint-plugin` by running the following commands if the package is not already installed:
|
In any Nx workspace, you can install `@nx/eslint-plugin` by running the following commands if the package is not already installed:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/eslint-plugin
|
nx add @nx/eslint-plugin
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/eslint-plugin`.
|
This will install the correct version of `@nx/eslint-plugin`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/eslint-plugin` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/eslint-plugin
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Included plugins
|
## Included plugins
|
||||||
|
|
||||||
The plugin contains the following rule configurations divided into sub-plugins.
|
The plugin contains the following rule configurations divided into sub-plugins.
|
||||||
|
|||||||
@ -15,9 +15,6 @@ Make sure to install the `@nx/eslint` version that matches the version of `nx` i
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/eslint` by running the following command:
|
In any Nx workspace, you can install `@nx/eslint` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/eslint
|
nx add @nx/eslint
|
||||||
```
|
```
|
||||||
@ -66,27 +63,6 @@ The `@nx/eslint/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
- The `targetName` option controls the name of the inferred ESLint tasks. The default name is `lint`.
|
- The `targetName` option controls the name of the inferred ESLint tasks. The default name is `lint`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx 17" %}
|
|
||||||
|
|
||||||
Install the `@nx/eslint` package with your package manager.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
npm add -D @nx/eslint
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 17" %}
|
|
||||||
|
|
||||||
Install the `@nx/linter` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/linter
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Lint
|
## Lint
|
||||||
|
|
||||||
You can lint an application or a library with the following command:
|
You can lint an application or a library with the following command:
|
||||||
|
|||||||
@ -23,27 +23,12 @@ Make sure to install the `@nx/expo` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/expo` by running the following command:
|
In any Nx workspace, you can install `@nx/expo` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/expo
|
nx add @nx/expo
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/expo`.
|
This will install the correct version of `@nx/expo`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/expo` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/expo
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
### How @nx/expo Infers Tasks
|
### How @nx/expo Infers Tasks
|
||||||
|
|
||||||
The `@nx/expo` plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file:
|
The `@nx/expo` plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file:
|
||||||
|
|||||||
@ -24,27 +24,12 @@ Make sure to install the `@nx/express` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/express` by running the following command:
|
In any Nx workspace, you can install `@nx/express` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/express
|
nx add @nx/express
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/express`.
|
This will install the correct version of `@nx/express`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/express` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/express
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Recipes
|
## Recipes
|
||||||
|
|
||||||
- [Add an Express Application to Your Workspace](/showcase/example-repos/add-express)
|
- [Add an Express Application to Your Workspace](/showcase/example-repos/add-express)
|
||||||
|
|||||||
@ -19,27 +19,12 @@ Make sure to install the `@nx/jest` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/jest` by running the following command:
|
In any Nx workspace, you can install `@nx/jest` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/jest
|
nx add @nx/jest
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/jest`.
|
This will install the correct version of `@nx/jest`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/jest` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/jest
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
#### Configuring @nx/jest/plugin for both E2E and Unit Tests
|
#### Configuring @nx/jest/plugin for both E2E and Unit Tests
|
||||||
|
|
||||||
While Jest is most often used for unit tests, there are cases where it can be used for e2e tests as well as unit tests
|
While Jest is most often used for unit tests, there are cases where it can be used for e2e tests as well as unit tests
|
||||||
|
|||||||
@ -15,27 +15,12 @@ Make sure to install the `@nx/js` version that matches the version of `nx` in yo
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/js` by running the following command:
|
In any Nx workspace, you can install `@nx/js` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/js
|
nx add @nx/js
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/js`.
|
This will install the correct version of `@nx/js`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/js` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/js
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
### `ts` Preset
|
### `ts` Preset
|
||||||
|
|
||||||
When initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nx/js` pre-installed.
|
When initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nx/js` pre-installed.
|
||||||
|
|||||||
@ -37,27 +37,12 @@ Make sure to install the `@nx/nest` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/nest` by running the following command:
|
In any Nx workspace, you can install `@nx/nest` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/nest
|
nx add @nx/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/nest`.
|
This will install the correct version of `@nx/nest`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/nest` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/nest
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
### Create Applications
|
### Create Applications
|
||||||
|
|
||||||
You can add a new Nest application with the following command:
|
You can add a new Nest application with the following command:
|
||||||
|
|||||||
@ -15,27 +15,12 @@ Make sure to install the `@nx/node` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/node` by running the following command:
|
In any Nx workspace, you can install `@nx/node` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/node
|
nx add @nx/node
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/node`.
|
This will install the correct version of `@nx/node`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/node` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/node
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/node Plugin
|
## Using the @nx/node Plugin
|
||||||
|
|
||||||
### Creating Applications
|
### Creating Applications
|
||||||
|
|||||||
@ -21,9 +21,6 @@ Make sure to install the `@nx/playwright` version that matches the version of `n
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/playwright` by running the following command:
|
In any Nx workspace, you can install `@nx/playwright` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/playwright
|
nx add @nx/playwright
|
||||||
```
|
```
|
||||||
@ -71,18 +68,6 @@ The `targetName` and `ciTargetName` options control the name of the inferred Pla
|
|||||||
|
|
||||||
If you would like to disable Atomizer for Playwright tasks, set `ciTargetName` to `false`.
|
If you would like to disable Atomizer for Playwright tasks, set `ciTargetName` to `false`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/playwright` package with your package manager.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
npm add -D @nx/playwright
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## E2E Testing
|
## E2E Testing
|
||||||
|
|
||||||
By default, when creating a new frontend application, Nx will prompt for which e2e test runner to use. Select `playwright` or pass in the arg `--e2eTestRunner=playwright`
|
By default, when creating a new frontend application, Nx will prompt for which e2e test runner to use. Select `playwright` or pass in the arg `--e2eTestRunner=playwright`
|
||||||
|
|||||||
@ -30,27 +30,12 @@ Make sure to install the `@nx/react` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/react` by running the following command:
|
In any Nx workspace, you can install `@nx/react` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/react
|
nx add @nx/react
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/react`.
|
This will install the correct version of `@nx/react`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/react` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/react
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/react Plugin
|
## Using the @nx/react Plugin
|
||||||
|
|
||||||
### Creating Applications and Libraries
|
### Creating Applications and Libraries
|
||||||
|
|||||||
@ -25,9 +25,6 @@ Make sure to install the `@nx/remix` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/remix` by running the following command:
|
In any Nx workspace, you can install `@nx/remix` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/remix
|
nx add @nx/remix
|
||||||
```
|
```
|
||||||
@ -68,18 +65,6 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`.
|
The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/remix` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/remix
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the Remix Plugin
|
## Using the Remix Plugin
|
||||||
|
|
||||||
## Generate a Remix Application
|
## Generate a Remix Application
|
||||||
|
|||||||
@ -15,9 +15,6 @@ Make sure to install the `@nx/rspack` version that matches the version of `nx` i
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/rspack` by running the following command:
|
In any Nx workspace, you can install `@nx/rspack` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/rspack
|
nx add @nx/rspack
|
||||||
```
|
```
|
||||||
@ -61,18 +58,6 @@ The `@nx/rspack/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Rspack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Rspack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/rspack` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/rspack
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using @nx/rspack
|
## Using @nx/rspack
|
||||||
|
|
||||||
### Generate a new project using Rspack
|
### Generate a new project using Rspack
|
||||||
|
|||||||
@ -17,9 +17,6 @@ Make sure to install the `@nx/storybook` version that matches the version of `nx
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/storybook` by running the following command:
|
In any Nx workspace, you can install `@nx/storybook` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/storybook
|
nx add @nx/storybook
|
||||||
```
|
```
|
||||||
@ -63,18 +60,6 @@ The `@nx/storybook/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
|
The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/storybook` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/storybook
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using Storybook
|
## Using Storybook
|
||||||
|
|
||||||
### Generating Storybook Configuration
|
### Generating Storybook Configuration
|
||||||
|
|||||||
@ -32,19 +32,10 @@ Make sure to install the `@nx/vite` version that matches the version of `nx` in
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/vite` by running the following command:
|
In any Nx workspace, you can install `@nx/vite` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/vite
|
nx add @nx/vite
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also pass the `--setupPathsPlugin` flag to add [`nxViteTsPaths` plugin](/recipes/vite/configure-vite#typescript-paths), so your projects can use workspace libraries.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
nx add @nx/vite --setupPathsPlugin
|
|
||||||
```
|
|
||||||
|
|
||||||
This will install the correct version of `@nx/vite`.
|
This will install the correct version of `@nx/vite`.
|
||||||
|
|
||||||
### How @nx/vite Infers Tasks
|
### How @nx/vite Infers Tasks
|
||||||
@ -91,18 +82,6 @@ The `@nx/vite/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
|
The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/vite` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/vite
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using @nx/vite
|
## Using @nx/vite
|
||||||
|
|
||||||
### Generate a new project using Vite
|
### Generate a new project using Vite
|
||||||
|
|||||||
@ -19,27 +19,12 @@ Make sure to install the `@nx/vue` version that matches the version of `nx` in y
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/vue` by running the following command:
|
In any Nx workspace, you can install `@nx/vue` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/vue
|
nx add @nx/vue
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/vue`.
|
This will install the correct version of `@nx/vue`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/vue` package with your package manager.
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
|
||||||
npm add -D @nx/vue
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/vue Plugin
|
## Using the @nx/vue Plugin
|
||||||
|
|
||||||
### Generate a new project using Vue
|
### Generate a new project using Vue
|
||||||
|
|||||||
@ -23,27 +23,12 @@ Make sure to install the `@nx/web` version that matches the version of `nx` in y
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/web` by running the following command:
|
In any Nx workspace, you can install `@nx/web` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/web
|
nx add @nx/web
|
||||||
```
|
```
|
||||||
|
|
||||||
This will install the correct version of `@nx/web`.
|
This will install the correct version of `@nx/web`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/web` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/web
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Using the @nx/web Plugin
|
## Using the @nx/web Plugin
|
||||||
|
|
||||||
### Creating Applications
|
### Creating Applications
|
||||||
|
|||||||
@ -33,9 +33,6 @@ Make sure to install the `@nx/webpack` version that matches the version of `nx`
|
|||||||
|
|
||||||
In any Nx workspace, you can install `@nx/webpack` by running the following command:
|
In any Nx workspace, you can install `@nx/webpack` by running the following command:
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
```shell {% skipRescope=true %}
|
```shell {% skipRescope=true %}
|
||||||
nx add @nx/webpack
|
nx add @nx/webpack
|
||||||
```
|
```
|
||||||
@ -77,18 +74,6 @@ The `@nx/webpack/plugin` is configured in the `plugins` array in `nx.json`.
|
|||||||
|
|
||||||
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
Install the `@nx/webpack` package with your package manager.
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm add -D @nx/webpack
|
|
||||||
```
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Generate a new project using Webpack
|
## Generate a new project using Webpack
|
||||||
|
|
||||||
You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/node:app`](/nx-api/node/generators/application) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
|
You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/node:app`](/nx-api/node/generators/application) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
|
||||||
|
|||||||
@ -13,10 +13,6 @@ Additionally, we should generate pruned lock file according to the generated `pa
|
|||||||
|
|
||||||
Nx offers two varieties of Webpack plugin which can be used to generate `package.json`.
|
Nx offers two varieties of Webpack plugin which can be used to generate `package.json`.
|
||||||
|
|
||||||
{% tabs %}
|
|
||||||
|
|
||||||
{% tab label="Nx 18+" %}
|
|
||||||
|
|
||||||
## Basic Plugin Configuration
|
## Basic Plugin Configuration
|
||||||
|
|
||||||
`@nx/webpack/plugin` plugin is compatible with a conventional webpack configuration setup which offers a smooth integration with the Webpack CLI.
|
`@nx/webpack/plugin` plugin is compatible with a conventional webpack configuration setup which offers a smooth integration with the Webpack CLI.
|
||||||
@ -70,23 +66,6 @@ module.exports = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
|
|
||||||
{% tab label="Nx < 18" %}
|
|
||||||
|
|
||||||
## Supported executors
|
|
||||||
|
|
||||||
The `@nx/webpack:webpack` executor supports the `generatePackageJson` flag which generates both `package.json` as well as the lock file.
|
|
||||||
|
|
||||||
Some executors automatically generate output `package.json` and the lock file generation is supported using the `generateLockfile` flag:
|
|
||||||
|
|
||||||
- `@nx/js:swc`
|
|
||||||
- `@nx/js:tsc`
|
|
||||||
- `@nx/next:build`
|
|
||||||
|
|
||||||
{% /tab %}
|
|
||||||
{% /tabs %}
|
|
||||||
|
|
||||||
## Programmatic usage
|
## Programmatic usage
|
||||||
|
|
||||||
If you are using a custom setup that does not support the creation of a `package.json` or a lock file, you can still use Nx to generate them via The `createPackageJson` and `createLockFile` functions which are exported from `@nx/js`:
|
If you are using a custom setup that does not support the creation of a `package.json` or a lock file, you can still use Nx to generate them via The `createPackageJson` and `createLockFile` functions which are exported from `@nx/js`:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user