docs(misc): fix misc issues (#22039)
Co-authored-by: Isaac Mann <isaacplmann@users.noreply.github.com>
This commit is contained in:
parent
2fa693d297
commit
6576325f7b
@ -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,
|
||||
|
||||
@ -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": [],
|
||||
|
||||
@ -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": [],
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -170,9 +170,9 @@ It’s 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 won’t 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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -54,9 +54,9 @@ Now it’s 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';
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user