docs(misc): fix misc issues (#22039)

Co-authored-by: Isaac Mann <isaacplmann@users.noreply.github.com>
This commit is contained in:
Leosvel Pérez Espinosa 2024-02-28 16:02:27 +01:00 committed by GitHub
parent 2fa693d297
commit 6576325f7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
33 changed files with 86 additions and 96 deletions

View File

@ -8283,7 +8283,7 @@
"name": "documents",
"children": [
{
"name": "Overview of the Nx Nuxt Plugin",
"name": "Overview",
"path": "/nx-api/nuxt/documents/overview",
"id": "overview",
"isExternal": false,
@ -9417,7 +9417,7 @@
"name": "documents",
"children": [
{
"name": "Nx Storybook Plugin Overview",
"name": "Overview",
"path": "/nx-api/storybook/documents/overview",
"id": "overview",
"isExternal": false,
@ -9433,7 +9433,7 @@
"disableCollapsible": false
},
{
"name": "Storybook 7 overview",
"name": "Storybook 7",
"path": "/nx-api/storybook/documents/storybook-7-setup",
"id": "storybook-7-setup",
"isExternal": false,
@ -9533,7 +9533,7 @@
"name": "documents",
"children": [
{
"name": "Overview of the Nx Vite Plugin",
"name": "Overview",
"path": "/nx-api/vite/documents/overview",
"id": "overview",
"isExternal": false,
@ -9633,7 +9633,7 @@
"name": "documents",
"children": [
{
"name": "Overview of the Nx Vue Plugin",
"name": "Overview",
"path": "/nx-api/vue/documents/overview",
"id": "overview",
"isExternal": false,
@ -9800,7 +9800,7 @@
"name": "documents",
"children": [
{
"name": "Overview of the Nx Webpack Plugin",
"name": "Overview",
"path": "/nx-api/webpack/documents/overview",
"id": "overview",
"isExternal": false,

View File

@ -1557,7 +1557,7 @@
"documents": {
"/nx-api/nuxt/documents/overview": {
"id": "overview",
"name": "Overview of the Nx Nuxt Plugin",
"name": "Overview",
"description": "The Nx Plugin for Nuxt contains generators for managing Nuxt applications within a Nx workspace. This page also explains how to configure Nuxt on your Nx workspace.",
"file": "generated/packages/nuxt/documents/overview",
"itemList": [],
@ -2707,7 +2707,7 @@
"documents": {
"/nx-api/storybook/documents/overview": {
"id": "overview",
"name": "Nx Storybook Plugin Overview",
"name": "Overview",
"description": "This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace.",
"file": "generated/packages/storybook/documents/overview",
"itemList": [],
@ -2729,7 +2729,7 @@
},
"/nx-api/storybook/documents/storybook-7-setup": {
"id": "storybook-7-setup",
"name": "Storybook 7 overview",
"name": "Storybook 7",
"description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.",
"file": "generated/packages/storybook/documents/storybook-7-setup",
"itemList": [],
@ -2821,7 +2821,7 @@
"documents": {
"/nx-api/vite/documents/overview": {
"id": "overview",
"name": "Overview of the Nx Vite Plugin",
"name": "Overview",
"description": "The Nx Plugin for Vite contains executors and generators that support building applications using Vite. This page also explains how to configure Vite on your Nx workspace.",
"file": "generated/packages/vite/documents/overview",
"itemList": [],
@ -2910,7 +2910,7 @@
"documents": {
"/nx-api/vue/documents/overview": {
"id": "overview",
"name": "Overview of the Nx Vue Plugin",
"name": "Overview",
"description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.",
"file": "generated/packages/vue/documents/overview",
"itemList": [],
@ -3060,7 +3060,7 @@
"documents": {
"/nx-api/webpack/documents/overview": {
"id": "overview",
"name": "Overview of the Nx Webpack Plugin",
"name": "Overview",
"description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
"file": "generated/packages/webpack/documents/overview",
"itemList": [],

View File

@ -1538,7 +1538,7 @@
"documents": [
{
"id": "overview",
"name": "Overview of the Nx Nuxt Plugin",
"name": "Overview",
"description": "The Nx Plugin for Nuxt contains generators for managing Nuxt applications within a Nx workspace. This page also explains how to configure Nuxt on your Nx workspace.",
"file": "generated/packages/nuxt/documents/overview",
"itemList": [],
@ -2680,7 +2680,7 @@
"documents": [
{
"id": "overview",
"name": "Nx Storybook Plugin Overview",
"name": "Overview",
"description": "This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace.",
"file": "generated/packages/storybook/documents/overview",
"itemList": [],
@ -2702,7 +2702,7 @@
},
{
"id": "storybook-7-setup",
"name": "Storybook 7 overview",
"name": "Storybook 7",
"description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.",
"file": "generated/packages/storybook/documents/storybook-7-setup",
"itemList": [],
@ -2792,7 +2792,7 @@
"documents": [
{
"id": "overview",
"name": "Overview of the Nx Vite Plugin",
"name": "Overview",
"description": "The Nx Plugin for Vite contains executors and generators that support building applications using Vite. This page also explains how to configure Vite on your Nx workspace.",
"file": "generated/packages/vite/documents/overview",
"itemList": [],
@ -2880,7 +2880,7 @@
"documents": [
{
"id": "overview",
"name": "Overview of the Nx Vue Plugin",
"name": "Overview",
"description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.",
"file": "generated/packages/vue/documents/overview",
"itemList": [],
@ -3028,7 +3028,7 @@
"documents": [
{
"id": "overview",
"name": "Overview of the Nx Webpack Plugin",
"name": "Overview",
"description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
"file": "generated/packages/webpack/documents/overview",
"itemList": [],

View File

@ -63,7 +63,7 @@ The `@nx/nuxt/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `testTargetName` and `serveTargetName` options control the names of the inferred Nuxt tasks. The default names are `build`, `test` and `serve`.
The `buildTargetName`, `testTargetName` and `serveTargetName` options control the names of the inferred Nuxt tasks. The default names are `build`, `test` and `serve`.
## Using Nuxt

View File

@ -63,7 +63,7 @@ The `@nx/playwright/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `targetName` and `ciTargetName` options control the namea of the inferred Playwright tasks. The default names are `e2e` and `e2e-ci`.
The `targetName` and `ciTargetName` options control the name of the inferred Playwright tasks. The default names are `e2e` and `e2e-ci`.
### Splitting E2E tasks by file

View File

@ -66,7 +66,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`.
The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -61,7 +61,7 @@ The `@nx/storybook/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -83,7 +83,7 @@ The `@nx/vite/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -77,7 +77,7 @@ The `@nx/webpack/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -8,9 +8,9 @@ and the version of NodeJS that we tested it against.
| Nx Version | Node Version | Typescript Version |
| --------------- | ---------------- | ------------------ |
| 13.x | 10.x, 12.x, 14.x | ~4.6.2 |
| 14.x | 12.x, 14.x, 16.x | ~4.7.2 |
| 15.x | 14.x, 16.x, 18.x | ~5.0.0 |
| 16.x | 16.x, 18.x, 20.x | ~5.1.0 |
| 17.x (previous) | 18.x, 20.x | ~5.1.0 |
| 18.x (latest) | 18.x, 20.x | ~5.1.0 |
| 17.x (previous) | 18.x, 20.x | ~5.1.0 |
| 16.x | 16.x, 18.x, 20.x | ~5.1.0 |
| 15.x | 14.x, 16.x, 18.x | ~5.0.0 |
| 14.x | 12.x, 14.x, 16.x | ~4.7.2 |
| 13.x | 10.x, 12.x, 14.x | ~4.6.2 |

View File

@ -2196,7 +2196,7 @@
{
"id": "overview",
"path": "/nx-api/vite",
"name": "Overview of the Nx Vite Plugin",
"name": "Overview",
"description": "The Nx Plugin for Vite contains executors and generators that support building applications using Vite. This page also explains how to configure Vite on your Nx workspace.",
"file": "shared/packages/vite/vite-plugin"
}
@ -2210,7 +2210,7 @@
{
"id": "overview",
"path": "/nx-api/vue",
"name": "Overview of the Nx Vue Plugin",
"name": "Overview",
"description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.",
"file": "shared/packages/vue/vue-plugin"
}
@ -2224,7 +2224,7 @@
{
"id": "overview",
"path": "/nx-api/nuxt",
"name": "Overview of the Nx Nuxt Plugin",
"name": "Overview",
"description": "The Nx Plugin for Nuxt contains generators for managing Nuxt applications within a Nx workspace. This page also explains how to configure Nuxt on your Nx workspace.",
"file": "shared/packages/nuxt/nuxt-plugin"
}
@ -2238,7 +2238,7 @@
{
"id": "overview",
"path": "/nx-api/webpack",
"name": "Overview of the Nx Webpack Plugin",
"name": "Overview",
"description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
"file": "shared/packages/webpack/plugin-overview"
}
@ -2322,7 +2322,7 @@
"itemList": [
{
"id": "overview",
"name": "Nx Storybook Plugin Overview",
"name": "Overview",
"description": "This is an overview page for the Storybook plugin in Nx. It explains what Storybook is and how to set it up in your Nx workspace.",
"path": "/nx-api/storybook",
"file": "shared/packages/storybook/plugin-overview"
@ -2335,7 +2335,7 @@
},
{
"id": "storybook-7-setup",
"name": "Storybook 7 overview",
"name": "Storybook 7",
"description": "This guide explains how you can set up Storybook version 7 in your Nx workspace. It contains information about the generators and the frameworks that are supported.",
"file": "shared/packages/storybook/storybook-7-setup"
}

View File

@ -6,7 +6,7 @@ You could manually address these problems by splitting your e2e tests into small
## Set up
To enable automatically split e2e tasks, you need to turn on [inferred tasks](/concepts/inferred-tasks) for the [@nx/cypress](/nx-api/cypress) or [@nx/playwright](/nx-api/playwright) plugins. Run this command to set up inferred tasks:
To enable automatically split e2e tasks, you need to turn on [inferred tasks](/concepts/inferred-tasks#existing-nx-workspaces) for the [@nx/cypress](/nx-api/cypress) or [@nx/playwright](/nx-api/playwright) plugins. Run this command to set up inferred tasks:
{% tabs %}
{% tab label="Cypress" %}

View File

@ -36,6 +36,9 @@ title="Tutorial: Standalone Angular Application"
Create a new Angular application with the following command:
```{% command="npx create-nx-workspace@latest myngapp --preset=angular-standalone" path="~" %}
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Which bundler would you like to use? · esbuild
✔ Default stylesheet format · css
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? · No

View File

@ -52,6 +52,7 @@ title="Tutorial: Standalone Angular Application"
Create a new Angular monorepo with the following command:
```{% command="npx create-nx-workspace@latest angular-monorepo --preset=angular-monorepo" path="~" %}
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Application name · angular-store

View File

@ -28,17 +28,17 @@ npx create-nx-workspace --pm pnpm
This will guide you through the setup, asking whether you want a monorepo or a standalone app and whether you want to start with a blank or a preconfigured setup.
```{% command="npx create-nx-workspace" path="~" %}
```{% command="npx create-nx-workspace@latest" path="~" %}
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Where would you like to create your workspace? · myorg
? Which stack do you want to use? …
None: Configures a minimal structure without specific frameworks or technologies.
TS/JS: Configures a TypeScript/JavaScript package without specific frameworks or platforms.
React: Configures a React app with your framework of choice.
Angular: Configures a Angular app with modern tooling.
Node: Configures a Node API with your framework of choice.
None: Configures a TypeScript/JavaScript project with minimal structure.
React: Configures a React application with your framework of choice.
Vue: Configures a Vue application with your framework of choice.
Angular: Configures a Angular application with modern tooling.
Node: Configures a Node API application with your framework of choice.
```
Once you've created your workspace, you can

View File

@ -50,9 +50,9 @@ Here's a quick side-by-side overview comparing the features between the Angular
{% callout type="info" title="Notes" %}
\* You can setup a monorepo with the Angular CLI creating buildable Angular ng-packagr projects, but the DX is not as optimized compared to what you'd get with Nx.`
\* You can setup a monorepo with the Angular CLI creating buildable Angular ng-packagr projects, but the DX is not as optimized compared to what you'd get with Nx.
\*\* The Angular CLI has a [caching mechanism](https://angular.io/cli/cache) which persists the Webpack/ESBuild/"TS incremental build info" cache to disk. Nx leverages that cache as well but in addition adds a more powerful process-level caching on top that is framework agnostic.`
\*\* The Angular CLI has a [caching mechanism](https://angular.io/cli/cache) which persists the Webpack/ESBuild/"TS incremental build info" cache to disk. Nx leverages that cache as well but in addition adds a more powerful process-level caching on top that is framework agnostic.
{% /callout %}
@ -140,7 +140,7 @@ Nx comes with slightly different terminology than the Angular CLI for some featu
npx nx g @nx/angular:component my-component
```
You can also run Angular Schematics through the Nx ClI. So something like this works as well:
You can also run Angular Schematics through the Nx CLI. So something like this works as well:
```shell
npx nx g @schematics/angular:component my-component

View File

@ -86,10 +86,10 @@ The Nx CLI can invoke Nx Generator or Angular Schematics directly. When the user
```shell
nx g mygenerator params
nx g mygenerator params # will work exactly the same as the line above
nx g myschematic params
```
The Nx CLI will see what type of generator `mygenerator` is and will invoke it using the right machinery. The user doesn't have to know how the generator is implemented.
The Nx CLI will identify whether it is running an Nx generator or an Angular schematic and will invoke it using the right machinery. The user doesn't have to know how the generator is implemented.
At times, however, it might be useful to use an Nx Devkit generator in an Angular Schematic or vice versa.

View File

@ -4,25 +4,11 @@ In this recipe, we'll show you how to create a [Remix](https://remix.run) applic
## Create Nx Workspace
```{% command="npx create-nx-workspace acme --preset=apps" path="~/" %}
```{% command="npx create-nx-workspace@latest acme --preset=apps" path="~/" %}
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Do you want Nx Cloud to make your CI fast? · Yes
NX Creating your v16.3.2 workspace.
To make sure the command works reliably in all environments, and that the preset is applied correctly,
Nx will run "npm install" several times. Please wait.
✔ Installing dependencies with npm
✔ Successfully created the workspace: acme.
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
NX First time using Nx? Check out this interactive Nx tutorial.
https://nx.dev/tutorials/package-based-repo-tutorial
```
## Install Nx Remix Plugin

View File

@ -170,9 +170,9 @@ Its also worth noting that the backend of Nx Cloud is written in Kotlin. This
Nx was released in 2016. Turborepo was open sourced in December of 2021. Turborepo doesn't have a large community yet, but it probably will at some point.
- There are about [3 million downloads per week](https://www.npmjs.com/package/@nx/tao).
- There are about [4 million downloads per week](https://www.npmjs.com/package/nx).
- There are about 1 million+ unique [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) (a plugin for VSCode) installations.
- There is a rich ecosystem of [third-party plugins.](https://nx.dev/community)
- There is a rich ecosystem of [third-party plugins](https://nx.dev/plugin-registry).
From day 1 Nx has always been an **MIT-licensed open source project**, and we did everything to make sure companies using Nx wont end up in the vendor lock-in. We clearly separated Nx the open source project and Nx Cloud the SAAS product. For instance, Nx Cloud is built using the public APIs Nx provides (you can build your own and some companies do). Nx Cloud docs are on a separate domain etc.

View File

@ -1,12 +1,12 @@
# Using environment variables in Angular applications
Angular builders (e.g. `@nx/angular:webpack-browser` and `@angular-devkit/build-angular:browser`) don't have built-in support for using environment variables when building applications.
Angular executors (e.g. `@nx/angular:webpack-browser` and `@angular-devkit/build-angular:browser`) don't have built-in support for using environment variables when building applications.
To add support for environment variables we need to use the webpack `DefinePlugin` in our own custom webpack configuration. We'll see how to do so in the following sections.
## A note on `NODE_ENV`
The webpack-based Angular builders (e.g. `@nx/angular:webpack-browser` and `@angular-devkit/build-angular:browser`) set the webpack's `mode` configuration option based on the values for the following in the builder options:
The webpack-based Angular executors (e.g. `@nx/angular:webpack-browser` and `@angular-devkit/build-angular:browser`) set the webpack's `mode` configuration option based on the values for the following in the builder options:
- `optimization`
- `optimization.scripts`
@ -21,7 +21,7 @@ To change the `NODE_ENV` variable we can do one of the following:
- Turn on the builder optimizations to set it to `production`
- Turn off the builder optimizations to set it to `development`
- Use a custom webpack configuration to override the webpack `mode` set by Angular builders
- Use a custom webpack configuration to override the webpack `mode` set by Angular executors
The first two options is a matter of changing your build target configuration or passing the specific flag in the command line. We'll see how to do the last in the following section.

View File

@ -63,7 +63,7 @@ The `@nx/nuxt/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `testTargetName` and `serveTargetName` options control the names of the inferred Nuxt tasks. The default names are `build`, `test` and `serve`.
The `buildTargetName`, `testTargetName` and `serveTargetName` options control the names of the inferred Nuxt tasks. The default names are `build`, `test` and `serve`.
## Using Nuxt

View File

@ -63,7 +63,7 @@ The `@nx/playwright/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `targetName` and `ciTargetName` options control the namea of the inferred Playwright tasks. The default names are `e2e` and `e2e-ci`.
The `targetName` and `ciTargetName` options control the name of the inferred Playwright tasks. The default names are `e2e` and `e2e-ci`.
### Splitting E2E tasks by file

View File

@ -66,7 +66,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`.
The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -61,7 +61,7 @@ The `@nx/storybook/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
The `builtStorybookTargetName`, `serveStorybookTargetName`, `testStorybookTargetName` and `staticStorybookTargetName` options control the names of the inferred Storybook tasks. The default names are `build-storybook`, `storybook`, `test-storybook` and `static-storybook`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -83,7 +83,7 @@ The `@nx/vite/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Vite tasks. The default names are `build`, `preview`, `test`, `serve` and `serve-static`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -77,7 +77,7 @@ The `@nx/webpack/plugin` is configured in the `plugins` array in `nx.json`.
}
```
- The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTargetName` options control the names of the inferred Webpack tasks. The default names are `build`, `preview`, `serve` and `serve-static`.
{% /tab %}
{% tab label="Nx < 18" %}

View File

@ -8,9 +8,9 @@ and the version of NodeJS that we tested it against.
| Nx Version | Node Version | Typescript Version |
| --------------- | ---------------- | ------------------ |
| 13.x | 10.x, 12.x, 14.x | ~4.6.2 |
| 14.x | 12.x, 14.x, 16.x | ~4.7.2 |
| 15.x | 14.x, 16.x, 18.x | ~5.0.0 |
| 16.x | 16.x, 18.x, 20.x | ~5.1.0 |
| 17.x (previous) | 18.x, 20.x | ~5.1.0 |
| 18.x (latest) | 18.x, 20.x | ~5.1.0 |
| 17.x (previous) | 18.x, 20.x | ~5.1.0 |
| 16.x | 16.x, 18.x, 20.x | ~5.1.0 |
| 15.x | 14.x, 16.x, 18.x | ~5.0.0 |
| 14.x | 12.x, 14.x, 16.x | ~4.7.2 |
| 13.x | 10.x, 12.x, 14.x | ~4.6.2 |

View File

@ -34,6 +34,9 @@ Here's the source code of the final result for this tutorial.
Create a new standalone React application with the following command:
```{% command="npx create-nx-workspace@latest myreactapp --preset=react-standalone" path="~" %}
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Which bundler would you like to use? · vite
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · css
@ -144,7 +147,7 @@ nx show project myreactapp --web
"externalDependencies": ["vite"]
}
],
"outputs": ["{projectRoot}/build/myreactapp"],
"outputs": ["{projectRoot}/dist/myreactapp"],
"executor": "nx:run-commands",
"configurations": {}
}
@ -852,8 +855,8 @@ Here's some more things you can dive into next:
- Learn how to [migrate your CRA app to Nx](/recipes/react/migration-cra)
- [Learn how to setup Tailwind](/recipes/react/using-tailwind-css-in-react)
- [Setup Storybook for our shared UI library](/recipes/storybook/overview-react)
- [Speed up CI: Run only tasks for project that got changed](/features/run-tasks#run-tasks-affected-by-a-pr)]
- [Speed up CI: Share your cache](/ci/features/remote-cache)]
- [Speed up CI: Run only tasks for project that got changed](/features/run-tasks#run-tasks-affected-by-a-pr)
- [Speed up CI: Share your cache](/ci/features/remote-cache)
- [Speed up CI: Distribute your tasks across machines](/ci/features/distribute-task-execution)
Also, make sure you

View File

@ -54,6 +54,7 @@ title="Tutorial: Standalone React Application"
Create a new React monorepo with the following command:
```{% command="npx create-nx-workspace@latest react-monorepo --preset=react-monorepo" path="~" %}
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Application name · react-store

View File

@ -161,4 +161,4 @@ Just run the application as usual.
nx serve host
```
To start the application, use the following address: [http://localhost:4200](http://localhost:4200). Once opened, you'll see the message **"Hello from Nx."** This message is loaded from the greeting remote, which runs on port 4201.
To start the application, use the following address: [http://localhost:4200](http://localhost:4200). Once opened, you'll see the message **"Hello from Nx"**. This message is loaded from the greeting remote, which runs on port 4201.

View File

@ -54,9 +54,9 @@ Now its important to change the Storybook ports in the `storybook-host-angula
### Add the `refs` to the main.ts of the host library
Create the composition in ``:
Update the `libs/storybook-host/.storybook/main.ts` file as shown below:
```javascript {% fileName="libs/storybook-host/.storybook/main.ts" %}
```javascript {% fileName="libs/storybook-host/.storybook/main.ts" highlightLines=["12-21"] %}
import type { StorybookConfig } from '@storybook/react-vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';

View File

@ -512,7 +512,7 @@
- [setup-docker](/nx-api/node/generators/setup-docker)
- [nuxt](/nx-api/nuxt)
- [documents](/nx-api/nuxt/documents)
- [Overview of the Nx Nuxt Plugin](/nx-api/nuxt/documents/overview)
- [Overview](/nx-api/nuxt/documents/overview)
- [generators](/nx-api/nuxt/generators)
- [init](/nx-api/nuxt/generators/init)
- [application](/nx-api/nuxt/generators/application)
@ -650,9 +650,9 @@
- [configuration](/nx-api/rollup/generators/configuration)
- [storybook](/nx-api/storybook)
- [documents](/nx-api/storybook/documents)
- [Nx Storybook Plugin Overview](/nx-api/storybook/documents/overview)
- [Overview](/nx-api/storybook/documents/overview)
- [Storybook best practices for making the most out of Nx](/nx-api/storybook/documents/best-practices)
- [Storybook 7 overview](/nx-api/storybook/documents/storybook-7-setup)
- [Storybook 7](/nx-api/storybook/documents/storybook-7-setup)
- [executors](/nx-api/storybook/executors)
- [storybook](/nx-api/storybook/executors/storybook)
- [build](/nx-api/storybook/executors/build)
@ -664,7 +664,7 @@
- [tao](/nx-api/tao)
- [vite](/nx-api/vite)
- [documents](/nx-api/vite/documents)
- [Overview of the Nx Vite Plugin](/nx-api/vite/documents/overview)
- [Overview](/nx-api/vite/documents/overview)
- [executors](/nx-api/vite/executors)
- [dev-server](/nx-api/vite/executors/dev-server)
- [build](/nx-api/vite/executors/build)
@ -676,7 +676,7 @@
- [vitest](/nx-api/vite/generators/vitest)
- [vue](/nx-api/vue)
- [documents](/nx-api/vue/documents)
- [Overview of the Nx Vue Plugin](/nx-api/vue/documents/overview)
- [Overview](/nx-api/vue/documents/overview)
- [generators](/nx-api/vue/generators)
- [init](/nx-api/vue/generators/init)
- [application](/nx-api/vue/generators/application)
@ -696,7 +696,7 @@
- [static-config](/nx-api/web/generators/static-config)
- [webpack](/nx-api/webpack)
- [documents](/nx-api/webpack/documents)
- [Overview of the Nx Webpack Plugin](/nx-api/webpack/documents/overview)
- [Overview](/nx-api/webpack/documents/overview)
- [executors](/nx-api/webpack/executors)
- [webpack](/nx-api/webpack/executors/webpack)
- [dev-server](/nx-api/webpack/executors/dev-server)

View File

@ -26,16 +26,12 @@ Here's the source code of the final result for this tutorial.
Create a new Vue application with the following command:
```{% command="npx create-nx-workspace@latest myvueapp --preset=vue-standalone" path="~" %}
NX Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · css
✔ Set up CI with caching, distribution and test deflaking · github
NX Creating your v17.0.0 workspace.
To make sure the command works reliably in all environments, and that the preset is applied correctly,
Nx will run "npm install" several times. Please wait.
```
You can also choose [Playwright](/nx-api/playwright) for your e2e tests or a different stylesheet format. In this tutorial we're going to use Cypress and css. The above command generates the following structure: