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:
Jack Hsu 2025-04-30 14:34:28 -04:00 committed by GitHub
parent cdbd97e98e
commit 766d1b32e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
41 changed files with 0 additions and 663 deletions

View File

@ -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 %}

View File

@ -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

View File

@ -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

View File

@ -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.

View File

@ -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:

View File

@ -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:

View 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)

View File

@ -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

View File

@ -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.

View File

@ -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:

View File

@ -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

View File

@ -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`

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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.

View File

@ -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 %}

View File

@ -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

View File

@ -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

View File

@ -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.

View File

@ -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:

View File

@ -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:

View 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)

View File

@ -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

View File

@ -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.

View File

@ -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:

View File

@ -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

View File

@ -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`

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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.

View File

@ -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`: