diff --git a/docs/generated/packages/angular/documents/overview.md b/docs/generated/packages/angular/documents/overview.md index 56f25783c8..f3a1a7f2b4 100644 --- a/docs/generated/packages/angular/documents/overview.md +++ b/docs/generated/packages/angular/documents/overview.md @@ -25,14 +25,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx- Adding the Angular plugin to an existing Nx workspace can be done with the following: +{% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @nx/angular +``` + +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @nx/angular ``` +{% /tab %} +{% tab label="pnpm" %} + ```shell -npm install -D @nx/angular +pnpm add -D @nx/angular ``` +{% /tab %} +{% /tabs %} + {% callout type="note" title="Angular Tutorials" %} For a full tutorial experience, follow the [Angular Standalone Tutorial](/getting-started/tutorials/angular-standalone-tutorial) or the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial) {% /callout %} diff --git a/docs/generated/packages/cypress/documents/overview.md b/docs/generated/packages/cypress/documents/overview.md index 903620db4a..d785f02ad4 100644 --- a/docs/generated/packages/cypress/documents/overview.md +++ b/docs/generated/packages/cypress/documents/overview.md @@ -15,14 +15,30 @@ Cypress is a test runner built for the modern web. It has a lot of great feature If the `@nx/cypress` package is not installed, install the version that matches your `nx` package version. -```shell -yarn add --dev @nx/cypress -``` +{% tabs %} +{% tab label="npm" %} ```shell -npm install --save-dev @nx/cypress +npm add -D @nx/cypress ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/cypress +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/cypress +``` + +{% /tab %} +{% /tabs %} + ## E2E Testing By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project. diff --git a/docs/generated/packages/detox/documents/overview.md b/docs/generated/packages/detox/documents/overview.md index 816370dee1..5f894f477e 100644 --- a/docs/generated/packages/detox/documents/overview.md +++ b/docs/generated/packages/detox/documents/overview.md @@ -38,19 +38,24 @@ You can create a new Detox E2E project for an existing mobile project. If the `@nx/detox` package is not installed, install the version that matches your `@nx/workspace` version. {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} -```sh -# npm -npm install --save-dev @nx/detox +```shell +npm add -D @nx/detox ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} -```sh -# yarn -yarn add --dev @nx/detox +```shell +yarn add -D @nx/detox +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/detox ``` {% /tab %} diff --git a/docs/generated/packages/esbuild/documents/overview.md b/docs/generated/packages/esbuild/documents/overview.md index 082d6053b1..577d15f763 100644 --- a/docs/generated/packages/esbuild/documents/overview.md +++ b/docs/generated/packages/esbuild/documents/overview.md @@ -21,7 +21,7 @@ To add the esbuild plugin to an existing workspace, run the following: {% tab label="npm" %} ```shell -npm install -D @nx/esbuild +npm add -D @nx/esbuild ``` {% /tab %} @@ -31,6 +31,13 @@ npm install -D @nx/esbuild yarn add -D @nx/esbuild ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/esbuild +``` + {% /tab %} {% /tabs %} diff --git a/docs/generated/packages/eslint-plugin/documents/overview.md b/docs/generated/packages/eslint-plugin/documents/overview.md index dcab3273d9..6a81ea5456 100644 --- a/docs/generated/packages/eslint-plugin/documents/overview.md +++ b/docs/generated/packages/eslint-plugin/documents/overview.md @@ -14,17 +14,24 @@ 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="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/eslint-plugin +npm add -D @nx/eslint-plugin ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/eslint-plugin +yarn add -D @nx/eslint-plugin +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/eslint-plugin ``` {% /tab %} diff --git a/docs/generated/packages/expo/documents/overview.md b/docs/generated/packages/expo/documents/overview.md index 0590c3e9e8..67551bd597 100644 --- a/docs/generated/packages/expo/documents/overview.md +++ b/docs/generated/packages/expo/documents/overview.md @@ -19,17 +19,24 @@ Make sure to install the `@nx/expo` version that matches the version of `nx` in {% /callout %} {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/expo +npm add -D @nx/expo ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/expo +yarn add -D @nx/expo +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/expo ``` {% /tab %} diff --git a/docs/generated/packages/jest/documents/overview.md b/docs/generated/packages/jest/documents/overview.md index 5de15709af..c8b02f9bfc 100644 --- a/docs/generated/packages/jest/documents/overview.md +++ b/docs/generated/packages/jest/documents/overview.md @@ -22,14 +22,30 @@ First, install `@nx/jest`, if not already installed using your preferred package Make sure to install the `@nx/jest` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync). {% /callout %} -```shell -npm install --save-dev @nx/jest -``` +{% tabs %} +{% tab label="npm" %} ```shell -yarn add --dev @nx/jest +npm add -D @nx/jest ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/jest +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/jest +``` + +{% /tab %} +{% /tabs %} + Once installed, run the `configuration` generator ```shell diff --git a/docs/generated/packages/js/documents/overview.md b/docs/generated/packages/js/documents/overview.md index 82e7fc39a8..2474d369db 100644 --- a/docs/generated/packages/js/documents/overview.md +++ b/docs/generated/packages/js/documents/overview.md @@ -11,17 +11,24 @@ 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 commands if `@nx/js` package is not installed: {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/js +npm add -D @nx/js ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/js +yarn add -D @nx/js +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/js ``` {% /tab %} diff --git a/docs/generated/packages/nest/documents/overview.md b/docs/generated/packages/nest/documents/overview.md index 878099daf3..b4b4fd2608 100644 --- a/docs/generated/packages/nest/documents/overview.md +++ b/docs/generated/packages/nest/documents/overview.md @@ -27,14 +27,30 @@ Make sure to install the `@nx/nest` version that matches the version of `nx` in To add the Nest plugin to an existing workspace, run one the following commands: +{% tabs %} +{% tab label="npm" %} + ```shell -npm install -D @nx/nest +npm add -D @nx/nest ``` +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @nx/nest ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/nest +``` + +{% /tab %} +{% /tabs %} + ### Create Applications You can add a new Nest application with the following command: diff --git a/docs/generated/packages/next/documents/overview.md b/docs/generated/packages/next/documents/overview.md index e22dda365a..0a0f056e67 100644 --- a/docs/generated/packages/next/documents/overview.md +++ b/docs/generated/packages/next/documents/overview.md @@ -16,14 +16,21 @@ To add Next.js to an existing Nx workspace, install the `@nx/next` package. Make {% tab label="npm" %} ```shell -npm install --save-dev @nx/next +npm add -D @nx/next ``` {% /tab %} {% tab label="yarn" %} ```shell -yarn add --dev @nx/next +yarn add -D @nx/next +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/next ``` {% /tab %} diff --git a/docs/generated/packages/node/documents/overview.md b/docs/generated/packages/node/documents/overview.md index 13cbaa7b54..21aa25e0e3 100644 --- a/docs/generated/packages/node/documents/overview.md +++ b/docs/generated/packages/node/documents/overview.md @@ -8,14 +8,30 @@ Make sure to install the `@nx/node` version that matches the version of `nx` in To add the Node plugin to an existing workspace, run one of the following: -```shell -# For npm users -npm install -D @nx/node +{% tabs %} +{% tab label="npm" %} -# For yarn users +```shell +npm add -D @nx/node +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell yarn add -D @nx/node ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/node +``` + +{% /tab %} +{% /tabs %} + ### Creating Applications You can add a new application with the following: diff --git a/docs/generated/packages/nuxt/documents/overview.md b/docs/generated/packages/nuxt/documents/overview.md index c097353f30..9eb93e516a 100644 --- a/docs/generated/packages/nuxt/documents/overview.md +++ b/docs/generated/packages/nuxt/documents/overview.md @@ -25,7 +25,7 @@ There are a number of ways to use Nuxt in your existing workspace. {% tab label="npm" %} ```shell -npm install -D @nx/nuxt +npm add -D @nx/nuxt ``` {% /tab %} @@ -39,7 +39,7 @@ yarn add -D @nx/nuxt {% tab label="pnpm" %} ```shell -pnpm install -D @nx/nuxt +pnpm add -D @nx/nuxt ``` {% /tab %} diff --git a/docs/generated/packages/playwright/documents/overview.md b/docs/generated/packages/playwright/documents/overview.md index 4ce0d5627f..c01e59e715 100644 --- a/docs/generated/packages/playwright/documents/overview.md +++ b/docs/generated/packages/playwright/documents/overview.md @@ -14,21 +14,21 @@ If the `@nx/playwright` package is not installed, install the version that match {% tab label="npm" %} ```shell -npm install --save-dev @nx/playwright +npm add -D @nx/playwright ``` {% /tab %} {% tab label="yarn" %} ```shell -yarn add --dev @nx/playwright +yarn add -D @nx/playwright ``` {% /tab %} {% tab label="pnpm" %} ```shell -pnpm i -D @nx/playwright +pnpm add -D @nx/playwright ``` {% /tab %} diff --git a/docs/generated/packages/react-native/documents/overview.md b/docs/generated/packages/react-native/documents/overview.md index f17aff1d97..5a533982f4 100644 --- a/docs/generated/packages/react-native/documents/overview.md +++ b/docs/generated/packages/react-native/documents/overview.md @@ -35,17 +35,24 @@ Make sure to install the `@nx/react-native` version that matches the version of {% /callout %} {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/react-native +npm add -D @nx/react-native ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/react-native +yarn add -D @nx/react-native +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/react-native ``` {% /tab %} diff --git a/docs/generated/packages/react/documents/overview.md b/docs/generated/packages/react/documents/overview.md index 06373db3fc..7afbe410e1 100644 --- a/docs/generated/packages/react/documents/overview.md +++ b/docs/generated/packages/react/documents/overview.md @@ -16,14 +16,30 @@ Make sure to install the `@nx/react` version that matches the version of `nx` in To add the React plugin to an existing workspace, run one of the following: -```shell -# For npm users -npm install -D @nx/react +{% tabs %} +{% tab label="npm" %} -# For yarn users +```shell +npm add -D @nx/react +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell yarn add -D @nx/react ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/react +``` + +{% /tab %} +{% /tabs %} + {% callout type="note" title="React Tutorials" %} For a full tutorial experience, follow the [React Standalone Tutorial](/getting-started/tutorials/react-standalone-tutorial) or the [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial) {% /callout %} diff --git a/docs/generated/packages/remix/documents/overview.md b/docs/generated/packages/remix/documents/overview.md index d2de7ce90b..d234672adf 100644 --- a/docs/generated/packages/remix/documents/overview.md +++ b/docs/generated/packages/remix/documents/overview.md @@ -20,14 +20,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx- Adding the Remix plugin to an existing Nx workspace can be done with the following: +{% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @nx/remix +``` + +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @nx/remix ``` +{% /tab %} +{% tab label="pnpm" %} + ```shell -npm install -D @nx/remix +pnpm add -D @nx/remix ``` +{% /tab %} +{% /tabs %} + ## Using the Remix Plugin ## Generate a Remix Application diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md index bff6c56c32..47590c3960 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/docs/generated/packages/storybook/documents/overview.md @@ -16,24 +16,24 @@ Make sure to install the `@nx/storybook` version that matches the version of `nx {% /callout %} {% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @nx/storybook +``` + +{% /tab %} {% tab label="yarn" %} ```shell yarn add -D @nx/storybook ``` -{% /tab %} -{% tab label="npm" %} - -```shell -npm install -D @nx/storybook -``` - {% /tab %} {% tab label="pnpm" %} ```shell -pnpm install -D @nx/storybook +pnpm add -D @nx/storybook ``` {% /tab %} diff --git a/docs/generated/packages/vite/documents/overview.md b/docs/generated/packages/vite/documents/overview.md index 035fc88681..8dc7c62660 100644 --- a/docs/generated/packages/vite/documents/overview.md +++ b/docs/generated/packages/vite/documents/overview.md @@ -70,7 +70,7 @@ Make sure to install the `@nx/vite` version that matches the version of `nx` in {% tab label="npm" %} ```shell -npm install -D @nx/vite +npm add -D @nx/vite ``` {% /tab %} @@ -84,7 +84,7 @@ yarn add -D @nx/vite {% tab label="pnpm" %} ```shell -pnpm install -D @nx/vite +pnpm add -D @nx/vite ``` {% /tab %} diff --git a/docs/generated/packages/vue/documents/overview.md b/docs/generated/packages/vue/documents/overview.md index d710c87bbd..d1e5143162 100644 --- a/docs/generated/packages/vue/documents/overview.md +++ b/docs/generated/packages/vue/documents/overview.md @@ -29,7 +29,7 @@ There are a number of ways to use Vue in your existing workspace. {% tab label="npm" %} ```shell -npm install -D @nx/vue +npm add -D @nx/vue ``` {% /tab %} @@ -43,7 +43,7 @@ yarn add -D @nx/vue {% tab label="pnpm" %} ```shell -pnpm install -D @nx/vue +pnpm add -D @nx/vue ``` {% /tab %} diff --git a/docs/generated/packages/web/documents/overview.md b/docs/generated/packages/web/documents/overview.md index ff1c884fca..e24927d7d4 100644 --- a/docs/generated/packages/web/documents/overview.md +++ b/docs/generated/packages/web/documents/overview.md @@ -14,14 +14,30 @@ Make sure to install the `@nx/web` version that matches the version of `nx` in y To add the web plugin to an existing workspace, run one of the following: -```shell -# For npm users -npm install -D @nx/web +{% tabs %} +{% tab label="npm" %} -# For yarn users +```shell +npm add -D @nx/web +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell yarn add -D @nx/web ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/web +``` + +{% /tab %} +{% /tabs %} + ### Creating Applications You can add a new application with the following: diff --git a/docs/shared/core-features/enforce-module-boundaries.md b/docs/shared/core-features/enforce-module-boundaries.md index c29854fced..b17cdf85a3 100644 --- a/docs/shared/core-features/enforce-module-boundaries.md +++ b/docs/shared/core-features/enforce-module-boundaries.md @@ -15,10 +15,30 @@ Nx provides an `enforce-module-boundaries` eslint rule that enforces the public To set up the lint rule, install these dependencies: +{% tabs %} +{% tab label="npm" %} + ```shell -npm i @nx/eslint-plugin @nx/devkit +npm add @nx/eslint-plugin @nx/devkit ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add @nx/eslint-plugin @nx/devkit +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add @nx/eslint-plugin @nx/devkit +``` + +{% /tab %} +{% /tabs %} + And configure the rule in your root `.eslintrc.json` file: ```jsonc {% fileName=".eslintrc.json" %} diff --git a/docs/shared/core-tutorial/01-create-blog.md b/docs/shared/core-tutorial/01-create-blog.md index d20e562513..440a9c4511 100644 --- a/docs/shared/core-tutorial/01-create-blog.md +++ b/docs/shared/core-tutorial/01-create-blog.md @@ -61,17 +61,24 @@ Which tells yarn (or npm) and Nx to look in the `packages` folder for projects t To install Eleventy run: {% tabs %} -{% tab label="yarn" %} - -```shell -yarn add -D -W @11ty/eleventy@1.0.0 -``` - -{% /tab %} {% tab label="npm" %} ```shell -npm install -D @11ty/eleventy@1.0.0 +npm add -D @11ty/eleventy@1.0.0 +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @11ty/eleventy@1.0.0 +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @11ty/eleventy@1.0.0 ``` {% /tab %} diff --git a/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md b/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md index 379c9759ed..f931df4575 100644 --- a/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md +++ b/docs/shared/deprecated/storybook/migrate-webpack-final-angular.md @@ -140,12 +140,26 @@ Once you've migrated all your libraries, you can think about removing the root-l If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work: +{% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @storybook/builder-webpack5 @storybook/manager-webpack5 +``` + +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5 ``` -or if you're using `npm`: +{% /tab %} +{% tab label="pnpm" %} ```shell -npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5 +pnpm add -D @storybook/builder-webpack5 @storybook/manager-webpack5 ``` + +{% /tab %} +{% /tabs %} diff --git a/docs/shared/deprecated/storybook/migrate-webpack-final-react.md b/docs/shared/deprecated/storybook/migrate-webpack-final-react.md index cc122d9a3a..4f5ee604e8 100644 --- a/docs/shared/deprecated/storybook/migrate-webpack-final-react.md +++ b/docs/shared/deprecated/storybook/migrate-webpack-final-react.md @@ -205,12 +205,26 @@ Once you've migrated all your libraries, you can think about removing the root-l If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work: +{% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @storybook/builder-webpack5 @storybook/manager-webpack5 +``` + +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5 ``` -or if you're using `npm`: +{% /tab %} +{% tab label="pnpm" %} ```shell -npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5 +pnpm add -D @storybook/builder-webpack5 @storybook/manager-webpack5 ``` + +{% /tab %} +{% /tabs %} diff --git a/docs/shared/getting-started/installation.md b/docs/shared/getting-started/installation.md index 405d1153e6..d97c52faf9 100644 --- a/docs/shared/getting-started/installation.md +++ b/docs/shared/getting-started/installation.md @@ -68,7 +68,7 @@ You can install Nx globally. Depending on your package manager, use one of the f {% tab label="npm" %} ```shell -npm install --global nx@latest +npm add --global nx@latest ``` {% /tab %} @@ -82,7 +82,7 @@ yarn global add nx@latest {% tab label="pnpm" %} ```shell -pnpm install --global nx@latest +pnpm add --global nx@latest ``` {% /tab %} diff --git a/docs/shared/guides/module-federation/faster-builds.md b/docs/shared/guides/module-federation/faster-builds.md index 384be399e5..7405c8752f 100644 --- a/docs/shared/guides/module-federation/faster-builds.md +++ b/docs/shared/guides/module-federation/faster-builds.md @@ -89,28 +89,61 @@ take advantage of remote caching and other features it provides. Then, for React users, install the `@nx/react` plugin; and for Angular users, install the `@nx/angular` plugin. +{% tabs %} +{% tab label="npm" %} + ```shell # If you use React -npm install --save-dev @nx/react +npm add -D @nx/react # If you use Angular -npm install --save-dev @nx/angular - -# Or with yarn -yarn add --dev @nx/react -yarn add --dev @nx/angular +npm add -D @nx/angular ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +# If you use React +yarn add -D @nx/react + +# If you use Angular +yarn add -D @nx/angular +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +# If you use React +pnpm add -D @nx/react + +# If you use Angular +pnpm add -D @nx/angular +``` + +{% /tab %} +{% /tabs %} + Next, generate the host and remote applications. -```shell -# React -nx g @nx/react:host host --remotes=shop,cart,about +{% tabs %} +{% tab label="React" %} -# Angular +```shell +nx g @nx/react:host host --remotes=shop,cart,about +``` + +{% /tab %} +{% tab label="Angular" %} + +```shell nx g @nx/angular:host host --remotes=shop,cart,about ``` +{% /tab %} +{% /tabs %} + {% callout type="note" title="More details" %} You can leave off the `--remotes` option and add them later with `nx g @nx/react:remote shop --host=host` or `nx g @nx/angular:remote shop --host=host`. diff --git a/docs/shared/guides/module-federation/micro-frontend-architecture.md b/docs/shared/guides/module-federation/micro-frontend-architecture.md index ea9c0b0d48..0cde36ff3a 100644 --- a/docs/shared/guides/module-federation/micro-frontend-architecture.md +++ b/docs/shared/guides/module-federation/micro-frontend-architecture.md @@ -51,16 +51,25 @@ Keeping the applications independent allows them to be deployed on different cad The generator for MFEs is the same as with basic Module Federation. You can use `nx g host` to create a new host application, and `nx g remote` for remote applications. +{% tabs %} +{% tab label="React" %} + ```shell -# React nx g @nx/react:host shell --remotes=shop,cart nx g @nx/react:remote about --host=shell +``` -#a Angular +{% /tab %} +{% tab label="Angular" %} + +```shell nx g @nx/angular:host shell --remotes=shop,cart nx g @nx/angular:remote about --host=shell ``` +{% /tab %} +{% /tabs %} + That is! You can now run `nx serve shell` to develop on the `shell` application, while keeping all remotes static. To develop on one or more remote applications, pass the `--devRemotes` option. diff --git a/docs/shared/guides/react-native.md b/docs/shared/guides/react-native.md index 866fa2fd9b..f8004962aa 100644 --- a/docs/shared/guides/react-native.md +++ b/docs/shared/guides/react-native.md @@ -134,13 +134,30 @@ When using React Native in Nx, you get the out-of-the-box support for TypeScript For existing Nx workspaces, install the `@nx/react-native` package to add React Native capabilities to it. -```shell -npm install @nx/react-native --save-dev +{% tabs %} +{% tab label="npm" %} -# Or with yarn -yarn add @nx/react-native --dev +```shell +npm add -D @nx/react-native ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/react-native +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/react-native +``` + +{% /tab %} +{% /tabs %} + ## Generating an Application To create additional React Native apps run: diff --git a/docs/shared/guides/remix.md b/docs/shared/guides/remix.md index e0e4d08671..e9a5e0ce5a 100644 --- a/docs/shared/guides/remix.md +++ b/docs/shared/guides/remix.md @@ -31,10 +31,30 @@ In this recipe, we'll show you how to create a [Remix](https://remix.run) applic Make sure to install the `@nx/remix` version that is on the same minor version as the `nx` version in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync). {% /callout %} +{% tabs %} +{% tab label="npm" %} + ```shell -npm install --save-dev @nx/remix +npm add -D @nx/remix ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/remix +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/remix +``` + +{% /tab %} +{% /tabs %} + ## Generate a Remix Application {% callout type="note" title="Directory Flag Behavior Changes" %} diff --git a/docs/shared/guides/use-environment-variables-in-angular.md b/docs/shared/guides/use-environment-variables-in-angular.md index 1bcc4017be..291ee85a81 100644 --- a/docs/shared/guides/use-environment-variables-in-angular.md +++ b/docs/shared/guides/use-environment-variables-in-angular.md @@ -29,13 +29,30 @@ The first two options is a matter of changing your build target configuration or First, install `@types/node` so we can use `process.env` in our code. -```shell -npm install --save-dev @types/node +{% tabs %} +{% tab label="npm" %} -# Or with yarn -yarn add --dev @types/node +```shell +npm add -D @types/node ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @types/node +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @types/node +``` + +{% /tab %} +{% /tabs %} + Next, update the `build` and `serve` targets (in `project.json` or `angular.json` file), to the following. ```json lines diff --git a/docs/shared/guides/using-tailwind-css-in-react.md b/docs/shared/guides/using-tailwind-css-in-react.md index 14560c15b0..66abbcab64 100644 --- a/docs/shared/guides/using-tailwind-css-in-react.md +++ b/docs/shared/guides/using-tailwind-css-in-react.md @@ -30,13 +30,30 @@ These manual steps are not required if you use the generator from the previous s ### Step 1: Install Tailwind Dependencies -```shell -npm install -D tailwindcss@latest postcss@latest autoprefixer@latest +{% tabs %} +{% tab label="npm" %} -# or with yarn +```shell +npm add -D tailwindcss@latest postcss@latest autoprefixer@latest +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest +``` + +{% /tab %} +{% /tabs %} + This installs the requisite tailwind dependencies. ### Step 2: Initialize Tailwind diff --git a/docs/shared/migration/lerna-and-nx.md b/docs/shared/migration/lerna-and-nx.md index 18ae8b5c3e..6828a9dcde 100644 --- a/docs/shared/migration/lerna-and-nx.md +++ b/docs/shared/migration/lerna-and-nx.md @@ -42,11 +42,29 @@ To enable Nx support (and thus speed up task running) go through the following s **1. Install Nx** +{% tabs %} +{% tab label="npm" %} + ```shell -npm i nx --save-dev +npm add -D nx ``` -(or the yarn/pnpm alternatives). +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D nx +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D nx +``` + +{% /tab %} +{% /tabs %} **2. Adjust your lerna.json** diff --git a/docs/shared/migration/manual.md b/docs/shared/migration/manual.md index 09e3038f5f..751b2e5514 100644 --- a/docs/shared/migration/manual.md +++ b/docs/shared/migration/manual.md @@ -35,7 +35,7 @@ The `apps` directory is the place where your top-level applications will be stor {% tab label="Angular" %} ```shell -npm install --save-dev @nx/angular +npm add -D @nx/angular # then nx generate @nx/angular:application my-application ``` @@ -44,7 +44,7 @@ nx generate @nx/angular:application my-application {% tab label="React" %} ```shell -npm install --save-dev @nx/react +npm add -D @nx/react # then nx generate @nx/react:application my-application ``` diff --git a/docs/shared/migration/migration-angularjs.md b/docs/shared/migration/migration-angularjs.md index 791a715e2f..05dfe27c0c 100644 --- a/docs/shared/migration/migration-angularjs.md +++ b/docs/shared/migration/migration-angularjs.md @@ -41,10 +41,30 @@ At the next prompt, you can choose whether to use [Nx Cloud](https://nx.app) or Your new workspace won’t have much in it because of the `apps` preset. You’ll need to generate an application to have some structure created. Add the Angular plugin to your workspace: +{% tabs %} +{% tab label="npm" %} + ```shell -npm install -D @nx/angular +npm add -D @nx/angular ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/angular +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/angular +``` + +{% /tab %} +{% /tabs %} + For this example, we will use Karma and Protractor, the most common unit test runner and e2e test runner for AngularJS. {% callout type="note" title="Unit & E2E tests" %} @@ -365,10 +385,30 @@ So far, you’ve mostly gotten already existing code and processes to work. This But migrating AngularJS code means we need to switch some of our tools to a more modern tool stack. Specifically, using webpack and babel is going to allow us to take advantage of Nx more easily. Becoming an expert in these build tools is outside the scope of this article, but I’ll address some AngularJS specific concerns. To get started, install these new dependencies: +{% tabs %} +{% tab label="npm" %} + ```shell -npm install -D @nx/web babel-plugin-angularjs-annotate +npm add -D @nx/web babel-plugin-angularjs-annotate ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/web babel-plugin-angularjs-annotate +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/web babel-plugin-angularjs-annotate +``` + +{% /tab %} +{% /tabs %} + Nx already has most of what you need for webpack added as a dependency. `@nx/web` contains the [executors](/core-features/plugin-features/use-task-executors) we need to use to build and serve the application with webpack and `babel-plugin-angularjs-annotate` is going to accomplish the same thing that `browserify-ngannotate` previously did in gulp: add dependency injection annotations. @@ -572,10 +612,30 @@ Unit testing can be an important part of any code migration. If you migrate your You need a few dependencies for AngularJS unit testing that Nx doesn’t provide by default: +{% tabs %} +{% tab label="npm" %} + ```shell -npm install -D angular-mocks@1.5.11 karma-webpack +npm add -D angular-mocks@1.5.11 karma-webpack ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D angular-mocks@1.5.11 karma-webpack +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D angular-mocks@1.5.11 karma-webpack +``` + +{% /tab %} +{% /tabs %} + Earlier, you configured this app to use Karma as its unit test runner. Nx has provided a Karma config file for you, but you’ll need to modify it to work with AngularJS: ```javascript diff --git a/docs/shared/npm-tutorial/package-based.md b/docs/shared/npm-tutorial/package-based.md index 76164bfa8f..b0b15f8926 100644 --- a/docs/shared/npm-tutorial/package-based.md +++ b/docs/shared/npm-tutorial/package-based.md @@ -67,10 +67,30 @@ export const isEven = (x: number) => x % 2 === 0; Next install TypeScript (notice we're using `tsc` for the `build` script in `package.json` above). While we could install TypeScript at the package-level, it is more convenient to have it globally for the entire monorepo. Run the following command at the root of your workspace. +{% tabs %} +{% tab label="npm" %} + ```shell -npm i typescript -D -W +npm add -D typescript ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D typescript +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D typescript +``` + +{% /tab %} +{% /tabs %} + Next run your `build` script with: ```shell @@ -136,10 +156,30 @@ The `workspaces` property in the root-level `package.json` tells NPM to create l At the root of your workspace run: +{% tabs %} +{% tab label="npm" %} + ```shell npm install ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm install +``` + +{% /tab %} +{% /tabs %} + NPM will create a Symbolic Link in your file system at: `node_modules/is-even` and `node_modules/is-odd`, so they reflect changes to your `packages/is-even` and `packages/is-odd` directories as they happen. ## Task Dependencies diff --git a/docs/shared/packages/angular/angular-plugin.md b/docs/shared/packages/angular/angular-plugin.md index 56f25783c8..f3a1a7f2b4 100644 --- a/docs/shared/packages/angular/angular-plugin.md +++ b/docs/shared/packages/angular/angular-plugin.md @@ -25,14 +25,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx- Adding the Angular plugin to an existing Nx workspace can be done with the following: +{% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @nx/angular +``` + +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @nx/angular ``` +{% /tab %} +{% tab label="pnpm" %} + ```shell -npm install -D @nx/angular +pnpm add -D @nx/angular ``` +{% /tab %} +{% /tabs %} + {% callout type="note" title="Angular Tutorials" %} For a full tutorial experience, follow the [Angular Standalone Tutorial](/getting-started/tutorials/angular-standalone-tutorial) or the [Angular Monorepo Tutorial](/getting-started/tutorials/angular-monorepo-tutorial) {% /callout %} diff --git a/docs/shared/packages/cypress/cypress-plugin.md b/docs/shared/packages/cypress/cypress-plugin.md index 903620db4a..d785f02ad4 100644 --- a/docs/shared/packages/cypress/cypress-plugin.md +++ b/docs/shared/packages/cypress/cypress-plugin.md @@ -15,14 +15,30 @@ Cypress is a test runner built for the modern web. It has a lot of great feature If the `@nx/cypress` package is not installed, install the version that matches your `nx` package version. -```shell -yarn add --dev @nx/cypress -``` +{% tabs %} +{% tab label="npm" %} ```shell -npm install --save-dev @nx/cypress +npm add -D @nx/cypress ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/cypress +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/cypress +``` + +{% /tab %} +{% /tabs %} + ## E2E Testing By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project. diff --git a/docs/shared/packages/detox/detox-plugin.md b/docs/shared/packages/detox/detox-plugin.md index 816370dee1..5f894f477e 100644 --- a/docs/shared/packages/detox/detox-plugin.md +++ b/docs/shared/packages/detox/detox-plugin.md @@ -38,19 +38,24 @@ You can create a new Detox E2E project for an existing mobile project. If the `@nx/detox` package is not installed, install the version that matches your `@nx/workspace` version. {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} -```sh -# npm -npm install --save-dev @nx/detox +```shell +npm add -D @nx/detox ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} -```sh -# yarn -yarn add --dev @nx/detox +```shell +yarn add -D @nx/detox +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/detox ``` {% /tab %} diff --git a/docs/shared/packages/esbuild/esbuild-plugin.md b/docs/shared/packages/esbuild/esbuild-plugin.md index 082d6053b1..577d15f763 100644 --- a/docs/shared/packages/esbuild/esbuild-plugin.md +++ b/docs/shared/packages/esbuild/esbuild-plugin.md @@ -21,7 +21,7 @@ To add the esbuild plugin to an existing workspace, run the following: {% tab label="npm" %} ```shell -npm install -D @nx/esbuild +npm add -D @nx/esbuild ``` {% /tab %} @@ -31,6 +31,13 @@ npm install -D @nx/esbuild yarn add -D @nx/esbuild ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/esbuild +``` + {% /tab %} {% /tabs %} diff --git a/docs/shared/packages/eslint/eslint-plugin.md b/docs/shared/packages/eslint/eslint-plugin.md index dcab3273d9..6a81ea5456 100644 --- a/docs/shared/packages/eslint/eslint-plugin.md +++ b/docs/shared/packages/eslint/eslint-plugin.md @@ -14,17 +14,24 @@ 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="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/eslint-plugin +npm add -D @nx/eslint-plugin ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/eslint-plugin +yarn add -D @nx/eslint-plugin +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/eslint-plugin ``` {% /tab %} diff --git a/docs/shared/packages/expo/expo-plugin.md b/docs/shared/packages/expo/expo-plugin.md index 0590c3e9e8..67551bd597 100644 --- a/docs/shared/packages/expo/expo-plugin.md +++ b/docs/shared/packages/expo/expo-plugin.md @@ -19,17 +19,24 @@ Make sure to install the `@nx/expo` version that matches the version of `nx` in {% /callout %} {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/expo +npm add -D @nx/expo ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/expo +yarn add -D @nx/expo +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/expo ``` {% /tab %} diff --git a/docs/shared/packages/jest/jest-plugin.md b/docs/shared/packages/jest/jest-plugin.md index 5de15709af..c8b02f9bfc 100644 --- a/docs/shared/packages/jest/jest-plugin.md +++ b/docs/shared/packages/jest/jest-plugin.md @@ -22,14 +22,30 @@ First, install `@nx/jest`, if not already installed using your preferred package Make sure to install the `@nx/jest` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync). {% /callout %} -```shell -npm install --save-dev @nx/jest -``` +{% tabs %} +{% tab label="npm" %} ```shell -yarn add --dev @nx/jest +npm add -D @nx/jest ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/jest +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/jest +``` + +{% /tab %} +{% /tabs %} + Once installed, run the `configuration` generator ```shell diff --git a/docs/shared/packages/js/js-plugin.md b/docs/shared/packages/js/js-plugin.md index 82e7fc39a8..2474d369db 100644 --- a/docs/shared/packages/js/js-plugin.md +++ b/docs/shared/packages/js/js-plugin.md @@ -11,17 +11,24 @@ 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 commands if `@nx/js` package is not installed: {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/js +npm add -D @nx/js ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/js +yarn add -D @nx/js +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/js ``` {% /tab %} diff --git a/docs/shared/packages/nest/nest-plugin.md b/docs/shared/packages/nest/nest-plugin.md index 878099daf3..b4b4fd2608 100644 --- a/docs/shared/packages/nest/nest-plugin.md +++ b/docs/shared/packages/nest/nest-plugin.md @@ -27,14 +27,30 @@ Make sure to install the `@nx/nest` version that matches the version of `nx` in To add the Nest plugin to an existing workspace, run one the following commands: +{% tabs %} +{% tab label="npm" %} + ```shell -npm install -D @nx/nest +npm add -D @nx/nest ``` +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @nx/nest ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/nest +``` + +{% /tab %} +{% /tabs %} + ### Create Applications You can add a new Nest application with the following command: diff --git a/docs/shared/packages/next/plugin-overview.md b/docs/shared/packages/next/plugin-overview.md index e22dda365a..0a0f056e67 100644 --- a/docs/shared/packages/next/plugin-overview.md +++ b/docs/shared/packages/next/plugin-overview.md @@ -16,14 +16,21 @@ To add Next.js to an existing Nx workspace, install the `@nx/next` package. Make {% tab label="npm" %} ```shell -npm install --save-dev @nx/next +npm add -D @nx/next ``` {% /tab %} {% tab label="yarn" %} ```shell -yarn add --dev @nx/next +yarn add -D @nx/next +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/next ``` {% /tab %} diff --git a/docs/shared/packages/node/node-plugin.md b/docs/shared/packages/node/node-plugin.md index 13cbaa7b54..21aa25e0e3 100644 --- a/docs/shared/packages/node/node-plugin.md +++ b/docs/shared/packages/node/node-plugin.md @@ -8,14 +8,30 @@ Make sure to install the `@nx/node` version that matches the version of `nx` in To add the Node plugin to an existing workspace, run one of the following: -```shell -# For npm users -npm install -D @nx/node +{% tabs %} +{% tab label="npm" %} -# For yarn users +```shell +npm add -D @nx/node +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell yarn add -D @nx/node ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/node +``` + +{% /tab %} +{% /tabs %} + ### Creating Applications You can add a new application with the following: diff --git a/docs/shared/packages/nuxt/nuxt-plugin.md b/docs/shared/packages/nuxt/nuxt-plugin.md index c097353f30..9eb93e516a 100644 --- a/docs/shared/packages/nuxt/nuxt-plugin.md +++ b/docs/shared/packages/nuxt/nuxt-plugin.md @@ -25,7 +25,7 @@ There are a number of ways to use Nuxt in your existing workspace. {% tab label="npm" %} ```shell -npm install -D @nx/nuxt +npm add -D @nx/nuxt ``` {% /tab %} @@ -39,7 +39,7 @@ yarn add -D @nx/nuxt {% tab label="pnpm" %} ```shell -pnpm install -D @nx/nuxt +pnpm add -D @nx/nuxt ``` {% /tab %} diff --git a/docs/shared/packages/playwright/playwright-plugin.md b/docs/shared/packages/playwright/playwright-plugin.md index 4ce0d5627f..c01e59e715 100644 --- a/docs/shared/packages/playwright/playwright-plugin.md +++ b/docs/shared/packages/playwright/playwright-plugin.md @@ -14,21 +14,21 @@ If the `@nx/playwright` package is not installed, install the version that match {% tab label="npm" %} ```shell -npm install --save-dev @nx/playwright +npm add -D @nx/playwright ``` {% /tab %} {% tab label="yarn" %} ```shell -yarn add --dev @nx/playwright +yarn add -D @nx/playwright ``` {% /tab %} {% tab label="pnpm" %} ```shell -pnpm i -D @nx/playwright +pnpm add -D @nx/playwright ``` {% /tab %} diff --git a/docs/shared/packages/react-native/react-native-plugin.md b/docs/shared/packages/react-native/react-native-plugin.md index f17aff1d97..5a533982f4 100644 --- a/docs/shared/packages/react-native/react-native-plugin.md +++ b/docs/shared/packages/react-native/react-native-plugin.md @@ -35,17 +35,24 @@ Make sure to install the `@nx/react-native` version that matches the version of {% /callout %} {% tabs %} -{%tab label="npm"%} +{% tab label="npm" %} ```shell -npm i --save-dev @nx/react-native +npm add -D @nx/react-native ``` {% /tab %} -{%tab label="yarn"%} +{% tab label="yarn" %} ```shell -yarn add --dev @nx/react-native +yarn add -D @nx/react-native +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/react-native ``` {% /tab %} diff --git a/docs/shared/packages/react/react-plugin.md b/docs/shared/packages/react/react-plugin.md index 06373db3fc..7afbe410e1 100644 --- a/docs/shared/packages/react/react-plugin.md +++ b/docs/shared/packages/react/react-plugin.md @@ -16,14 +16,30 @@ Make sure to install the `@nx/react` version that matches the version of `nx` in To add the React plugin to an existing workspace, run one of the following: -```shell -# For npm users -npm install -D @nx/react +{% tabs %} +{% tab label="npm" %} -# For yarn users +```shell +npm add -D @nx/react +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell yarn add -D @nx/react ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/react +``` + +{% /tab %} +{% /tabs %} + {% callout type="note" title="React Tutorials" %} For a full tutorial experience, follow the [React Standalone Tutorial](/getting-started/tutorials/react-standalone-tutorial) or the [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial) {% /callout %} diff --git a/docs/shared/packages/remix/remix-plugin.md b/docs/shared/packages/remix/remix-plugin.md index d2de7ce90b..d234672adf 100644 --- a/docs/shared/packages/remix/remix-plugin.md +++ b/docs/shared/packages/remix/remix-plugin.md @@ -20,14 +20,30 @@ can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx- Adding the Remix plugin to an existing Nx workspace can be done with the following: +{% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @nx/remix +``` + +{% /tab %} +{% tab label="yarn" %} + ```shell yarn add -D @nx/remix ``` +{% /tab %} +{% tab label="pnpm" %} + ```shell -npm install -D @nx/remix +pnpm add -D @nx/remix ``` +{% /tab %} +{% /tabs %} + ## Using the Remix Plugin ## Generate a Remix Application diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index bff6c56c32..47590c3960 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/docs/shared/packages/storybook/plugin-overview.md @@ -16,24 +16,24 @@ Make sure to install the `@nx/storybook` version that matches the version of `nx {% /callout %} {% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @nx/storybook +``` + +{% /tab %} {% tab label="yarn" %} ```shell yarn add -D @nx/storybook ``` -{% /tab %} -{% tab label="npm" %} - -```shell -npm install -D @nx/storybook -``` - {% /tab %} {% tab label="pnpm" %} ```shell -pnpm install -D @nx/storybook +pnpm add -D @nx/storybook ``` {% /tab %} diff --git a/docs/shared/packages/vite/vite-plugin.md b/docs/shared/packages/vite/vite-plugin.md index 035fc88681..8dc7c62660 100644 --- a/docs/shared/packages/vite/vite-plugin.md +++ b/docs/shared/packages/vite/vite-plugin.md @@ -70,7 +70,7 @@ Make sure to install the `@nx/vite` version that matches the version of `nx` in {% tab label="npm" %} ```shell -npm install -D @nx/vite +npm add -D @nx/vite ``` {% /tab %} @@ -84,7 +84,7 @@ yarn add -D @nx/vite {% tab label="pnpm" %} ```shell -pnpm install -D @nx/vite +pnpm add -D @nx/vite ``` {% /tab %} diff --git a/docs/shared/packages/vue/vue-plugin.md b/docs/shared/packages/vue/vue-plugin.md index d710c87bbd..d1e5143162 100644 --- a/docs/shared/packages/vue/vue-plugin.md +++ b/docs/shared/packages/vue/vue-plugin.md @@ -29,7 +29,7 @@ There are a number of ways to use Vue in your existing workspace. {% tab label="npm" %} ```shell -npm install -D @nx/vue +npm add -D @nx/vue ``` {% /tab %} @@ -43,7 +43,7 @@ yarn add -D @nx/vue {% tab label="pnpm" %} ```shell -pnpm install -D @nx/vue +pnpm add -D @nx/vue ``` {% /tab %} diff --git a/docs/shared/packages/web/web-plugin.md b/docs/shared/packages/web/web-plugin.md index ff1c884fca..e24927d7d4 100644 --- a/docs/shared/packages/web/web-plugin.md +++ b/docs/shared/packages/web/web-plugin.md @@ -14,14 +14,30 @@ Make sure to install the `@nx/web` version that matches the version of `nx` in y To add the web plugin to an existing workspace, run one of the following: -```shell -# For npm users -npm install -D @nx/web +{% tabs %} +{% tab label="npm" %} -# For yarn users +```shell +npm add -D @nx/web +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell yarn add -D @nx/web ``` +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @nx/web +``` + +{% /tab %} +{% /tabs %} + ### Creating Applications You can add a new application with the following: diff --git a/docs/shared/packages/webpack/webpack-config-setup.md b/docs/shared/packages/webpack/webpack-config-setup.md index 50dfb15904..1a9a371d12 100644 --- a/docs/shared/packages/webpack/webpack-config-setup.md +++ b/docs/shared/packages/webpack/webpack-config-setup.md @@ -121,6 +121,13 @@ module.exports = composePlugins( To add the `css-loader` to your config, install it and add the rule. {% tabs %} +{% tab label="npm" %} + +```shell +npm add -D css-loader +``` + +{% /tab %} {% tab label="yarn" %} ```shell @@ -128,10 +135,10 @@ yarn add -D css-loader ``` {% /tab %} -{% tab label="npm" %} +{% tab label="pnpm" %} ```shell -npm install -D css-loader +pnpm add -D css-loader ``` {% /tab %} diff --git a/docs/shared/plugins/maintain-published-plugin.md b/docs/shared/plugins/maintain-published-plugin.md index 8de512b254..e2c2f4bc8e 100644 --- a/docs/shared/plugins/maintain-published-plugin.md +++ b/docs/shared/plugins/maintain-published-plugin.md @@ -14,8 +14,31 @@ In order to use your plugin in other workspaces or share it with the community, Currently you will have to modify the `package.json` version by yourself or with a tool. {% /callout %} -After that, you can then install your plugin like any other npm package, -`npm i -D @my-org/my-plugin` or `yarn add -D @my-org/my-plugin`. +After that, you can then install your plugin like any other npm package - + +{% tabs %} +{% tab label="npm" %} + +```shell +npm add -D @my-org/my-plugin +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @my-org/my-plugin +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -D @my-org/my-plugin +``` + +{% /tab %} +{% /tabs %} ## List your Nx Plugin diff --git a/docs/shared/react-standalone-tutorial/react-standalone.md b/docs/shared/react-standalone-tutorial/react-standalone.md index 158c215e69..76fcf792d5 100644 --- a/docs/shared/react-standalone-tutorial/react-standalone.md +++ b/docs/shared/react-standalone-tutorial/react-standalone.md @@ -496,10 +496,30 @@ export * from './lib/product-list/product-list'; We're ready to import it into our main application now. First (if you haven't already), let's set up React Router. +{% tabs %} +{% tab label="npm" %} + ```shell -npm install react-router-dom +npm add react-router-dom ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add react-router-dom +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add react-router-dom +``` + +{% /tab %} +{% /tabs %} + Configure it in the `main.tsx`. ```tsx {% fileName="src/main.tsx" %} diff --git a/docs/shared/react-tutorial/react-monorepo.md b/docs/shared/react-tutorial/react-monorepo.md index 8b6a47e9e3..b3f1be6e40 100644 --- a/docs/shared/react-tutorial/react-monorepo.md +++ b/docs/shared/react-tutorial/react-monorepo.md @@ -407,10 +407,30 @@ export * from './lib/product-list/product-list'; We're ready to import it into our main application now. First (if you haven't already), let's set up React Router. +{% tabs %} +{% tab label="npm" %} + ```shell -npm install react-router-dom +npm add react-router-dom ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add react-router-dom +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add react-router-dom +``` + +{% /tab %} +{% /tabs %} + Configure it in the `main.tsx`. ```tsx {% fileName="apps/react-store/src/main.tsx" %} diff --git a/docs/shared/recipes/add-stack/add-astro.md b/docs/shared/recipes/add-stack/add-astro.md index db41d689f5..6c1621e4c1 100644 --- a/docs/shared/recipes/add-stack/add-astro.md +++ b/docs/shared/recipes/add-stack/add-astro.md @@ -83,10 +83,30 @@ Install `@nx/js` plugin. > Note: you should make sure any first party, `@nx/` scoped, plugins match the `nx` package version +{% tabs %} +{% tab label="npm" %} + ```shell -npm i -DE @nx/js@ +npm add -DE @nx/js@ ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -DE @nx/js@ +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add -DE @nx/js@ +``` + +{% /tab %} +{% /tabs %} + Then generate a project {% callout type="note" title="Directory Flag Behavior Changes" %} diff --git a/docs/shared/recipes/add-stack/add-deno.md b/docs/shared/recipes/add-stack/add-deno.md index eee0fa8813..663831739e 100644 --- a/docs/shared/recipes/add-stack/add-deno.md +++ b/docs/shared/recipes/add-stack/add-deno.md @@ -26,14 +26,21 @@ Make sure you have Deno installed on your machine. Consult the [Deno docs for mo {%tab label="npm"%} ```shell -npm i --save-dev @nx/deno +npm add -D @nx/deno ``` {% /tab %} {%tab label="yarn"%} ```shell -yarn add --dev @nx/deno +yarn add -D @nx/deno +``` + +{% /tab %} +{%tab label="pnpm"%} + +```shell +pnpm add -D @nx/deno ``` {% /tab %} diff --git a/docs/shared/recipes/add-stack/add-dotnet.md b/docs/shared/recipes/add-stack/add-dotnet.md index e29e065f33..28d98665f8 100644 --- a/docs/shared/recipes/add-stack/add-dotnet.md +++ b/docs/shared/recipes/add-stack/add-dotnet.md @@ -26,14 +26,21 @@ Make sure you have .NET installed on your machine. Consult the [.NET docs for mo {%tab label="npm"%} ```shell -npm i --save-dev @nx-dotnet/core +npm add -D @nx-dotnet/core ``` {% /tab %} {%tab label="yarn"%} ```shell -yarn add --dev @nx-dotnet/core +yarn add -D @nx-dotnet/core +``` + +{% /tab %} +{%tab label="pnpm"%} + +```shell +pnpm add -D @nx-dotnet/core ``` {% /tab %} diff --git a/docs/shared/recipes/add-stack/add-express.md b/docs/shared/recipes/add-stack/add-express.md index 59d76d4af1..373d1d213c 100644 --- a/docs/shared/recipes/add-stack/add-express.md +++ b/docs/shared/recipes/add-stack/add-express.md @@ -26,14 +26,21 @@ Make sure to install the `@nx/express` version that matches the version of `nx` {%tab label="npm"%} ```shell -npm i --save-dev @nx/express +npm add -D @nx/express ``` {% /tab %} {%tab label="yarn"%} ```shell -yarn add --dev @nx/express +yarn add -D @nx/express +``` + +{% /tab %} +{%tab label="pnpm"%} + +```shell +pnpm add -D @nx/express ``` {% /tab %} diff --git a/docs/shared/recipes/add-stack/add-fastify.md b/docs/shared/recipes/add-stack/add-fastify.md index cc247fd7f2..e4d9faf4e2 100644 --- a/docs/shared/recipes/add-stack/add-fastify.md +++ b/docs/shared/recipes/add-stack/add-fastify.md @@ -39,14 +39,21 @@ If you are adding Fastify to an existing repo, continue to the next section. {%tab label="npm"%} ```shell -npm i --save-dev @nx/node +npm add -D @nx/node ``` {% /tab %} {%tab label="yarn"%} ```shell -yarn add --dev @nx/node +yarn add -D @nx/node +``` + +{% /tab %} +{%tab label="pnpm"%} + +```shell +pnpm add -D @nx/node ``` {% /tab %} diff --git a/docs/shared/recipes/add-stack/add-lit.md b/docs/shared/recipes/add-stack/add-lit.md index 70402b645c..9b2d9ca8f4 100644 --- a/docs/shared/recipes/add-stack/add-lit.md +++ b/docs/shared/recipes/add-stack/add-lit.md @@ -28,14 +28,21 @@ Install all the dependencies we need: {%tab label="npm"%} ```shell -npm i --save-dev @nx/node lit http-server +npm add -D @nx/node lit http-server ``` {% /tab %} {%tab label="yarn"%} ```shell -yarn add --dev @nx/node lit http-server +yarn add -D @nx/node lit http-server +``` + +{% /tab %} +{%tab label="pnpm"%} + +```shell +pnpm add -D @nx/node lit http-server ``` {% /tab %} diff --git a/docs/shared/recipes/add-stack/add-qwik.md b/docs/shared/recipes/add-stack/add-qwik.md index 32c41ed2fc..05f8d4ccc3 100644 --- a/docs/shared/recipes/add-stack/add-qwik.md +++ b/docs/shared/recipes/add-stack/add-qwik.md @@ -28,21 +28,21 @@ Install the `qwik-nx` plugin: {%tab label="npm"%} ```shell -npm i --save-dev qwik-nx +npm add -D qwik-nx ``` {% /tab %} {%tab label="yarn"%} ```shell -yarn add --dev qwik-nx +yarn add -D qwik-nx ``` {% /tab %} {%tab label="pnpm"%} ```shell -pnpm i --dev qwik-nx +pnpm add -D qwik-nx ``` {% /tab %} diff --git a/docs/shared/recipes/add-stack/add-solid.md b/docs/shared/recipes/add-stack/add-solid.md index 0cb7c1bd3e..8dd12323fb 100644 --- a/docs/shared/recipes/add-stack/add-solid.md +++ b/docs/shared/recipes/add-stack/add-solid.md @@ -28,8 +28,8 @@ updating any framework dependencies as needed. {% tab label="npm" %} ```shell -npm i solid-js -npm i --save-dev @nx/web solid-devtools vite-plugin-solid +npm add solid-js +npm add -D @nx/web solid-devtools vite-plugin-solid ``` {% /tab %} @@ -37,15 +37,15 @@ npm i --save-dev @nx/web solid-devtools vite-plugin-solid ```shell yarn add solid-js -yarn add --dev @nx/web solid-devtools vite-plugin-solid +yarn add -D @nx/web solid-devtools vite-plugin-solid ``` {% /tab %} {% tab label="pnpm" %} ```shell -pnpm i solid-js -pnpm i --save-dev @nx/web solid-devtools vite-plugin-solid +pnpm add solid-js +pnpm add -D @nx/web solid-devtools vite-plugin-solid ``` {% /tab %} diff --git a/docs/shared/recipes/add-stack/add-svelte.md b/docs/shared/recipes/add-stack/add-svelte.md index d1cb89d165..07df761c67 100644 --- a/docs/shared/recipes/add-stack/add-svelte.md +++ b/docs/shared/recipes/add-stack/add-svelte.md @@ -58,21 +58,21 @@ Make sure to install the `@nx/vite` and `@nx/js` versions that matches the versi {%tab label="npm"%} ```shell -npm install --save-dev @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte +npm add -D @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte ``` {% /tab %} {%tab label="yarn"%} ```shell -yarn add --dev @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte +yarn add -D @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte ``` {% /tab %} {%tab label="pnpm"%} ```shell -pnpm add --save-dev @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte +pnpm add -D @nx/vite @nx/js vitest vite svelte svelte-check @sveltejs/vite-plugin-svelte ``` {% /tab %} diff --git a/docs/shared/recipes/deployment/deno-deploy.md b/docs/shared/recipes/deployment/deno-deploy.md index 91ed201f43..e21cac019b 100644 --- a/docs/shared/recipes/deployment/deno-deploy.md +++ b/docs/shared/recipes/deployment/deno-deploy.md @@ -22,7 +22,7 @@ You can also add a new Deno application to an existing Nx monorepo workspace. Ma {% tab label="npm" %} ```shell -npm i -D @nx/deno +npm add -D @nx/deno ``` {% /tab %} diff --git a/docs/shared/recipes/deployment/deno-netlify-edge-functions.md b/docs/shared/recipes/deployment/deno-netlify-edge-functions.md index 1194f1a5b7..4a25740da9 100644 --- a/docs/shared/recipes/deployment/deno-netlify-edge-functions.md +++ b/docs/shared/recipes/deployment/deno-netlify-edge-functions.md @@ -20,7 +20,7 @@ You can also add a new Deno application to an existing Nx monorepo workspace. Ma {% tab label="npm" %} ```shell -npm i -D @nx/deno +npm add -D @nx/deno ``` {% /tab %} diff --git a/docs/shared/recipes/deployment/node-aws-lambda.md b/docs/shared/recipes/deployment/node-aws-lambda.md index bef917b39b..7b29fb60c6 100644 --- a/docs/shared/recipes/deployment/node-aws-lambda.md +++ b/docs/shared/recipes/deployment/node-aws-lambda.md @@ -25,7 +25,7 @@ First, make sure you have `@nx/aws-lambda` installed. {% tab label="npm" %} ```shell -npm i -D @nx/aws-lambda +npm add -D @nx/aws-lambda ``` {% /tab %} diff --git a/docs/shared/recipes/deployment/node-serverless-functions-netlify.md b/docs/shared/recipes/deployment/node-serverless-functions-netlify.md index f96312e5bc..532d382188 100644 --- a/docs/shared/recipes/deployment/node-serverless-functions-netlify.md +++ b/docs/shared/recipes/deployment/node-serverless-functions-netlify.md @@ -27,7 +27,7 @@ You will need to install `@nx/netlify` if you haven't already. {% tab label="npm" %} ```shell -npm i -D @nx/netlify +npm add -D @nx/netlify ``` {% /tab %} diff --git a/docs/shared/recipes/generators/local-generators.md b/docs/shared/recipes/generators/local-generators.md index ede617e7bc..6626fa50ab 100644 --- a/docs/shared/recipes/generators/local-generators.md +++ b/docs/shared/recipes/generators/local-generators.md @@ -14,11 +14,33 @@ caption="Demoes how to use Nx generators in a PNPM workspace to automate the cre If you don't already have a local plugin, use Nx to generate one: +{% tabs %} +{% tab label="npm" %} + ```shell -npm install @nx/plugin@latest +npm add @nx/plugin@latest nx g @nx/plugin:plugin my-plugin ``` +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add @nx/plugin@latest +nx g @nx/plugin:plugin my-plugin +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm add @nx/plugin@latest +nx g @nx/plugin:plugin my-plugin +``` + +{% /tab %} +{% /tabs %} + Note that `latest` should match the version of the `nx` plugins installed in your workspace. Use the Nx CLI to generate the initial files needed for your generator. diff --git a/docs/shared/recipes/module-federation-with-ssr.md b/docs/shared/recipes/module-federation-with-ssr.md index 20c24fc541..4665055f4f 100644 --- a/docs/shared/recipes/module-federation-with-ssr.md +++ b/docs/shared/recipes/module-federation-with-ssr.md @@ -30,7 +30,7 @@ Make sure to install the `@nx/angular` or `@nx/react` versions that matches the {% tab label="Angular" %} -```{% command="npm install --save-dev @nx/angular" path="~/myorg" %} +```{% command="npm add -D @nx/angular" path="~/myorg" %} ``` @@ -38,7 +38,7 @@ Make sure to install the `@nx/angular` or `@nx/react` versions that matches the {% tab label="React" %} -```{% command="npm install --save-dev @nx/react" path="~/myorg" %} +```{% command="npm add -D @nx/react" path="~/myorg" %} ``` diff --git a/docs/shared/recipes/storybook/angular-storybook-compodoc.md b/docs/shared/recipes/storybook/angular-storybook-compodoc.md index ad6dd184d2..32b0da5014 100644 --- a/docs/shared/recipes/storybook/angular-storybook-compodoc.md +++ b/docs/shared/recipes/storybook/angular-storybook-compodoc.md @@ -60,24 +60,24 @@ This guide assumes that you have an Angular project with Storybook configured in First we need to install the necessary packages: {% tabs %} -{% tab label="yarn" %} +{%tab label="npm"%} + +```shell +npm add -D @compodoc/compodoc +``` + +{% /tab %} +{%tab label="yarn"%} ```shell yarn add -D @compodoc/compodoc ``` {% /tab %} -{% tab label="npm" %} +{%tab label="pnpm"%} ```shell -npm install --save-dev @compodoc/compodoc -``` - -{% /tab %} -{% tab label="pnpm" %} - -```shell -pnpm install --save-dev @compodoc/compodoc +pnpm add -D @compodoc/compodoc ``` {% /tab %} diff --git a/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md b/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md index 4a67b73701..a44a240e2c 100644 --- a/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md +++ b/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md @@ -11,10 +11,30 @@ It can be difficult to set up a typescript library to compile to ESM and CommonJ If you do not use Rollup already, install the corresponding Nx plugin as follows: +{% tabs %} +{%tab label="npm"%} + ```shell -npm i @nx/rollup +npm add -D @nx/rollup ``` +{% /tab %} +{%tab label="yarn"%} + +```shell +yarn add -D @nx/rollup +``` + +{% /tab %} +{%tab label="pnpm"%} + +```shell +pnpm add -D @nx/rollup +``` + +{% /tab %} +{% /tabs %} + Make sure the version of `@nx/rollup` matches your other `@nx/*` package versions. You can then configure Rollup to compile your library by adding a `build` target to your `project.json` or `package.json` file. Here's an example: