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
GitHub
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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" %}
|
||||
For a full tutorial experience, follow the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
||||
{% /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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
- [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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
## 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="Nx < 18" %}
|
||||
|
||||
Install the `@nx/storybook` package with your package manager.
|
||||
|
||||
```shell
|
||||
npm add -D @nx/storybook
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
|
||||
## Using Storybook
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
### 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`.
|
||||
|
||||
{% /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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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" %}
|
||||
For a full tutorial experience, follow the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
||||
{% /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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
- [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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
## 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="Nx < 18" %}
|
||||
|
||||
Install the `@nx/storybook` package with your package manager.
|
||||
|
||||
```shell
|
||||
npm add -D @nx/storybook
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
|
||||
## Using Storybook
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
### 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`.
|
||||
|
||||
{% /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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
nx add @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
|
||||
|
||||
### 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:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
```shell {% skipRescope=true %}
|
||||
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`.
|
||||
|
||||
{% /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
|
||||
|
||||
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`.
|
||||
|
||||
{% tabs %}
|
||||
|
||||
{% tab label="Nx 18+" %}
|
||||
|
||||
## Basic Plugin Configuration
|
||||
|
||||
`@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
|
||||
|
||||
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