miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(core): packages to api (#19281)

Browse Source
This commit is contained in:
Isaac Mann 2023-09-22 14:24:35 -04:00 committed by GitHub
parent 94d8356e51
commit d1fe398ea0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
151 changed files with 1702 additions and 1746 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/PULL_REQUEST_TEMPLATE/COMMUNITY_PLUGIN.MD vendored
View File

@ -42,7 +42,7 @@ Example:
}]
```
Once merged, your plugin will be available when running the `nx list` command, and will also be available in the Plugin Registry on [nx.dev](https://nx.dev/extending-nx/registry)
Once merged, your plugin will be available when running the `nx list` command, and will also be available in the Plugin Registry on [nx.dev](https://nx.dev/plugin-registry)
-->
# Community Plugin Submission

20
docs/generated/manifests/extending-nx.json
View File

@ -14,16 +14,6 @@
"isExternal": false,
"path": "/extending-nx/intro/getting-started",
"tags": []
},
{
"id": "registry",
"name": "Plugin Registry",
"description": "Browse official and community plugins",
"file": "",
"itemList": [],
"isExternal": false,
"path": "/extending-nx/registry",
"tags": []
}
],
"isExternal": false,
@ -40,16 +30,6 @@
"path": "/extending-nx/intro/getting-started",
"tags": []
},
"/extending-nx/registry": {
"id": "registry",
"name": "Plugin Registry",
"description": "Browse official and community plugins",
"file": "",
"itemList": [],
"isExternal": false,
"path": "/extending-nx/registry",
"tags": []
},
"/extending-nx/tutorials": {
"id": "tutorials",
"name": "5 Min Tutorials",

738
docs/generated/manifests/menus.json
View File

File diff suppressed because it is too large Load Diff

1112
docs/generated/manifests/packages.json → docs/generated/manifests/nx-api.json
View File

File diff suppressed because it is too large Load Diff

6
docs/generated/manifests/nx.json
View File

@ -6254,7 +6254,7 @@
"file": "",
"itemList": [],
"isExternal": true,
"path": "/packages/nx/documents/affected#skip-nx-cache",
"path": "/nx-api/nx/documents/affected#skip-nx-cache",
"tags": ["cache-task-results"]
},
{
@ -6332,14 +6332,14 @@
"path": "/nx-cloud/intro/what-is-nx-cloud",
"tags": ["cache-task-results", "distribute-task-execution"]
},
"/packages/nx/documents/affected#skip-nx-cache": {
"/nx-api/nx/documents/affected#skip-nx-cache": {
"id": "skip-nx-cache-flag",
"name": "--skip-nx-cache flag",
"description": "",
"file": "",
"itemList": [],
"isExternal": true,
"path": "/packages/nx/documents/affected#skip-nx-cache",
"path": "/nx-api/nx/documents/affected#skip-nx-cache",
"tags": ["cache-task-results"]
},
"/reference/nx-json#tasks-runner-options": {

34
docs/generated/manifests/tags.json
View File

@ -33,21 +33,21 @@
"file": "generated/packages/generated/packages/nx/documents/run",
"id": "run",
"name": "run",
"path": "/packages/nx/documents/run"
"path": "/nx-api/nx/documents/run"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/run-many",
"id": "run-many",
"name": "run-many",
"path": "/packages/nx/documents/run-many"
"path": "/nx-api/nx/documents/run-many"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/affected",
"id": "affected",
"name": "affected",
"path": "/packages/nx/documents/affected"
"path": "/nx-api/nx/documents/affected"
}
],
"cache-task-results": [
@ -98,7 +98,7 @@
"file": "",
"id": "skip-nx-cache-flag",
"name": "--skip-nx-cache flag",
"path": "/packages/nx/documents/affected#skip-nx-cache"
"path": "/nx-api/nx/documents/affected#skip-nx-cache"
},
{
"description": "",
@ -126,14 +126,14 @@
"file": "generated/packages/generated/packages/nx/documents/connect-to-nx-cloud",
"id": "connect-to-nx-cloud",
"name": "connect-to-nx-cloud",
"path": "/packages/nx/documents/connect-to-nx-cloud"
"path": "/nx-api/nx/documents/connect-to-nx-cloud"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/reset",
"id": "reset",
"name": "reset",
"path": "/packages/nx/documents/reset"
"path": "/nx-api/nx/documents/reset"
}
],
"remote-cache": [
@ -186,7 +186,7 @@
"file": "generated/packages/generated/packages/nx/documents/connect-to-nx-cloud",
"id": "connect-to-nx-cloud",
"name": "connect-to-nx-cloud",
"path": "/packages/nx/documents/connect-to-nx-cloud"
"path": "/nx-api/nx/documents/connect-to-nx-cloud"
}
],
"explore-graph": [
@ -230,7 +230,7 @@
"file": "generated/packages/generated/packages/nx/documents/dep-graph",
"id": "dep-graph",
"name": "graph",
"path": "/packages/nx/documents/dep-graph"
"path": "/nx-api/nx/documents/dep-graph"
}
],
"automate-updating-dependencies": [
@ -260,7 +260,7 @@
"file": "generated/packages/generated/packages/nx/documents/migrate",
"id": "migrate",
"name": "migrate",
"path": "/packages/nx/documents/migrate"
"path": "/nx-api/nx/documents/migrate"
}
],
"enforce-module-boundaries": [
@ -353,21 +353,21 @@
"file": "generated/packages/generated/packages/nx/documents/format-check",
"id": "format-check",
"name": "format:check",
"path": "/packages/nx/documents/format-check"
"path": "/nx-api/nx/documents/format-check"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/format-write",
"id": "format-write",
"name": "format:write",
"path": "/packages/nx/documents/format-write"
"path": "/nx-api/nx/documents/format-write"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/workspace-lint",
"id": "workspace-lint",
"name": "workspace-lint",
"path": "/packages/nx/documents/workspace-lint"
"path": "/nx-api/nx/documents/workspace-lint"
}
],
"integrate-with-editors": [
@ -511,21 +511,21 @@
"file": "generated/packages/generated/packages/nx/documents/run",
"id": "run",
"name": "run",
"path": "/packages/nx/documents/run"
"path": "/nx-api/nx/documents/run"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/run-many",
"id": "run-many",
"name": "run-many",
"path": "/packages/nx/documents/run-many"
"path": "/nx-api/nx/documents/run-many"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/affected",
"id": "affected",
"name": "affected",
"path": "/packages/nx/documents/affected"
"path": "/nx-api/nx/documents/affected"
}
],
"use-code-generators": [
@ -590,7 +590,7 @@
"file": "generated/packages/generated/packages/nx/documents/generate",
"id": "generate",
"name": "generate",
"path": "/packages/nx/documents/generate"
"path": "/nx-api/nx/documents/generate"
}
],
"intro": [
@ -1017,7 +1017,7 @@
"file": "generated/packages/generated/packages/nx/documents/watch",
"id": "watch",
"name": "watch",
"path": "/packages/nx/documents/watch"
"path": "/nx-api/nx/documents/watch"
}
],
"yarn": [

4
docs/generated/packages/cypress/documents/overview.md
View File

@ -110,11 +110,11 @@ For adding more dynamic configurations to your cypress configuration, you can lo
If you're needing to pass a variable to cypress that you wish to not commit to your repository, i.e. API keys, or dynamic values based on configurations, i.e. API Urls. This is where [Cypress environment variables](https://docs.cypress.io/guides/guides/environment-variables) can be used.
There are a handful of ways to pass environment variables to Cypress, but the most common is going to be via the [`cypress.env.json` file](https://docs.cypress.io/guides/guides/environment-variables#Option-1-configuration-file), the [env executor option for cypress](https://nx.dev/packages/cypress/executors/cypress#env) or the commandline.
There are a handful of ways to pass environment variables to Cypress, but the most common is going to be via the [`cypress.env.json` file](https://docs.cypress.io/guides/guides/environment-variables#Option-1-configuration-file), the [env executor option for cypress](/nx-api/cypress/executors/cypress#env) or the commandline.
Create a `cypress.env.json` file in the projects root i.e. `apps/my-cool-app-e2e/cypress.env.json`. Cypress will automatically pick up this file. This method is helpful for configurations that you want to not commit. Just don't forget to add the file to the `.gitignore` and add documentation so people in your repo know what values to popluate in their local copy of the `cypress.env.json` file.
Using [@nx/cypress:cypress](/packages/cypress/executors/cypress) env executor option is a good way to add values you want to define that you don't mine commit to the repository, such as a base API url. You can leverage [target configurations](/reference/project-configuration#targets) to define different values as well.
Using [@nx/cypress:cypress](/nx-api/cypress/executors/cypress) env executor option is a good way to add values you want to define that you don't mine commit to the repository, such as a base API url. You can leverage [target configurations](/reference/project-configuration#targets) to define different values as well.
Optionally, you can pass environment variables via the commandline with the `--env` flag.

4
docs/generated/packages/esbuild/documents/overview.md
View File

@ -5,7 +5,7 @@ Why should you use this plugin?
- _Fast_ builds using esbuild.
- Type-checking using TypeScript, which esbuild does not handle.
- Intelligent `package.json` output.
- Additional [assets](/packages/esbuild/executors/esbuild#assets) for the output.
- Additional [assets](/nx-api/esbuild/executors/esbuild#assets) for the output.
## Setting up esbuild
@ -141,4 +141,4 @@ Extra API options for esbuild can be passed in the `esbuildOptions` object for y
## More Documentation
- [Using JS](/packages/js)
- [Using JS](/nx-api/js)

4
docs/generated/packages/eslint-plugin/documents/overview.md
View File

@ -61,8 +61,8 @@ You can also use `@nx/react` which includes all three `@nx/react-*` plugins
### Enforce Module Boundaries rule
The `enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. Enforcing strict boundaries helps prevent unplanned cross-dependencies. Read more about it on a [dedicated page](/packages/eslint-plugin/documents/enforce-module-boundaries).
The `enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. Enforcing strict boundaries helps prevent unplanned cross-dependencies. Read more about it on a [dedicated page](/nx-api/eslint-plugin/documents/enforce-module-boundaries).
### Dependency Checks rule
The `@nx/dependency-checks` ESLint rule enables you to discover mismatches between dependencies specified in a project's `package.json` and the dependencies that your project actually depends on. Read more about it on a [dedicated page](/packages/eslint-plugin/documents/dependency-checks).
The `@nx/dependency-checks` ESLint rule enables you to discover mismatches between dependencies specified in a project's `package.json` and the dependencies that your project actually depends on. Read more about it on a [dedicated page](/nx-api/eslint-plugin/documents/dependency-checks).

4
docs/generated/packages/expo/documents/overview.md
View File

@ -300,5 +300,5 @@ Below table is a map between expo commands and Nx commands:
## More Documentation
- [Using Detox](/packages/detox)
- [Using Jest](/packages/jest)
- [Using Detox](/nx-api/detox)
- [Using Jest](/nx-api/jest)

4
docs/generated/packages/jest/documents/overview.md
View File

@ -117,7 +117,7 @@ export default {
### Nx
Nx Jest Plugin options can be configured via the [project config file](/reference/project-configuration) or via the [command line flags](/packages/jest).
Nx Jest Plugin options can be configured via the [project config file](/reference/project-configuration) or via the [command line flags](/nx-api/jest).
> Hint: Use `--help` to see all available options
>
@ -203,4 +203,4 @@ export default async function () {
## More Documentation
- [Jest Docs](https://jestjs.io/)
- [@nx/jest options](/packages/jest)
- [@nx/jest options](/nx-api/jest)

6
docs/generated/packages/linter/documents/overview.md
View File

@ -32,9 +32,9 @@ nx lint my-lib
## Utils
- [convert-to-flat-config](/packages/linter/generators/convert-to-flat-config) - Converts the workspace's [ESLint](https://eslint.org/) configs to the new [Flat Config](https://eslint.org/blog/2022/08/new-config-system-part-2)
- **Deprecated** [convert-tslint-to-eslint](/packages/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/)
- [convert-to-flat-config](/nx-api/linter/generators/convert-to-flat-config) - Converts the workspace's [ESLint](https://eslint.org/) configs to the new [Flat Config](https://eslint.org/blog/2022/08/new-config-system-part-2)
- **Deprecated** [convert-tslint-to-eslint](/nx-api/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/)
## ESLint plugin
Read about our dedicated ESLint plugin - [eslint-plugin-nx](/packages/eslint-plugin/documents/overview).
Read about our dedicated ESLint plugin - [eslint-plugin-nx](/nx-api/eslint-plugin/documents/overview).

2
docs/generated/packages/nest/documents/overview.md
View File

@ -149,4 +149,4 @@ nx test my-nest-lib
## More Documentation
- [Using Jest](/packages/jest)
- [Using Jest](/nx-api/jest)

4
docs/generated/packages/node/documents/overview.md
View File

@ -86,5 +86,5 @@ For additional information on how to debug Node applications, see the [Node.js d
## More Documentation
- [Using Cypress](/packages/cypress)
- [Using Jest](/packages/jest)
- [Using Cypress](/nx-api/cypress)
- [Using Jest](/nx-api/jest)

6
docs/generated/packages/react-native/documents/overview.md
View File

@ -83,7 +83,7 @@ The Nx CLI provides the [`migrate` command](/core-features/automate-updating-dep
#### Use upgrade-native Generator
To upgrade native iOS and Android code to latest, you can use the [upgrade-native](/packages/react-native/generators/upgrade-native) generator:
To upgrade native iOS and Android code to latest, you can use the [upgrade-native](/nx-api/react-native/generators/upgrade-native) generator:
```shell
nx generate @nx/react-native:upgrade-native <your-app-name>
@ -147,5 +147,5 @@ The build artifacts will be located under `<your app folder>/android/app/build`.
## More Documentation
- [Using Detox](/packages/detox)
- [Using Jest](/packages/jest)
- [Using Detox](/nx-api/detox)
- [Using Jest](/nx-api/jest)

4
docs/generated/packages/react/documents/overview.md
View File

@ -124,6 +124,6 @@ The library in `dist` is publishable to npm or a private registry.
## More Documentation
- [Using Cypress](/packages/cypress)
- [Using Jest](/packages/jest)
- [Using Cypress](/nx-api/cypress)
- [Using Jest](/nx-api/jest)
- [Using Storybook](/recipes/storybook/overview-react)

18
docs/generated/packages/storybook/documents/best-practices.md
View File

@ -7,7 +7,7 @@ description: The purpose of this guide is to help you set up Storybook in your N
## Purpose of this guide
The purpose of this guide is to help you [set up Storybook in your Nx workspace](/packages/storybook) so that you can get the most out of Nx and its powerful capabilities.
The purpose of this guide is to help you [set up Storybook in your Nx workspace](/nx-api/storybook) so that you can get the most out of Nx and its powerful capabilities.
## When to use Storybook
@ -31,7 +31,7 @@ First, let’s see what Nx offers, when you are in the process of developing a p
#### Configuration generation
You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/packages/storybook/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` package overview page](/packages/storybook#generating-storybook-configuration). With Nx, you configure Storybook for each individual project.
You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/nx-api/storybook/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` package overview page](/nx-api/storybook#generating-storybook-configuration). With Nx, you configure Storybook for each individual project.
#### Stories generation
@ -43,13 +43,13 @@ If your project is not configured yet, check out one of these guides:
- [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular)
If your project is [already configured](/packages/storybook), you can use the `stories` generator:
If your project is [already configured](/nx-api/storybook), you can use the `stories` generator:
- [React stories generator](/packages/react/generators/stories)
- [React stories generator](/nx-api/react/generators/stories)
- [React Native stories generator](/packages/react-native/generators/stories)
- [React Native stories generator](/nx-api/react-native/generators/stories)
- [Angular stories generator](/packages/angular/generators/stories)
- [Angular stories generator](/nx-api/angular/generators/stories)
The stories generator will read your inputs (if you’re using Angular), or your props (if you're using React), and will generate stories with the corresponding arguments/controls already prefilled.
@ -77,11 +77,11 @@ When you are running the Cypress tests for a project, Cypress will start the Sto
#### Serve
When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/packages/storybook#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/packages/storybook/executors/storybook) and [build](/packages/storybook/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack).
When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/nx-api/storybook#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/nx-api/storybook/executors/storybook) and [build](/nx-api/storybook/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack).
#### Build and deploy
The build and deploy step usually comes in handy when you are ready to use Storybook for documentation, and you want to publish it. The [building](/packages/storybook/executors/build) step of Storybook is integrated in the Nx ecosystem, as explained above, and you can trigger your Storybook builds as you would trigger any other build inside your workspace.
The build and deploy step usually comes in handy when you are ready to use Storybook for documentation, and you want to publish it. The [building](/nx-api/storybook/executors/build) step of Storybook is integrated in the Nx ecosystem, as explained above, and you can trigger your Storybook builds as you would trigger any other build inside your workspace.
When you publish your organization’s Storybook, as a result, ideally, you would want to have one shareable Storybook page/application living under one URL, that you can share. With Nx, you can build your Storybook and it will be ready for deployment. **However**, at this point, you have one Storybook per project in your workspace, and you could end up with far too many Storybooks that are built and ready for deployment. This is not ideal, and does not accomplish the ultimate goal of “one shareable documentation page”.
@ -150,4 +150,4 @@ If you have any questions or suggestions, please feel free to reach out to us on
### Nx & Storybook documentation
You can find all Storybook-related Nx documentation in the [packages page](/packages#storybook).
You can find all Storybook-related Nx documentation in the [packages page](/nx-api/storybook).

8
docs/generated/packages/storybook/documents/overview.md
View File

@ -53,7 +53,7 @@ You can generate Storybook configuration for an individual project with this com
nx g @nx/storybook:configuration project-name
```
If you are NOT using a framework-specific generator (for [Angular](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/react-native/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [React Native](/nx-api/react-native/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
@ -82,7 +82,7 @@ Choosing one of these frameworks will have the following effects on your workspa
4. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration):
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration):
{% tabs %}
{% tab label="Angular" %}
@ -210,8 +210,8 @@ Here's more information on common migration scenarios for Storybook with Nx. For
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)
- [Storybook 7 migration generator](/packages/storybook/generators/migrate-7)
- [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup)
- [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7)
- [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup)
## Older documentation

8
docs/generated/packages/storybook/documents/storybook-7-setup.md
View File

@ -7,17 +7,17 @@ description: This guide explains how you can set up Storybook version 7 in your
Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide).
Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7.
Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7.
So, let's see how you can use Storybook 7 on your Nx workspace.
## Migrate your existing workspace to Storybook 7
If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/packages/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7.
If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/nx-api/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7.
## Set up Storybook 7 in a _new_ Nx Workspace
Please read the [`@nx/storybook` package overview](/packages/storybook) to see how you can configure Storybook in your Nx workspace.
Please read the [`@nx/storybook` package overview](/nx-api/storybook) to see how you can configure Storybook in your Nx workspace.
## Changes from the v6.5 Storybook configuration
@ -32,7 +32,7 @@ The Storybook configuration generated by Nx for Storybook 7 is very similar to t
### Changes in the `storybook` and `build-storybook` targets
- The `uiFramework` field is not needed any more, thus it is not set. Nx was using the `uiFramework` field to load any framework specific options for the Storybook builder. This is no longer needed, since the `framework` set in `.storybook/main.js|ts` takes care of that.
- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nx/storybook:storybook`](/packages/storybook/executors/storybook) and [`@nx/storybook:build`](/packages/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.
- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nx/storybook:storybook`](/nx-api/storybook/executors/storybook) and [`@nx/storybook:build`](/nx-api/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.
## Report any issues and bugs

4
docs/generated/packages/vite/documents/overview.md
View File

@ -38,7 +38,7 @@ There is a number of ways to use Vite in your existing workspace.
### Generate a new project using Vite
You can generate a [React](/packages/react) application or library or a [Web](/packages/web) application that uses Vite.js. The [`@nx/react:app`](/packages/react/generators/application), [`@nx/react:lib`](/packages/react/generators/library) and [`@nx/web:app`](/packages/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin.
You can generate a [React](/nx-api/react) application or library or a [Web](/nx-api/web) application that uses Vite.js. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/react:lib`](/nx-api/react/generators/library) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin.
To generate a React application using Vite.js, run the following:
@ -62,7 +62,7 @@ nx g @nx/web:app my-app --bundler=vite
You can use the `@nx/vite:configuration` generator to change your React or Web project to use Vite.js. This generator will modify your project's configuration to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin..
You can read more about this generator on the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator page.
You can read more about this generator on the [`@nx/vite:configuration`](/nx-api/vite/generators/configuration) generator page.
### Initialize Vite.js

8
docs/generated/packages/web/documents/overview.md
View File

@ -35,12 +35,12 @@ The application uses no framework and generates with web components. You can add
To start the application in development mode, run `nx serve my-new-app`.
{% callout type="note" title="React" %}
If you are looking to add a React application, check out the [React plugin](/packages/react).
If you are looking to add a React application, check out the [React plugin](/nx-api/react).
{% /callout %}
### Creating Libraries
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/packages/js) plugin.
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/nx-api/js) plugin.
```shell
nx g @nx/js:lib my-new-lib
@ -98,5 +98,5 @@ The library in `dist` is publishable to npm or a private registry.
## More Documentation
- [Using Cypress](/packages/cypress)
- [Using Jest](/packages/jest)
- [Using Cypress](/nx-api/cypress)
- [Using Jest](/nx-api/jest)

2
docs/generated/packages/webpack/documents/overview.md
View File

@ -27,7 +27,7 @@ npx create-nx-workspace@latest --preset=react-monorepo --bundler=webpack
## Generate a new project using Webpack
You can generate a [React](/packages/react) application or a [Web](/packages/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/packages/react/generators/application), [`@nx/node:app`](/packages/node/generators/application) and [`@nx/web:app`](/packages/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/node:app`](/nx-api/node/generators/application) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
To generate a React application using Webpack, run the following:

10
docs/generated/packages/workspace/documents/overview.md
View File

@ -9,7 +9,7 @@ Codifying your organization's best practices into local generators is a great wa
## Reorganizing Projects
After some time of working within a workspace, projects might need to be moved or sometimes even removed.
The workspace plugin provides the [`@nx/workspace:move`](/packages/workspace/generators/move) and [`@nx/workspace:remove`](/packages/workspace/generators/remove) generators to help aid with this.
The workspace plugin provides the [`@nx/workspace:move`](/nx-api/workspace/generators/move) and [`@nx/workspace:remove`](/nx-api/workspace/generators/remove) generators to help aid with this.
### Moving Projects
@ -24,7 +24,7 @@ Moving the files manually can be done easily but a lot of steps are often missed
5. Paths in target options such as output path will be changed
6. Other configuration will be updated too, such as `extends` in `tsconfig.json`, the name of the project in `jest.config.js`, and the extends in `.eslintrc.json`
> See more about [`@nx/workspace:move`](/packages/workspace/generators/move)
> See more about [`@nx/workspace:move`](/nx-api/workspace/generators/move)
### Removing Projects
@ -37,12 +37,12 @@ Like when moving projects, some steps are often missed when removing projects. T
3. The project's configuration will be removed.
4. The path mapping in `tsconfig.base.json` will be removed.
> See more about [`@nx/workspace:remove`](/packages/workspace/generators/remove)
> See more about [`@nx/workspace:remove`](/nx-api/workspace/generators/remove)
## Running custom commands
Executors provide an optimized way of running targets but unfortunately, not every target has an executor written for it. The [`nx:run-commands`](/packages/nx/executors/run-commands) executor is an executor that runs any command or multiple commands in the shell. This can be useful when integrating with other tools which do not have an executor provided. There is also a generator to help configure this executor.
Executors provide an optimized way of running targets but unfortunately, not every target has an executor written for it. The [`nx:run-commands`](/nx-api/nx/executors/run-commands) executor is an executor that runs any command or multiple commands in the shell. This can be useful when integrating with other tools which do not have an executor provided. There is also a generator to help configure this executor.
Running `nx g @nx/workspace:run-commands printhello --project my-feature-lib --command 'echo hello'` will create a `my-feature-lib:printhello` target that executes `echo hello` in the shell.
> See more about [`nx:run-commands`](/packages/nx/executors/run-commands)
> See more about [`nx:run-commands`](/nx-api/nx/executors/run-commands)

60
docs/map.json
View File

@ -1418,7 +1418,7 @@
"id": "skip-nx-cache-flag",
"file": "",
"tags": ["cache-task-results"],
"path": "/packages/nx/documents/affected#skip-nx-cache",
"path": "/nx-api/nx/documents/affected#skip-nx-cache",
"isExternal": true
},
{
@ -1486,14 +1486,6 @@
"id": "getting-started",
"description": "Learn how to extend Nx by creating and releasing your own Nx plugin.",
"file": "shared/plugins/intro"
},
{
"name": "Plugin Registry",
"description": "Browse official and community plugins",
"id": "registry",
"file": "",
"path": "/extending-nx/registry",
"isExternal": false
}
]
},
@ -1915,7 +1907,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/workspace",
"path": "/nx-api/workspace",
"file": "shared/packages/workspace/workspace-plugin"
},
{
@ -1933,7 +1925,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/plugin",
"path": "/nx-api/plugin",
"file": "shared/packages/plugin/plugin"
}
]
@ -1963,7 +1955,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/js",
"path": "/nx-api/js",
"file": "shared/packages/js/js-plugin"
}
]
@ -1976,7 +1968,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/web",
"path": "/nx-api/web",
"file": "shared/packages/web/web-plugin"
}
]
@ -1989,7 +1981,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/esbuild",
"path": "/nx-api/esbuild",
"file": "shared/packages/esbuild/esbuild-plugin"
}
]
@ -2001,7 +1993,7 @@
"itemList": [
{
"id": "overview",
"path": "/packages/vite",
"path": "/nx-api/vite",
"name": "Overview of the Nx Vite Plugin",
"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"
@ -2015,7 +2007,7 @@
"itemList": [
{
"id": "overview",
"path": "/packages/vue",
"path": "/nx-api/vue",
"name": "Overview of the Nx Vue Plugin",
"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"
@ -2029,7 +2021,7 @@
"itemList": [
{
"id": "overview",
"path": "/packages/webpack",
"path": "/nx-api/webpack",
"name": "Overview of the Nx Webpack Plugin",
"description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
"file": "shared/packages/webpack/plugin-overview"
@ -2044,7 +2036,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/angular",
"path": "/nx-api/angular",
"file": "shared/packages/angular/angular-plugin"
},
{
@ -2063,7 +2055,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/react",
"path": "/nx-api/react",
"file": "shared/packages/react/react-plugin"
}
]
@ -2076,7 +2068,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/jest",
"path": "/nx-api/jest",
"file": "shared/packages/jest/jest-plugin"
}
]
@ -2089,7 +2081,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/cypress",
"path": "/nx-api/cypress",
"file": "shared/packages/cypress/cypress-plugin"
}
]
@ -2102,7 +2094,7 @@
{
"name": "Overview",
"id": "overview",
"path": "/packages/playwright",
"path": "/nx-api/playwright",
"file": "shared/packages/playwright/playwright-plugin"
}
]
@ -2116,7 +2108,7 @@
"id": "overview",
"name": "Nx Storybook Plugin 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": "/packages/storybook",
"path": "/nx-api/storybook",
"file": "shared/packages/storybook/plugin-overview"
},
{
@ -2141,7 +2133,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/linter",
"path": "/nx-api/linter",
"file": "shared/packages/linter/linter-plugin"
}
]
@ -2154,19 +2146,19 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/eslint-plugin",
"path": "/nx-api/eslint-plugin",
"file": "shared/packages/linter/eslint-plugin"
},
{
"id": "enforce-module-boundaries",
"name": "The `enforce-module-boundaries` rule",
"path": "/packages/eslint-plugin",
"path": "/nx-api/eslint-plugin",
"file": "shared/packages/linter/enforce-module-boundaries"
},
{
"id": "dependency-checks",
"name": "The `dependency-checks` rule",
"path": "/packages/eslint-plugin",
"path": "/nx-api/eslint-plugin",
"file": "shared/packages/linter/dependency-checks"
}
]
@ -2179,7 +2171,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/node",
"path": "/nx-api/node",
"file": "shared/packages/node/node-plugin"
}
]
@ -2192,7 +2184,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/express",
"path": "/nx-api/express",
"file": "shared/packages/express/express-plugin"
}
]
@ -2205,7 +2197,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/nest",
"path": "/nx-api/nest",
"file": "shared/packages/nest/nest-plugin"
}
]
@ -2218,7 +2210,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/next",
"path": "/nx-api/next",
"file": "shared/packages/next/plugin-overview"
}
]
@ -2231,7 +2223,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/detox",
"path": "/nx-api/detox",
"file": "shared/packages/detox/detox-plugin"
}
]
@ -2244,7 +2236,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/react-native",
"path": "/nx-api/react-native",
"file": "shared/packages/react-native/react-native-plugin"
}
]
@ -2257,7 +2249,7 @@
{
"id": "overview",
"name": "Overview",
"path": "/packages/expo",
"path": "/nx-api/expo",
"file": "shared/packages/expo/expo-plugin"
}
]

2
docs/shared/angular-standalone-tutorial/1-code-generation.md
View File

@ -65,7 +65,7 @@ There are two projects that have been created for you:
As far as Nx is concerned, the root-level `store` app owns every file that doesn't belong to a different project. So files in the `e2e` folder belong to the `e2e` project, everything else belongs to `store`.
{% card title="Nx Cypress Support" description="While we see the Cypress project here, we won't go deeper on Cypress in this tutorial. You can find more materials on Nx Cypress support on the @nx/cypress package page." url="/packages/cypress" /%}
{% card title="Nx Cypress Support" description="While we see the Cypress project here, we won't go deeper on Cypress in this tutorial. You can find more materials on Nx Cypress support on the @nx/cypress package page." url="/nx-api/cypress" /%}
## Generating a component for the store

2
docs/shared/angular-standalone-tutorial/4-task-pipelines.md
View File

@ -262,7 +262,7 @@ npx nx affected -t test
This can be particularly helpful in CI pipelines for larger repos, where most commits only affect a small subset of the entire workspace.
{% card title="Affected Documentation" description="Checkout Affected documentation for more details" url="/packages/nx/documents/affected" /%}
{% card title="Affected Documentation" description="Checkout Affected documentation for more details" url="/nx-api/nx/documents/affected" /%}
## What's Next

2
docs/shared/angular-tutorial/angular-monorepo.md
View File

@ -317,7 +317,7 @@ nx g @nx/angular:library orders --directory=libs/orders --standalone
nx g @nx/angular:library shared-ui --directory=libs/shared/ui --standalone
```
Note how we type out the full path in the `directory` flag to place the libraries into a subfolder. You can choose whatever folder structure you like to organize your projects. If you change your mind later, you can run the [move generator](/packages/workspace/generators/move) to move a project to a different folder.
Note how we type out the full path in the `directory` flag to place the libraries into a subfolder. You can choose whatever folder structure you like to organize your projects. If you change your mind later, you can run the [move generator](/nx-api/workspace/generators/move) to move a project to a different folder.
Running the above commands should lead to the following directory structure:

4
docs/shared/core-features/automate-updating-dependencies.md
View File

@ -15,9 +15,9 @@ src="https://www.youtube.com/embed/Ss6MfcXi0jE"
title="How Automated Code Migrations Work"
/%}
Nx knows where its configuration files are and can therefore make sure they match the expected format. This automated update process, commonly referred to as "migration," becomes even more powerful when you leverage [Nx plugins](/packages). Nx plugins, which are NPM packages with a range of capabilities (code generation, task automation...), offer targeted updates based on their specific areas of responsibility.
Nx knows where its configuration files are and can therefore make sure they match the expected format. This automated update process, commonly referred to as "migration," becomes even more powerful when you leverage [Nx plugins](/nx-api). Nx plugins, which are NPM packages with a range of capabilities (code generation, task automation...), offer targeted updates based on their specific areas of responsibility.
For example, the [Nx ESLint plugin](/packages/linter) excels at configuring linting in your workspace. With its understanding of the configuration file locations, this plugin can provide precise migration scripts to update ESLint packages in your `package.json` and corresponding configuration files in your workspace when a new version is released.
For example, the [Nx ESLint plugin](/nx-api/linter) excels at configuring linting in your workspace. With its understanding of the configuration file locations, this plugin can provide precise migration scripts to update ESLint packages in your `package.json` and corresponding configuration files in your workspace when a new version is released.
Updating happens in three steps:

2
docs/shared/core-features/cache-task-results.md
View File

@ -73,4 +73,4 @@ For a more in-depth understanding of the caching implementation and to fine-tune
## Local Computation Caching
By default, Nx uses a local computation cache. Nx stores the cached values only for a week, after which they
are deleted. To clear the cache run [`nx reset`](/packages/nx/documents/reset), and Nx will create a new one the next time it tries to access it.
are deleted. To clear the cache run [`nx reset`](/nx-api/nx/documents/reset), and Nx will create a new one the next time it tries to access it.

4
docs/shared/core-features/run-tasks.md
View File

@ -90,7 +90,7 @@ npx nx run-many -t build lint test -p header footer
Note that Nx parallelizes all these tasks making also sure they are run in the right order based on their dependencies and the [task pipeline configuration](/concepts/task-pipeline-configuration).
Learn more about the [run-many](/packages/nx/documents/run-many) command.
Learn more about the [run-many](/nx-api/nx/documents/run-many) command.
### Run Tasks on Projects Affected by a PR
@ -124,7 +124,7 @@ To invoke it, use:
npx nx docs
```
If you want Nx to cache the task, but prefer to use npm (or pnpm/yarn) to run the script (i.e. `npm run docs`) you can use the [nx exec](/packages/nx/documents/exec) command:
If you want Nx to cache the task, but prefer to use npm (or pnpm/yarn) to run the script (i.e. `npm run docs`) you can use the [nx exec](/nx-api/nx/documents/exec) command:
```json {% fileName="package.json" %}
{

2
docs/shared/core-tutorial/02-create-cli.md
View File

@ -68,7 +68,7 @@ All of these reasons are matters of preference. After this tutorial, you should
- `root`, `sourceRoot` and `application` are properties that help Nx know more about your project.
- `targets` is similar to the `scripts` property in `package.json`.
- Just as in `package.json`, `build` and `serve` can be any string you pick.
- The `executor` is the code that runs the target. In this case, [`run-commands`](https://nx.dev/packages/nx/executors/run-commands) launches a terminal process to execute whatever command you pass in.
- The `executor` is the code that runs the target. In this case, [`run-commands`](/nx-api/nx/executors/run-commands) launches a terminal process to execute whatever command you pass in.
- `options` contains whatever configuration properties the executor needs to run.
## Create the CLI

4
docs/shared/deprecated/storybook/angular-browser-target.md
View File

@ -6,12 +6,12 @@ description: This document explains the role of the browserTarget in Angular pro
# The `browserTarget` for Angular projects with a Storybook configuration
{% callout type="note" title="Note" %}
This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
This documentation page contains information about the [Storybook plugin](/nx-api/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
{% /callout %}
## Setting up `browserTarget`
If you're using [Storybook](/packages/storybook) in your Angular project, you will notice that `browserTarget` is specified for the `storybook` and `build-storybook` targets, much like it is done for `serve` or other targets. Angular needs the `browserTarget` for Storybook in order to know which configuration to use for the build. If your project is buildable (it has a `build` target, and uses the main Angular builder - `@angular-devkit/build-angular:browser`) the `browserTarget` for Storybook will use the `build` target, if it's not buildable it will use the `build-storybook` target.
If you're using [Storybook](/nx-api/storybook) in your Angular project, you will notice that `browserTarget` is specified for the `storybook` and `build-storybook` targets, much like it is done for `serve` or other targets. Angular needs the `browserTarget` for Storybook in order to know which configuration to use for the build. If your project is buildable (it has a `build` target, and uses the main Angular builder - `@angular-devkit/build-angular:browser`) the `browserTarget` for Storybook will use the `build` target, if it's not buildable it will use the `build-storybook` target.
You do not have to do anything manually. Nx will create the configuration for you. Even if you are migrating from an older version of Nx, Nx will make sure to change your `package.json` Storybook targets to match the new schema.
You can read more about the `browserTarget` in the [official Angular documentation](https://angular.io/cli/serve).

2
docs/shared/deprecated/storybook/angular-storybook-targets.md
View File

@ -6,7 +6,7 @@ description: This document explains the role of the storybook and build-storyboo
# Information about `storybook` and `build-storybook` targets for Angular projects with a Storybook configuration
{% callout type="note" title="Note" %}
This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
This documentation page contains information about the [Storybook plugin](/nx-api/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
{% /callout %}
If you are on Nx version `>=14.1.8`, the [Nx Storybook plugin for _Angular_ projects](/recipes/storybook/overview-angular) uses the original Storybook executors for Angular (`"@storybook/angular:start-storybook"` and `"@storybook/angular:build-storybook"`) to serve and build Storybook.

2
docs/shared/deprecated/workspace-json.md
View File

@ -17,7 +17,7 @@ To remove `workspace.json` in favor of `project.json` files, run:
nx g @nx/workspace:fix-configuration
```
See [fix-configuration](/packages/workspace/generators/fix-configuration) for more options.
See [fix-configuration](/nx-api/workspace/generators/fix-configuration) for more options.
After this command, `workspace.json` should look like this:

2
docs/shared/deprecated/workspace-lint.md
View File

@ -8,6 +8,6 @@ Before Nx 15, the `workspace-lint` command performed workspace wide lint checks
Checks (1) and (2) are no longer necessary because [Nx no longer uses a `workspace.json` file](/deprecated/workspace-json) to define project locations. Instead, Nx dynamically detects projects anywhere in the workspace based on the presence of `package.json` or `project.json` files.
Check (3) is now accomplished manually with the [`nx report` command](/packages/nx/documents/report).
Check (3) is now accomplished manually with the [`nx report` command](/nx-api/nx/documents/report).
In Nx 15 and 16, `nx workspace-lint` does nothing except display a deprecation message. In Nx 17, `workspace-lint` will be completely removed.

24
docs/shared/getting-started/intro.md
View File

@ -57,16 +57,16 @@ npx create-nx-workspace@latest
{% cards cols="3" lgCols="8" mdCols="6" smCols="5" moreLink="/showcase/example-repos" %}
{% link-card title="Express" appearance="small" url="/packages/express" icon="express" /%}
{% link-card title="Express" appearance="small" url="/nx-api/express" icon="express" /%}
{% link-card title="Vue" appearance="small" url="/showcase/example-repos/add-vue" icon="vue" /%}
{% link-card title="Next" appearance="small" url="/packages/next" icon="nextjs" /%}
{% link-card title="Next" appearance="small" url="/nx-api/next" icon="nextjs" /%}
{% link-card title="Nuxt" appearance="small" url="/showcase/example-repos/add-nuxt" icon="nuxt" /%}
{% link-card title="Nest" appearance="small" url="/packages/nest" icon="nestjs" /%}
{% link-card title="Nest" appearance="small" url="/nx-api/nest" icon="nestjs" /%}
{% link-card title="Remix" appearance="small" url="/recipes/react/remix" icon="remix" /%}
{% link-card title="Expo" appearance="small" url="/packages/expo" icon="expo" /%}
{% link-card title="React Native" appearance="small" url="/packages/react-native" icon="react" /%}
{% link-card title="Expo" appearance="small" url="/nx-api/expo" icon="expo" /%}
{% link-card title="React Native" appearance="small" url="/nx-api/react-native" icon="react" /%}
{% link-card title="Fastify" appearance="small" url="/showcase/example-repos/mongo-fastify" icon="fastify" /%}
{% link-card title="Deno" appearance="small" url="https://github.com/nrwl/nx-labs/tree/main/packages/deno" icon="deno" /%}
{% link-card title="Deno" appearance="small" url="https://github.com/nrwl/nx-labs/tree/main/api/deno" icon="deno" /%}
{% link-card title="Svelte" appearance="small" url="/showcase/example-repos/add-svelte" icon="svelte" /%}
{% link-card title="Solid" appearance="small" url="/showcase/example-repos/add-solid" icon="solid" /%}
{% link-card title="Lit" appearance="small" url="/showcase/example-repos/add-lit" icon="lit" /%}
@ -76,12 +76,12 @@ npx create-nx-workspace@latest
{% link-card title="Rust" appearance="small" url="/showcase/example-repos/add-rust" icon="rust" /%}
{% link-card title="Go" appearance="small" url="https://github.com/nrwl/nx-recipes/blob/main/go/README.md" icon="go" /%}
{% link-card title=".NET" appearance="small" url="https://github.com/nrwl/nx-recipes/tree/main/dot-net-standalone" icon="dotnet" /%}
{% link-card title="Cypress" appearance="small" url="/packages/cypress" icon="cypress" /%}
{% link-card title="Playwright" appearance="small" url="/packages/playwright" icon="playwright" /%}
{% link-card title="Vite" appearance="small" url="/packages/vite" icon="vite" /%}
{% link-card title="Storybook" appearance="small" url="/packages/storybook" icon="storybook" /%}
{% link-card title="Jest" appearance="small" url="/packages/jest" icon="jest" /%}
{% link-card title="Rspack" appearance="small" url="/packages/rspack" icon="rspack" /%}
{% link-card title="Cypress" appearance="small" url="/nx-api/cypress" icon="cypress" /%}
{% link-card title="Playwright" appearance="small" url="/nx-api/playwright" icon="playwright" /%}
{% link-card title="Vite" appearance="small" url="/nx-api/vite" icon="vite" /%}
{% link-card title="Storybook" appearance="small" url="/nx-api/storybook" icon="storybook" /%}
{% link-card title="Jest" appearance="small" url="/nx-api/jest" icon="jest" /%}
{% link-card title="Rspack" appearance="small" url="/nx-api/rspack" icon="rspack" /%}
{% /cards %}

2
docs/shared/getting-started/why-nx.md
View File

@ -28,7 +28,7 @@ Nx is built in a modular fashion to let you only use the features you need.
![High-level Nx architecture](/shared/images/nx-architecture.svg)
- The **Nx** package provides fundamental technology-agnostic capabilities such as: [workspace analysis](/core-features/explore-graph), [task running](/core-features/run-tasks), [caching](/core-features/cache-task-results), [distribution](/core-features/distribute-task-execution), [code generation](/core-features/plugin-features/use-code-generators) and [automated code migrations](/core-features/automate-updating-dependencies).
- **Plugins** are NPM packages that built on top of the fundamental capabilities provided by the Nx package. Nx plugins contain [code generators](/core-features/plugin-features/use-code-generators), [executors](/core-features/plugin-features/use-task-executors) (to abstract lower-level build tooling) and automated code migrations for keeping your tools up to date. Contrary to the Nx package, which works the same way with any JS or non-JS project, plugins are usually technology specific. For instance, `@nx/react` adds support for building React apps and libs, `@nx/cypress` adds e2e testing capabilities with Cypress. Plugins make developers more productive by removing any friction of integrating different tools with each other and by providing utilities to keep them up to date. The Nx team maintains plugins for React, Next, Remix, Angular, Jest, Cypress, Storybook and more. You can use the `@nx/plugin` package to easily [scaffold a new plugin](/extending-nx/intro/getting-started) or even just [automate your local workspace](/extending-nx/recipes/local-generators). There are also more than 80 [community plugins](/extending-nx/registry).
- **Plugins** are NPM packages that built on top of the fundamental capabilities provided by the Nx package. Nx plugins contain [code generators](/core-features/plugin-features/use-code-generators), [executors](/core-features/plugin-features/use-task-executors) (to abstract lower-level build tooling) and automated code migrations for keeping your tools up to date. Contrary to the Nx package, which works the same way with any JS or non-JS project, plugins are usually technology specific. For instance, `@nx/react` adds support for building React apps and libs, `@nx/cypress` adds e2e testing capabilities with Cypress. Plugins make developers more productive by removing any friction of integrating different tools with each other and by providing utilities to keep them up to date. The Nx team maintains plugins for React, Next, Remix, Angular, Jest, Cypress, Storybook and more. You can use the `@nx/plugin` package to easily [scaffold a new plugin](/extending-nx/intro/getting-started) or even just [automate your local workspace](/extending-nx/recipes/local-generators). There are also more than 80 [community plugins](/plugin-registry).
- **Devkit** is a set of utilities for [building Nx plugins](/extending-nx/intro/getting-started).
- **Nx Cloud** helps scale your project on CI by [adding remote caching](/concepts/how-caching-works) and [distributed task execution](/concepts/more-concepts/illustrated-dte). It also improves developer ergonomics by integrating with GitHub, GitLab and BitBucket and providing searchable structured logs. Learn more at [nx.app](https://nx.app).
- **Nx Console** is an extension for **VSCode, IntelliJ and VIM**. It provides code autocompletion, interactive generators, workspace visualizations, powerful refactorings and more. You can [install it here](/core-features/integrate-with-editors).

2
docs/shared/guides/define-environment-variables.md
View File

@ -54,7 +54,7 @@ for workspace-specific settings (like the [Nx Cloud token](/core-features/remote
If you want to load variables from `env` files other than the ones listed above:
1. Use the [env-cmd](https://www.npmjs.com/package/env-cmd) package: `env-cmd -f .qa.env nx serve`
2. Use the `envFile` option of the [run-commands](/packages/nx/executors/run-commands#envfile) builder and execute your command inside of the builder
2. Use the `envFile` option of the [run-commands](/nx-api/nx/executors/run-commands#envfile) builder and execute your command inside of the builder
### Ad-hoc variables

2
docs/shared/guides/js-and-ts.md
View File

@ -15,4 +15,4 @@ Regardless whether you use JavaScript or TypeScript, you will have a `tsconfig.b
## Interested in building and distributing TypeScript packages?
You might want to check out the `@nx/js` package which comes with advanced TypeScript support, including [SWC](https://swc.rs/) and more. Find out more in the [plugin documentation](/packages/js).
You might want to check out the `@nx/js` package which comes with advanced TypeScript support, including [SWC](https://swc.rs/) and more. Find out more in the [plugin documentation](/nx-api/js).

10
docs/shared/guides/nx-and-angular-cli.md
View File

@ -65,7 +65,7 @@ More details: Nx [project configuration](/reference/project-configuration).
Nx comes with slightly different terminology than the Angular CLI for some features.
**Angular Builders** are called [Executors](/core-features/plugin-features/use-task-executors) in Nx but work very much similarly. You use them in your project configuration to define how to build, test, lint, and serve your project. You can use both Nx executors from [Nx Plugins](/extending-nx/registry) or Angular Builders from the Angular Devkit.
**Angular Builders** are called [Executors](/core-features/plugin-features/use-task-executors) in Nx but work very much similarly. You use them in your project configuration to define how to build, test, lint, and serve your project. You can use both Nx executors from [Nx Plugins](/plugin-registry) or Angular Builders from the Angular Devkit.
```json
{
@ -132,7 +132,7 @@ What's the difference?
- Fix migrations that "almost work".
- Commit a partially migrated state.
- Change versions of packages to match org requirements.
- [Opt out of Angular updates when updating Nx versions](/recipes/tips-n-tricks/advanced-update#choosing-optional-package-updates-to-apply) as long as [the Angular version is still supported](/packages/angular/documents/angular-nx-version-matrix)
- [Opt out of Angular updates when updating Nx versions](/recipes/tips-n-tricks/advanced-update#choosing-optional-package-updates-to-apply) as long as [the Angular version is still supported](/nx-api/angular/documents/angular-nx-version-matrix)
`nx migrate` does this by splitting the process into two steps. `nx migrate latest` creates a `migrations.json` file with a list of all the migrations needed by Nx, Angular, and other packages. You can then modify that file before running `nx migrate --run-migrations` to execute those migrations.
@ -162,7 +162,7 @@ Features like
- offering [remote caching abilities](/core-features/remote-cache) on CI
- offering [task distribution across machines (DTE)](/core-features/distribute-task-execution)
And, Nx already uses fast, modern tooling like [ESBuild](/packages/esbuild), [Vite](/packages/vite), Vitest and [Rspack](/packages/rspack) for non-Angular stacks. So once Angular is ready to use these tools, Nx will also be ready.
And, Nx already uses fast, modern tooling like [ESBuild](/nx-api/esbuild), [Vite](/nx-api/vite), Vitest and [Rspack](/nx-api/rspack) for non-Angular stacks. So once Angular is ready to use these tools, Nx will also be ready.
## Editor Integration
@ -295,9 +295,9 @@ Learn more about the [graph features here](/core-features/explore-graph).
## Extensible and Customizable: Make it fit your own needs
Nx is [built to be extensible](/getting-started/why-nx#how-does-nx-work). Just like the [packages published by the Nx core team](/packages) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started).
Nx is [built to be extensible](/getting-started/why-nx#how-does-nx-work). Just like the [packages published by the Nx core team](/nx-api) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started).
This can be as simple as using [run-commands](/packages/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors).
This can be as simple as using [run-commands](/nx-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors).
## Diversification

2
docs/shared/guides/nx-devkit-angular-devkit.md
View File

@ -1,7 +1,7 @@
# Nx Devkit and Angular Devkit
{% callout type="note" title="Nx & Angular" %}
This document covers the difference between Nx Devkit and Angular Devkit. See the [Nx Devkit](/packages/devkit/documents/nx_devkit) guide for more in-depth details about Nx Devkit.
This document covers the difference between Nx Devkit and Angular Devkit. See the [Nx Devkit](/nx-api/devkit/documents/nx_devkit) guide for more in-depth details about Nx Devkit.
{% /callout %}
Nx comes with a devkit to write generators and executors, but you can also use Angular devkit (schematics and builders). In other words, you can use an Angular schematic to implement a generator, and you can use an Angular builder to implement an executor.

2
docs/shared/guides/react-native.md
View File

@ -1,6 +1,6 @@
# React Native with Nx
Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Detox](/packages/detox), Storybook, Jest, and more.
Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Detox](/nx-api/detox), Storybook, Jest, and more.
In this guide we will show you how to develop [React Native](https://reactnative.dev/) applications with Nx.

2
docs/shared/guides/using-tailwind-css-with-angular-projects.md
View File

@ -34,7 +34,7 @@ To add Tailwind CSS to an existing Angular application, buildable library or pub
npx nx g @nx/angular:setup-tailwind my-project
```
You can see the available options for the above generator in [its docs](/packages/angular/generators/setup-tailwind).
You can see the available options for the above generator in [its docs](/nx-api/angular/generators/setup-tailwind).
## Configuring the content sources for a project and its dependencies

2
docs/shared/guides/why-monorepos.md
View File

@ -38,7 +38,7 @@ Nx provides tools to give you the benefits of a monorepo without the drawbacks o
- **Consistent Code Generation** - Generators allow you to customize and standardize organizational conventions and structure, removing the need to perform the same manual setup tasks repetitively.
- **Affected Commands** - [Nx’s affected commands](/packages/nx/documents/affected) analyze your source code, the context of the changes, and only runs tasks on the affected projects impacted by the source code changes.
- **Affected Commands** - [Nx’s affected commands](/nx-api/nx/documents/affected) analyze your source code, the context of the changes, and only runs tasks on the affected projects impacted by the source code changes.
- **Distributed Caching** - Nx provides local caching and support for distributed caching of command executions. With distributed caching, when someone on your team runs a command, everyone else gets access to those artifacts to speed up their command executions, bringing them down from minutes to seconds. Nx helps you scale your development to massive applications and libraries even more with distributed task execution and incremental builds.

8
docs/shared/migration/angular-manual.md
View File

@ -1,7 +1,7 @@
# Migrating an Angular application manually
{% callout type="note" title="Older Angular Versions" %}
If you are using older versions of Angular (version 13 or lower), make sure to use the appropriate version of Nx that matches your version of Angular. See the [Nx and Angular Version Compatibility Matrix](/packages/angular/documents/angular-nx-version-matrix) to find the correct version. The generated files will also be slightly different.
If you are using older versions of Angular (version 13 or lower), make sure to use the appropriate version of Nx that matches your version of Angular. See the [Nx and Angular Version Compatibility Matrix](/nx-api/angular/documents/angular-nx-version-matrix) to find the correct version. The generated files will also be slightly different.
{% /callout %}
If you are unable to automatically transform your Angular CLI workspace to an [Nx workspace](/recipes/angular/migration/angular), there are some manual steps you can take to move your project(s) into an Nx workspace.
@ -69,7 +69,7 @@ A new Nx workspace with your `org name` as the folder name, and your `applicatio
### Review Angular installed packages versions
Creating an Nx workspace with the latest version will install the Angular packages on their latest versions. If you're using a [lower version that's supported by the latest Nx](/packages/angular/documents/angular-nx-version-matrix), make sure to adjust the newly generated `package.json` file with your versions.
Creating an Nx workspace with the latest version will install the Angular packages on their latest versions. If you're using a [lower version that's supported by the latest Nx](/nx-api/angular/documents/angular-nx-version-matrix), make sure to adjust the newly generated `package.json` file with your versions.
### Copying over application files
@ -191,6 +191,6 @@ yarn lint
Learn more about the advantages of Nx in the following guides:
[Using Cypress for e2e tests](/packages/cypress) \
[Using Jest for unit tests](/packages/jest) \
[Using Cypress for e2e tests](/nx-api/cypress) \
[Using Jest for unit tests](/nx-api/jest) \
[Rebuilding and Retesting What is Affected](/concepts/affected)

38
docs/shared/migration/from-turborepo.md
View File

@ -149,41 +149,41 @@ For each `turbo.json` configuration property, the equivalent Nx property is list
| `pipeline[task].outputs` | [Same syntax](/reference/project-configuration#outputs). |
| `pipeline[task].cache` | Define in the [`nx.json` `cacheableOperations` property](/reference/nx-json#tasks-runner-options) |
| `pipeline[task].inputs` | [Same syntax](/reference/project-configuration#filesets). |
| `pipeline[task].outputMode` | Use the [`--output-style` command line flag](/packages/nx/documents/run-many#output-style) |
| `pipeline[task].outputMode` | Use the [`--output-style` command line flag](/nx-api/nx/documents/run-many#output-style) |
| `pipeline[task].persistent` | N/A. |
## Command Equivalents
| | |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `turbo run test lint build` | [`nx run-many -t test lint build`](/packages/nx/documents/run-many) |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `turbo run test lint build` | [`nx run-many -t test lint build`](/nx-api/nx/documents/run-many) |
| `--cache-dir` | Set in [`nx.json` under `tasksRunnerOptions.default.options.cacheDirectory`](/reference/nx-json#tasks-runner-options) |
| `--concurrency` | [`--parallel`](/packages/nx/documents/run-many#parallel) |
| `--continue` | [Use `--nx-bail`](/packages/nx/documents/run-many#nx-bail) with the inverse value |
| `--cwd` | Available when using the [`run-commands` executor](/packages/nx/executors/run-commands#cwd) |
| `--concurrency` | [`--parallel`](/nx-api/nx/documents/run-many#parallel) |
| `--continue` | [Use `--nx-bail`](/nx-api/nx/documents/run-many#nx-bail) with the inverse value |
| `--cwd` | Available when using the [`run-commands` executor](/nx-api/nx/executors/run-commands#cwd) |
| `--dry-run` | N/A. Nx has `--dry-run` for `nx generate` but not for running tasks. |
| `--env-mode` | N/A |
| `--filter` | Use [`-p admin-*` or `-p tag:api-*`](/packages/nx/documents/run-many#projects). Also see [`nx affected`](/packages/nx/documents/affected). |
| `--graph` | [Same syntax](/packages/nx/documents/run-many#graph) or [`nx graph`](/packages/nx/documents/dep-graph) for the entire graph |
| `--force` | [`nx reset`](/packages/nx/documents/reset) and then run the command again |
| `--filter` | Use [`-p admin-*` or `-p tag:api-*`](/nx-api/nx/documents/run-many#projects). Also see [`nx affected`](/nx-api/nx/documents/affected). |
| `--graph` | [Same syntax](/nx-api/nx/documents/run-many#graph) or [`nx graph`](/nx-api/nx/documents/dep-graph) for the entire graph |
| `--force` | [`nx reset`](/nx-api/nx/documents/reset) and then run the command again |
| `--global-deps` | Use [`inputs` in the `nx.json`](/concepts/more-concepts/customizing-inputs) or project configuration |
| `--framework-inference` | Nx knows if you're using a particular framework if you use an executor for that framework. |
| `--ignore` | Use an [`.nxignore` file](/reference/nxignore) (or `.gitignore`) |
| `--log-order` | Use [`--output-style`](/packages/nx/documents/run-many#output-style) |
| `--no-cache` | Use [`--skip-nx-cache`](/packages/nx/documents/run-many#skip-nx-cache) |
| `--log-order` | Use [`--output-style`](/nx-api/nx/documents/run-many#output-style) |
| `--no-cache` | Use [`--skip-nx-cache`](/nx-api/nx/documents/run-many#skip-nx-cache) |
| `--no-daemon` | Use [`NX_DAEMON=false` or set `useDaemonProcess: false`](/concepts/more-concepts/nx-daemon#turning-it-off) in `nx.json` |
| `--output-logs` | Use [`--output-style`](/packages/nx/documents/run-many#output-style) |
| `--output-logs` | Use [`--output-style`](/nx-api/nx/documents/run-many#output-style) |
| `--only` | N/A |
| `--parallel` | N/A |
| `--remote-only` | N/A. Can [ignore the remote cache](/core-features/remote-cache#skipping-cloud) with `--no-cloud`. |
| `--summarize` | N/A |
| `--token` | Set the [Nx Cloud token in `nx.json`](/nx-cloud/account/access-tokens#setting-access-tokens) or as an environment variable (`NX_CLOUD_ACCESS_TOKEN`) |
| `--team` | See `--token` for choosing a different Nx Cloud workspace. You can [use `--runner`](/packages/nx/documents/run-many#runner) to choose a different runner defined in the `nx.json` file. |
| `--team` | See `--token` for choosing a different Nx Cloud workspace. You can [use `--runner`](/nx-api/nx/documents/run-many#runner) to choose a different runner defined in the `nx.json` file. |
| `--preflight` | N/A |
| `--trace` | N/A. [`--verbose`](/packages/nx/documents/run-many#verbose) for more logging. |
| `--heap` | N/A. [`--verbose`](/packages/nx/documents/run-many#verbose) for more logging. |
| `--trace` | N/A. [`--verbose`](/nx-api/nx/documents/run-many#verbose) for more logging. |
| `--heap` | N/A. [`--verbose`](/nx-api/nx/documents/run-many#verbose) for more logging. |
| `--cpuprofile` | Use [`NX_PROFILE=profile.json`](/recipes/troubleshooting/performance-profiling). |
| `--verbosity` | Use [`--verbose`](/packages/nx/documents/run-many#verbose) |
| `turbo gen` | [Use `nx generate`](/packages/nx/documents/generate) |
| `turbo login` | No need. [Use `nx connect`](/packages/nx/documents/connect-to-nx-cloud) once to set up Nx Cloud. |
| `turbo link` | [Use `nx connect`](/packages/nx/documents/connect-to-nx-cloud) |
| `--verbosity` | Use [`--verbose`](/nx-api/nx/documents/run-many#verbose) |
| `turbo gen` | [Use `nx generate`](/nx-api/nx/documents/generate) |
| `turbo login` | No need. [Use `nx connect`](/nx-api/nx/documents/connect-to-nx-cloud) once to set up Nx Cloud. |
| `turbo link` | [Use `nx connect`](/nx-api/nx/documents/connect-to-nx-cloud) |

8
docs/shared/migration/manual.md
View File

@ -54,8 +54,8 @@ nx generate @nx/react:application my-application
There are a lot of options when creating your application. If you want to follow Nx recommendations, you can accept the defaults. If you have a well-established codebase, you can configure those options at the time of application generation. You can find documentation for these options for the different frameworks here:
- [Angular](/packages/angular/generators/application)
- [React](/packages/react/generators/application)
- [Angular](/nx-api/angular/generators/application)
- [React](/nx-api/react/generators/application)
You may also find it useful to use the [Nx Console](/core-features/integrate-with-editors) in Visual Studio Code. This will give you a visual way to generate your application with all of the options laid out in front of you.
@ -151,7 +151,7 @@ Nx uses Prettier to ensure standard formatting across your codebase. Prettier co
nx format:write
```
[Learn more about formatting](/packages/nx/documents/format-write)
[Learn more about formatting](/nx-api/nx/documents/format-write)
### Adding tasks
@ -161,7 +161,7 @@ You should consider implementing them as Nx tasks which should be a quick transi
Your use-case may also be covered by one of our community plugins. Plugin authors are able to extend the functionality of Nx through our plugin API.
[Learn more about the `run-commands` executor](/packages/nx/executors/run-commands)
[Learn more about the `run-commands` executor](/nx-api/nx/executors/run-commands)
[Learn more about caching](/concepts/how-caching-works)

4
docs/shared/migration/migration-angular.md
View File

@ -114,8 +114,8 @@ Your workspace is now powered by Nx! You can verify that your application still
Learn more about the advantages of Nx in the following guides:
- [Using Cypress for e2e tests](/packages/cypress)
- [Using Jest for unit tests](/packages/jest)
- [Using Cypress for e2e tests](/nx-api/cypress)
- [Using Jest for unit tests](/nx-api/jest)
- [Computation Caching](/concepts/how-caching-works)
- [Rebuilding and Retesting What is Affected](/concepts/affected)
- [Integrate with Editors](/core-features/integrate-with-editors)

2
docs/shared/monorepo-ci-azure.md
View File

@ -195,6 +195,6 @@ jobs:
- script: npx nx affected --base=$(BASE_SHA) --head=$(HEAD_SHA) -t lint --parallel=3 & npx nx affected --base=$(BASE_SHA) --head=$(HEAD_SHA) -t test --parallel=3 --configuration=ci & npx nx affected --base=$(BASE_SHA) --head=$(HEAD_SHA) -t build --parallel=3
```
You can also use our [ci-workflow generator](/packages/workspace/generators/ci-workflow) to generate the pipeline file.
You can also use our [ci-workflow generator](/nx-api/workspace/generators/ci-workflow) to generate the pipeline file.
{% /nx-cloud-section %}

2
docs/shared/monorepo-ci-circle-ci.md
View File

@ -82,6 +82,6 @@ workflows:
- main
```
You can also use our [ci-workflow generator](/packages/workspace/generators/ci-workflow) to generate the configuration file.
You can also use our [ci-workflow generator](/nx-api/workspace/generators/ci-workflow) to generate the configuration file.
{% /nx-cloud-section %}

2
docs/shared/monorepo-ci-github-actions.md
View File

@ -69,7 +69,7 @@ jobs:
number-of-agents: 3
```
You can also use our [ci-workflow generator](/packages/workspace/generators/ci-workflow) to generate the workflow file.
You can also use our [ci-workflow generator](/nx-api/workspace/generators/ci-workflow) to generate the workflow file.
## Custom distributed CI with Nx Cloud

2
docs/shared/monorepo-nx-enterprise.md
View File

@ -214,7 +214,7 @@ will get the following problems:
- We will be affected by the code your change didn't touch
We should utilize `affected:*` commands to build and test projects. Read more about
them [here](/packages/nx/documents/affected).
them [here](/nx-api/nx/documents/affected).
### Trunk-based development

2
docs/shared/node-server-tutorial/4-task-pipelines.md
View File

@ -217,7 +217,7 @@ npx nx affected -t lint
This can be particularly helpful in CI pipelines for larger repos, where most commits only affect a small subset of the entire workspace.
{% card title="Affected Documentation" description="Checkout Affected documentation for more details" url="/packages/nx/documents/affected" /%}
{% card title="Affected Documentation" description="Checkout Affected documentation for more details" url="/nx-api/nx/documents/affected" /%}
## What's Next

8
docs/shared/packages/cypress/cypress-component-testing.md
View File

@ -3,12 +3,12 @@
> Component testing requires Cypress v10 and above.
> See our [guide for more information](/recipes/cypress/cypress-v11-migration) to migrate to Cypress v10.
Unlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added
directly to a project, like [Jest](/packages/jest)
Unlike [E2E testing](/nx-api/cypress), component testing does not create a new project. Instead, Cypress component testing is added
directly to a project, like [Jest](/nx-api/jest)
## Add Component Testing to a Project
> Currently only [@nx/react](/packages/react/generators/cypress-component-configuration), [@nx/angular](/packages/angular/generators/cypress-component-configuration), and [@nx/next](/packages/next/generators/cypress-component-configuration) plugins support component testing
> Currently only [@nx/react](/nx-api/react/generators/cypress-component-configuration), [@nx/angular](/nx-api/angular/generators/cypress-component-configuration), and [@nx/next](/nx-api/next/generators/cypress-component-configuration) plugins support component testing
Use the `cypress-component-configuration` generator from the respective plugin to add component testing to a project.
@ -24,7 +24,7 @@ You can optionally pass in `--generate-tests` to create component tests for all
Component testing supports both applications and libraries. By default, the generator attempts to find the build target for you based on the project's dependent apps. But you can manually specify the build target to use via the `--build-target` option. Note, in most cases, the build target will be from a different project than the one being configured. The only case where the build targets are from the same project is when the component tests are being added to an application.
> Note: The [@nx/next:cypress-component-configuration generator](/packages/next/generators/cypress-component-configuration) doesn't require a build target
> Note: The [@nx/next:cypress-component-configuration generator](/nx-api/next/generators/cypress-component-configuration) doesn't require a build target
```shell
nx g @nx/react:cypress-component-configuration --project=your-project --build-target=my-react-app:build

4
docs/shared/packages/cypress/cypress-plugin.md
View File

@ -110,11 +110,11 @@ For adding more dynamic configurations to your cypress configuration, you can lo
If you're needing to pass a variable to cypress that you wish to not commit to your repository, i.e. API keys, or dynamic values based on configurations, i.e. API Urls. This is where [Cypress environment variables](https://docs.cypress.io/guides/guides/environment-variables) can be used.
There are a handful of ways to pass environment variables to Cypress, but the most common is going to be via the [`cypress.env.json` file](https://docs.cypress.io/guides/guides/environment-variables#Option-1-configuration-file), the [env executor option for cypress](https://nx.dev/packages/cypress/executors/cypress#env) or the commandline.
There are a handful of ways to pass environment variables to Cypress, but the most common is going to be via the [`cypress.env.json` file](https://docs.cypress.io/guides/guides/environment-variables#Option-1-configuration-file), the [env executor option for cypress](/nx-api/cypress/executors/cypress#env) or the commandline.
Create a `cypress.env.json` file in the projects root i.e. `apps/my-cool-app-e2e/cypress.env.json`. Cypress will automatically pick up this file. This method is helpful for configurations that you want to not commit. Just don't forget to add the file to the `.gitignore` and add documentation so people in your repo know what values to popluate in their local copy of the `cypress.env.json` file.
Using [@nx/cypress:cypress](/packages/cypress/executors/cypress) env executor option is a good way to add values you want to define that you don't mine commit to the repository, such as a base API url. You can leverage [target configurations](/reference/project-configuration#targets) to define different values as well.
Using [@nx/cypress:cypress](/nx-api/cypress/executors/cypress) env executor option is a good way to add values you want to define that you don't mine commit to the repository, such as a base API url. You can leverage [target configurations](/reference/project-configuration#targets) to define different values as well.
Optionally, you can pass environment variables via the commandline with the `--env` flag.

4
docs/shared/packages/esbuild/esbuild-plugin.md
View File

@ -5,7 +5,7 @@ Why should you use this plugin?
- _Fast_ builds using esbuild.
- Type-checking using TypeScript, which esbuild does not handle.
- Intelligent `package.json` output.
- Additional [assets](/packages/esbuild/executors/esbuild#assets) for the output.
- Additional [assets](/nx-api/esbuild/executors/esbuild#assets) for the output.
## Setting up esbuild
@ -141,4 +141,4 @@ Extra API options for esbuild can be passed in the `esbuildOptions` object for y
## More Documentation
- [Using JS](/packages/js)
- [Using JS](/nx-api/js)

4
docs/shared/packages/expo/expo-plugin.md
View File

@ -300,5 +300,5 @@ Below table is a map between expo commands and Nx commands:
## More Documentation
- [Using Detox](/packages/detox)
- [Using Jest](/packages/jest)
- [Using Detox](/nx-api/detox)
- [Using Jest](/nx-api/jest)

4
docs/shared/packages/jest/jest-plugin.md
View File

@ -117,7 +117,7 @@ export default {
### Nx
Nx Jest Plugin options can be configured via the [project config file](/reference/project-configuration) or via the [command line flags](/packages/jest).
Nx Jest Plugin options can be configured via the [project config file](/reference/project-configuration) or via the [command line flags](/nx-api/jest).
> Hint: Use `--help` to see all available options
>
@ -203,4 +203,4 @@ export default async function () {
## More Documentation
- [Jest Docs](https://jestjs.io/)
- [@nx/jest options](/packages/jest)
- [@nx/jest options](/nx-api/jest)

4
docs/shared/packages/linter/eslint-plugin.md
View File

@ -61,8 +61,8 @@ You can also use `@nx/react` which includes all three `@nx/react-*` plugins
### Enforce Module Boundaries rule
The `enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. Enforcing strict boundaries helps prevent unplanned cross-dependencies. Read more about it on a [dedicated page](/packages/eslint-plugin/documents/enforce-module-boundaries).
The `enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. Enforcing strict boundaries helps prevent unplanned cross-dependencies. Read more about it on a [dedicated page](/nx-api/eslint-plugin/documents/enforce-module-boundaries).
### Dependency Checks rule
The `@nx/dependency-checks` ESLint rule enables you to discover mismatches between dependencies specified in a project's `package.json` and the dependencies that your project actually depends on. Read more about it on a [dedicated page](/packages/eslint-plugin/documents/dependency-checks).
The `@nx/dependency-checks` ESLint rule enables you to discover mismatches between dependencies specified in a project's `package.json` and the dependencies that your project actually depends on. Read more about it on a [dedicated page](/nx-api/eslint-plugin/documents/dependency-checks).

6
docs/shared/packages/linter/linter-plugin.md
View File

@ -32,9 +32,9 @@ nx lint my-lib
## Utils
- [convert-to-flat-config](/packages/linter/generators/convert-to-flat-config) - Converts the workspace's [ESLint](https://eslint.org/) configs to the new [Flat Config](https://eslint.org/blog/2022/08/new-config-system-part-2)
- **Deprecated** [convert-tslint-to-eslint](/packages/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/)
- [convert-to-flat-config](/nx-api/linter/generators/convert-to-flat-config) - Converts the workspace's [ESLint](https://eslint.org/) configs to the new [Flat Config](https://eslint.org/blog/2022/08/new-config-system-part-2)
- **Deprecated** [convert-tslint-to-eslint](/nx-api/angular/generators/convert-tslint-to-eslint) - Converts a project linter from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/)
## ESLint plugin
Read about our dedicated ESLint plugin - [eslint-plugin-nx](/packages/eslint-plugin/documents/overview).
Read about our dedicated ESLint plugin - [eslint-plugin-nx](/nx-api/eslint-plugin/documents/overview).

2
docs/shared/packages/nest/nest-plugin.md
View File

@ -149,4 +149,4 @@ nx test my-nest-lib
## More Documentation
- [Using Jest](/packages/jest)
- [Using Jest](/nx-api/jest)

2
docs/shared/packages/next/next-config-setup.md
View File

@ -30,7 +30,7 @@ There is a popular package called `next-compose-plugins` that has not been maint
## `withNx` plugin
The `withNx` Next.js plugin provides integration with Nx, including support for [workspace libraries](/packages/next/generators/library), SVGR, and more. It is included by default when you generate a Next.js [application](/packages/next/generators/application) with Nx. When you customize your `next.config.js` file, make sure to include the `withNx` plugin.
The `withNx` Next.js plugin provides integration with Nx, including support for [workspace libraries](/nx-api/next/generators/library), SVGR, and more. It is included by default when you generate a Next.js [application](/nx-api/next/generators/application) with Nx. When you customize your `next.config.js` file, make sure to include the `withNx` plugin.
### Options

4
docs/shared/packages/node/node-plugin.md
View File

@ -86,5 +86,5 @@ For additional information on how to debug Node applications, see the [Node.js d
## More Documentation
- [Using Cypress](/packages/cypress)
- [Using Jest](/packages/jest)
- [Using Cypress](/nx-api/cypress)
- [Using Jest](/nx-api/jest)

6
docs/shared/packages/react-native/react-native-plugin.md
View File

@ -83,7 +83,7 @@ The Nx CLI provides the [`migrate` command](/core-features/automate-updating-dep
#### Use upgrade-native Generator
To upgrade native iOS and Android code to latest, you can use the [upgrade-native](/packages/react-native/generators/upgrade-native) generator:
To upgrade native iOS and Android code to latest, you can use the [upgrade-native](/nx-api/react-native/generators/upgrade-native) generator:
```shell
nx generate @nx/react-native:upgrade-native <your-app-name>
@ -147,5 +147,5 @@ The build artifacts will be located under `<your app folder>/android/app/build`.
## More Documentation
- [Using Detox](/packages/detox)
- [Using Jest](/packages/jest)
- [Using Detox](/nx-api/detox)
- [Using Jest](/nx-api/jest)

4
docs/shared/packages/react/react-plugin.md
View File

@ -124,6 +124,6 @@ The library in `dist` is publishable to npm or a private registry.
## More Documentation
- [Using Cypress](/packages/cypress)
- [Using Jest](/packages/jest)
- [Using Cypress](/nx-api/cypress)
- [Using Jest](/nx-api/jest)
- [Using Storybook](/recipes/storybook/overview-react)

18
docs/shared/packages/storybook/best-practices.md
View File

@ -7,7 +7,7 @@ description: The purpose of this guide is to help you set up Storybook in your N
## Purpose of this guide
The purpose of this guide is to help you [set up Storybook in your Nx workspace](/packages/storybook) so that you can get the most out of Nx and its powerful capabilities.
The purpose of this guide is to help you [set up Storybook in your Nx workspace](/nx-api/storybook) so that you can get the most out of Nx and its powerful capabilities.
## When to use Storybook
@ -31,7 +31,7 @@ First, let’s see what Nx offers, when you are in the process of developing a p
#### Configuration generation
You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/packages/storybook/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` package overview page](/packages/storybook#generating-storybook-configuration). With Nx, you configure Storybook for each individual project.
You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/nx-api/storybook/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` package overview page](/nx-api/storybook#generating-storybook-configuration). With Nx, you configure Storybook for each individual project.
#### Stories generation
@ -43,13 +43,13 @@ If your project is not configured yet, check out one of these guides:
- [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular)
If your project is [already configured](/packages/storybook), you can use the `stories` generator:
If your project is [already configured](/nx-api/storybook), you can use the `stories` generator:
- [React stories generator](/packages/react/generators/stories)
- [React stories generator](/nx-api/react/generators/stories)
- [React Native stories generator](/packages/react-native/generators/stories)
- [React Native stories generator](/nx-api/react-native/generators/stories)
- [Angular stories generator](/packages/angular/generators/stories)
- [Angular stories generator](/nx-api/angular/generators/stories)
The stories generator will read your inputs (if you’re using Angular), or your props (if you're using React), and will generate stories with the corresponding arguments/controls already prefilled.
@ -77,11 +77,11 @@ When you are running the Cypress tests for a project, Cypress will start the Sto
#### Serve
When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/packages/storybook#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/packages/storybook/executors/storybook) and [build](/packages/storybook/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack).
When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/nx-api/storybook#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/nx-api/storybook/executors/storybook) and [build](/nx-api/storybook/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack).
#### Build and deploy
The build and deploy step usually comes in handy when you are ready to use Storybook for documentation, and you want to publish it. The [building](/packages/storybook/executors/build) step of Storybook is integrated in the Nx ecosystem, as explained above, and you can trigger your Storybook builds as you would trigger any other build inside your workspace.
The build and deploy step usually comes in handy when you are ready to use Storybook for documentation, and you want to publish it. The [building](/nx-api/storybook/executors/build) step of Storybook is integrated in the Nx ecosystem, as explained above, and you can trigger your Storybook builds as you would trigger any other build inside your workspace.
When you publish your organization’s Storybook, as a result, ideally, you would want to have one shareable Storybook page/application living under one URL, that you can share. With Nx, you can build your Storybook and it will be ready for deployment. **However**, at this point, you have one Storybook per project in your workspace, and you could end up with far too many Storybooks that are built and ready for deployment. This is not ideal, and does not accomplish the ultimate goal of “one shareable documentation page”.
@ -150,4 +150,4 @@ If you have any questions or suggestions, please feel free to reach out to us on
### Nx & Storybook documentation
You can find all Storybook-related Nx documentation in the [packages page](/packages#storybook).
You can find all Storybook-related Nx documentation in the [packages page](/nx-api/storybook).

8
docs/shared/packages/storybook/plugin-overview.md
View File

@ -53,7 +53,7 @@ You can generate Storybook configuration for an individual project with this com
nx g @nx/storybook:configuration project-name
```
If you are NOT using a framework-specific generator (for [Angular](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/react-native/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [React Native](/nx-api/react-native/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
@ -82,7 +82,7 @@ Choosing one of these frameworks will have the following effects on your workspa
4. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration):
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration):
{% tabs %}
{% tab label="Angular" %}
@ -210,8 +210,8 @@ Here's more information on common migration scenarios for Storybook with Nx. For
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)
- [Storybook 7 migration generator](/packages/storybook/generators/migrate-7)
- [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup)
- [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7)
- [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup)
## Older documentation

8
docs/shared/packages/storybook/storybook-7-setup.md
View File

@ -7,17 +7,17 @@ description: This guide explains how you can set up Storybook version 7 in your
Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the [Storybook 7.0.0 release article](https://storybook.js.org/blog/storybook-7-0/). Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the [Storybook 7 migration docs](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) and the [Storybook 7.0.0 migration guide](https://storybook.js.org/docs/react/migration-guide).
Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7.
Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files. Nx also provides a [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7) that you can use to migrate your existing Storybook configuration to version 7.
So, let's see how you can use Storybook 7 on your Nx workspace.
## Migrate your existing workspace to Storybook 7
If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/packages/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7.
If you already have Storybook configured in your Nx workspace, you can use the [Storybook 7 migrator generator](/nx-api/storybook/generators/migrate-7) to migrate your existing Storybook configuration to version 7.
## Set up Storybook 7 in a _new_ Nx Workspace
Please read the [`@nx/storybook` package overview](/packages/storybook) to see how you can configure Storybook in your Nx workspace.
Please read the [`@nx/storybook` package overview](/nx-api/storybook) to see how you can configure Storybook in your Nx workspace.
## Changes from the v6.5 Storybook configuration
@ -32,7 +32,7 @@ The Storybook configuration generated by Nx for Storybook 7 is very similar to t
### Changes in the `storybook` and `build-storybook` targets
- The `uiFramework` field is not needed any more, thus it is not set. Nx was using the `uiFramework` field to load any framework specific options for the Storybook builder. This is no longer needed, since the `framework` set in `.storybook/main.js|ts` takes care of that.
- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nx/storybook:storybook`](/packages/storybook/executors/storybook) and [`@nx/storybook:build`](/packages/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.
- More options from the Storybook CLI are now exposed in the executors. You can see these in the [`@nx/storybook:storybook`](/nx-api/storybook/executors/storybook) and [`@nx/storybook:build`](/nx-api/storybook/executors/build) executor schemas. You can read more about these options in the [Storybook 7 CLI docs](https://storybook.js.org/docs/7.0/react/api/cli-options). If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.
## Report any issues and bugs

8
docs/shared/packages/vite/set-up-vite-manually.md
View File

@ -6,14 +6,14 @@ description: This guide explains how you can manually set up your project to use
# Manually set up your project to use Vite.js
{% callout type="note" title="Use our generator!" %}
It is recommended that you use the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator to do convert an existing project to use [Vite](https://vitejs.dev/).
It is recommended that you use the [`@nx/vite:configuration`](/nx-api/vite/generators/configuration) generator to do convert an existing project to use [Vite](https://vitejs.dev/).
{% /callout %}
You can use the `@nx/vite:dev-server`,`@nx/vite:build` and `@nx/vite:test` executors to serve, build and test your project using [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/). To do this, you need to make a few adjustments to your project. It is recommended that you use the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator to do this, but you can also do it manually.
You can use the `@nx/vite:dev-server`,`@nx/vite:build` and `@nx/vite:test` executors to serve, build and test your project using [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/). To do this, you need to make a few adjustments to your project. It is recommended that you use the [`@nx/vite:configuration`](/nx-api/vite/generators/configuration) generator to do this, but you can also do it manually.
A reason you may need to do this manually, is if our generator does not support conversion for your project, or if you want to experiment with custom options.
The list of steps below assumes that your project can be converted to use the `@nx/vite` executors. However, if it's not supported by the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator, it's likely that your project will not work as expected when converted. So, proceed with caution and always commit your code before making any changes.
The list of steps below assumes that your project can be converted to use the `@nx/vite` executors. However, if it's not supported by the [`@nx/vite:configuration`](/nx-api/vite/generators/configuration) generator, it's likely that your project will not work as expected when converted. So, proceed with caution and always commit your code before making any changes.
## 1. Change the executors in your `project.json`
@ -43,7 +43,7 @@ In your app's `project.json` file, change the executor of your `serve` target to
```
{% callout type="note" title="Other options" %}
Any extra options that you may need to add to your server's configuration can be added in your project's `vite.config.ts` file. You can find all the options that are supported in the [Vite.js documentation](https://vitejs.dev/config/). You can see which of these options you can add in your `project.json` in the [`@nx/vite:dev-server`](/packages/vite/executors/dev-server#options) documentation.
Any extra options that you may need to add to your server's configuration can be added in your project's `vite.config.ts` file. You can find all the options that are supported in the [Vite.js documentation](https://vitejs.dev/config/). You can see which of these options you can add in your `project.json` in the [`@nx/vite:dev-server`](/nx-api/vite/executors/dev-server#options) documentation.
{% /callout %}
### The `build` target

4
docs/shared/packages/vite/vite-plugin.md
View File

@ -38,7 +38,7 @@ There is a number of ways to use Vite in your existing workspace.
### Generate a new project using Vite
You can generate a [React](/packages/react) application or library or a [Web](/packages/web) application that uses Vite.js. The [`@nx/react:app`](/packages/react/generators/application), [`@nx/react:lib`](/packages/react/generators/library) and [`@nx/web:app`](/packages/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin.
You can generate a [React](/nx-api/react) application or library or a [Web](/nx-api/web) application that uses Vite.js. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/react:lib`](/nx-api/react/generators/library) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin.
To generate a React application using Vite.js, run the following:
@ -62,7 +62,7 @@ nx g @nx/web:app my-app --bundler=vite
You can use the `@nx/vite:configuration` generator to change your React or Web project to use Vite.js. This generator will modify your project's configuration to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin..
You can read more about this generator on the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator page.
You can read more about this generator on the [`@nx/vite:configuration`](/nx-api/vite/generators/configuration) generator page.
### Initialize Vite.js

8
docs/shared/packages/web/web-plugin.md
View File

@ -35,12 +35,12 @@ The application uses no framework and generates with web components. You can add
To start the application in development mode, run `nx serve my-new-app`.
{% callout type="note" title="React" %}
If you are looking to add a React application, check out the [React plugin](/packages/react).
If you are looking to add a React application, check out the [React plugin](/nx-api/react).
{% /callout %}
### Creating Libraries
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/packages/js) plugin.
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/nx-api/js) plugin.
```shell
nx g @nx/js:lib my-new-lib
@ -98,5 +98,5 @@ The library in `dist` is publishable to npm or a private registry.
## More Documentation
- [Using Cypress](/packages/cypress)
- [Using Jest](/packages/jest)
- [Using Cypress](/nx-api/cypress)
- [Using Jest](/nx-api/jest)

2
docs/shared/packages/webpack/plugin-overview.md
View File

@ -27,7 +27,7 @@ npx create-nx-workspace@latest --preset=react-monorepo --bundler=webpack
## Generate a new project using Webpack
You can generate a [React](/packages/react) application or a [Web](/packages/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/packages/react/generators/application), [`@nx/node:app`](/packages/node/generators/application) and [`@nx/web:app`](/packages/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
You can generate a [React](/nx-api/react) application or a [Web](/nx-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/nx-api/react/generators/application), [`@nx/node:app`](/nx-api/node/generators/application) and [`@nx/web:app`](/nx-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin.
To generate a React application using Webpack, run the following:

10
docs/shared/packages/workspace/workspace-plugin.md
View File

@ -9,7 +9,7 @@ Codifying your organization's best practices into local generators is a great wa
## Reorganizing Projects
After some time of working within a workspace, projects might need to be moved or sometimes even removed.
The workspace plugin provides the [`@nx/workspace:move`](/packages/workspace/generators/move) and [`@nx/workspace:remove`](/packages/workspace/generators/remove) generators to help aid with this.
The workspace plugin provides the [`@nx/workspace:move`](/nx-api/workspace/generators/move) and [`@nx/workspace:remove`](/nx-api/workspace/generators/remove) generators to help aid with this.
### Moving Projects
@ -24,7 +24,7 @@ Moving the files manually can be done easily but a lot of steps are often missed
5. Paths in target options such as output path will be changed
6. Other configuration will be updated too, such as `extends` in `tsconfig.json`, the name of the project in `jest.config.js`, and the extends in `.eslintrc.json`
> See more about [`@nx/workspace:move`](/packages/workspace/generators/move)
> See more about [`@nx/workspace:move`](/nx-api/workspace/generators/move)
### Removing Projects
@ -37,12 +37,12 @@ Like when moving projects, some steps are often missed when removing projects. T
3. The project's configuration will be removed.
4. The path mapping in `tsconfig.base.json` will be removed.
> See more about [`@nx/workspace:remove`](/packages/workspace/generators/remove)
> See more about [`@nx/workspace:remove`](/nx-api/workspace/generators/remove)
## Running custom commands
Executors provide an optimized way of running targets but unfortunately, not every target has an executor written for it. The [`nx:run-commands`](/packages/nx/executors/run-commands) executor is an executor that runs any command or multiple commands in the shell. This can be useful when integrating with other tools which do not have an executor provided. There is also a generator to help configure this executor.
Executors provide an optimized way of running targets but unfortunately, not every target has an executor written for it. The [`nx:run-commands`](/nx-api/nx/executors/run-commands) executor is an executor that runs any command or multiple commands in the shell. This can be useful when integrating with other tools which do not have an executor provided. There is also a generator to help configure this executor.
Running `nx g @nx/workspace:run-commands printhello --project my-feature-lib --command 'echo hello'` will create a `my-feature-lib:printhello` target that executes `echo hello` in the shell.
> See more about [`nx:run-commands`](/packages/nx/executors/run-commands)
> See more about [`nx:run-commands`](/nx-api/nx/executors/run-commands)

2
docs/shared/plugin-features/use-code-generators.md
View File

@ -12,7 +12,7 @@ There are three main types of generators:
## Invoking Plugin Generators
Generators allow you to create or modify your codebase in a simple and repeatable way. Generators are invoked using the [`nx generate`](/packages/nx/documents/generate) command.
Generators allow you to create or modify your codebase in a simple and repeatable way. Generators are invoked using the [`nx generate`](/nx-api/nx/documents/generate) command.
```shell
nx generate [plugin]:[generator-name] [options]

4
docs/shared/plugin-features/use-task-executors.md
View File

@ -56,7 +56,7 @@ Each executor definition has an `executor` property and, optionally, an `options
## Running executors
The [`nx run`](/packages/nx/documents/run) cli command (or the shorthand versions) can be used to run executors.
The [`nx run`](/nx-api/nx/documents/run) cli command (or the shorthand versions) can be used to run executors.
```shell
nx run [project]:[command]
@ -102,7 +102,7 @@ If defining a new target that needs to run a single shell command, there is a sh
}
```
For more info, see the [run-commands documentation](/packages/nx/executors/run-commands)
For more info, see the [run-commands documentation](/nx-api/nx/executors/run-commands)
## Use Executor Configurations

2
docs/shared/plugins/intro.md
View File

@ -17,7 +17,7 @@ Nx plugins help you scaffold new projects, pre-configure tooling, follow best pr
{% cards cols="2" %}
{% card title="Browse Existing Plugins" description="Find a plugin to use" url="/extending-nx/registry" /%}
{% card title="Browse Existing Plugins" description="Find a plugin to use" url="/plugin-registry" /%}
{% card title="Use Task Executors" description="Run operations on your code" url="/core-features/plugin-features/use-task-executors" /%}
{% card title="Use Code Generators" description="Create or modify code" url="/core-features/plugin-features/use-code-generators" /%}

2
docs/shared/react-tutorial/react-monorepo.md
View File

@ -308,7 +308,7 @@ nx g @nx/react:library orders --directory=libs/orders --unitTestRunner=vitest --
nx g @nx/react:library shared-ui --directory=libs/shared/ui --unitTestRunner=vitest --bundler=none
```
Note how we type out the full path in the `directory` flag to place the libraries into a subfolder. You can choose whatever folder structure you like to organize your projects. If you change your mind later, you can run the [move generator](/packages/workspace/generators/move) to move a project to a different folder.
Note how we type out the full path in the `directory` flag to place the libraries into a subfolder. You can choose whatever folder structure you like to organize your projects. If you change your mind later, you can run the [move generator](/nx-api/workspace/generators/move) to move a project to a different folder.
Running the above commands should lead to the following directory structure:

4
docs/shared/recipes/add-stack/add-astro.md
View File

@ -59,7 +59,7 @@ Because Nx [understands package.json scripts](/reference/project-configuration#p
nx build
```
If you plan on using your package manager to run the tasks, then you'll want to use [`nx exec`](/packages/nx/documents/exec) to wrap the command
If you plan on using your package manager to run the tasks, then you'll want to use [`nx exec`](/nx-api/nx/documents/exec) to wrap the command
i.e.
@ -77,7 +77,7 @@ If you plan to only run tasks with the Nx CLI, then you can omit `nx exec`. The
## Using Other Plugins
With Nx plugins, you can create projects to help break out functionality of the project. For example, using the [`@nx/js:library`](/packages/js/generators/library#@nx/js:library) to contain our reusable `.astro` components.
With Nx plugins, you can create projects to help break out functionality of the project. For example, using the [`@nx/js:library`](/nx-api/js/generators/library#@nx/js:library) to contain our reusable `.astro` components.
Install `@nx/js` plugin.

4
docs/shared/recipes/add-stack/add-express.md
View File

@ -107,6 +107,6 @@ Now when you serve your API, you'll see the content from the library being displ
## More Documentation
- [@nx/express](/packages/express)
- [@nx/js](/packages/js)
- [@nx/express](/nx-api/express)
- [@nx/js](/nx-api/js)
- [Express](https://expressjs.com/)

2
docs/shared/recipes/add-stack/add-fastify.md
View File

@ -110,7 +110,7 @@ Now when you serve your API, you'll see the content from the library being displ
## More Documentation
- [@nx/node](/packages/node)
- [@nx/node](/nx-api/node)
- [Using Mongo with Fastify](/showcase/example-repos/mongo-fastify)
- [Using Redis with Fastify](/showcase/example-repos/redis-fastify)
- [Using Postgres with Fastify](/showcase/example-repos/postgres-fastify)

4
docs/shared/recipes/add-stack/add-lit.md
View File

@ -209,6 +209,6 @@ Now when you serve your application, you'll see the content from the library bei
## More Documentation
- [@nx/esbuild](/packages/esbuild)
- [@nx/js](/packages/js)
- [@nx/esbuild](/nx-api/esbuild)
- [@nx/js](/nx-api/js)
- [Lit](https://lit.dev/)

6
docs/shared/recipes/add-stack/add-solid.md
View File

@ -312,7 +312,7 @@ Now when you serve your application, you'll see the content from the library bei
## More Documentation
- [@nx/vite](/packages/vite)
- [@nx/js](/packages/js)
- [@nx/web](/packages/web)
- [@nx/vite](/nx-api/vite)
- [@nx/js](/nx-api/js)
- [@nx/web](/nx-api/web)
- [Solid](https://www.solidjs.com/)

2
docs/shared/recipes/add-stack/add-svelte.md
View File

@ -338,6 +338,6 @@ To serve the application at `http://localhost:4200`.
A larger example including libraries, test and more is available at [Nx Svelte Example](https://github.com/nrwl/nx-recipes/tree/main/svelte) on Github.
- [Nx Vite Plugin](https://nx.dev/packages/vite)
- [Nx Vite Plugin](/nx-api/vite)
- [Vite](https://vitejs.dev/)
- [Svelte](https://svelte.dev/)

4
docs/shared/recipes/add-stack/add-vue.md
View File

@ -6,7 +6,7 @@ The code for this example is available on Github:
**Supported Features**
We'll be using an Nx plugin for Vue called [@nx/vite](https://nx.dev/packages/vite). Although we are using `@nx/vite`, not all dependencies will be able to be automatically updated. So we'll have to update any framework dependencies as needed.
We'll be using an Nx plugin for Vue called [@nx/vite](/nx-api/vite). Although we are using `@nx/vite`, not all dependencies will be able to be automatically updated. So we'll have to update any framework dependencies as needed.
{% pill url="/core-features/run-tasks" %}✅ Run Tasks{% /pill %}
{% pill url="/core-features/cache-task-results" %}✅ Cache Task Results{% /pill %}
@ -299,6 +299,6 @@ nx serve acme
A larger example including libraries, tests, and more is available at [Nx Vue Example](https://github.com/nrwl/nx-recipes/tree/main/vue) on Github.
- [Nx Vite Plugin](https://nx.dev/packages/vite)
- [Nx Vite Plugin](/nx-api/vite)
- [Vite](https://vitejs.dev/)
- [Vue](https://v3.vuejs.org/)

2
docs/shared/recipes/generators/local-generators.md
View File

@ -116,4 +116,4 @@ Nx uses the paths from `tsconfig.base.json` when running plugins locally, but us
## Generator Utilities
The [`@nx/devkit` package](/packages/devkit/documents/nx_devkit) provides many utility functions that can be used in generators to help with modifying files, reading and updating configuration files, and working with an Abstract Syntax Tree (AST).
The [`@nx/devkit` package](/nx-api/devkit/documents/nx_devkit) provides many utility functions that can be used in generators to help with modifying files, reading and updating configuration files, and working with an Abstract Syntax Tree (AST).

2
docs/shared/recipes/node/wait-for-tasks.md
View File

@ -4,7 +4,7 @@ There are a couple ways to ensure that a set up task has been run before you run
The most common solution is to use the [`dependsOn` property](/reference/project-configuration#dependson). This works regardless of what executor the task is using. Once the dependent tasks have completed, the primary task will start. Reference the [project configuration documentation](/reference/project-configuration#dependson) for more information.
If you are using the `@nx/js:node` executor, you can also use the [`waitUntilTargets` option](/packages/js/executors/node#waituntiltargets) of that executor. Once the dependent tasks emit something to the console, the primary task will start.
If you are using the `@nx/js:node` executor, you can also use the [`waitUntilTargets` option](/nx-api/js/executors/node#waituntiltargets) of that executor. Once the dependent tasks emit something to the console, the primary task will start.
## waitUntilTargets

2
docs/shared/recipes/plugins/compose-executors.md
View File

@ -69,7 +69,7 @@ The `runExecutor` utility will find the target in the configuration, find the ex
| readTargetOptions | Reads and combines options for a given target |
| runExecutor | Constructs options and invokes an executor |
See more helper functions in the [Devkit API Docs](/packages/devkit/documents/nx_devkit#functions)
See more helper functions in the [Devkit API Docs](/nx-api/devkit/documents/nx_devkit#functions)
## Using RxJS observables

2
docs/shared/recipes/plugins/create-install-package.md
View File

@ -111,7 +111,7 @@ Because your `create-my-plugin` package will install your plugin package at runt
}
```
_(If you don't have such a `local-registry` target, refer to the following [docs page to generate one](/packages/js/generators/setup-verdaccio))_
_(If you don't have such a `local-registry` target, refer to the following [docs page to generate one](/nx-api/js/generators/setup-verdaccio))_
By running

2
docs/shared/recipes/plugins/create-preset.md
View File

@ -1,6 +1,6 @@
# Create a Custom Plugin Preset
When you create a new nx workspace, you run the command: [`npx create-nx-workspace`](/packages/nx/documents/create-nx-workspace).
When you create a new nx workspace, you run the command: [`npx create-nx-workspace`](/nx-api/nx/documents/create-nx-workspace).
This command accepts a `--preset` option, for example: `npx create-nx-workspace --preset=react-standalone`.
This preset option is pointing to a special generator function (remember, a generator is a function that simplifies an entire code generation script into a single function) that Nx will call when this `npx create-nx-workspace` command is run, that will generate your initial workspace.

4
docs/shared/recipes/plugins/project-graph-plugins.md
View File

@ -34,7 +34,7 @@ You can register a plugin by adding it to the plugins array in `nx.json`:
## Adding New Nodes to the Project Graph
You can add nodes to the project graph with [`createNodes`](/packages/devkit/documents/CreateNodes). This is the API that Nx uses under the hood to identify Nx projects coming from a `project.json` file or a `package.json` that's listed in a package manager's workspaces section.
You can add nodes to the project graph with [`createNodes`](/nx-api/devkit/documents/CreateNodes). This is the API that Nx uses under the hood to identify Nx projects coming from a `project.json` file or a `package.json` that's listed in a package manager's workspaces section.
### Identifying Projects
@ -85,7 +85,7 @@ External nodes are identified by a unique name, and if plugins identify an exter
It's more common for plugins to create new dependencies. First-party code contained in the workspace is added to the project graph automatically. Whether your project contains TypeScript or say Java, both projects will be created in the same way. However, Nx does not know how to analyze Java sources, and that's what plugins can do.
The shape of the [`createDependencies`](/packages/devkit/documents/CreateDependencies) function follows:
The shape of the [`createDependencies`](/nx-api/devkit/documents/CreateDependencies) function follows:
```typescript
export type CreateDependencies = (

2
docs/shared/recipes/root-level-scripts.md
View File

@ -114,4 +114,4 @@ You can keep using `npm run docs` instead of the new `npx nx docs` version and s
}
```
Read more in the [Nx exec docs](/packages/nx/documents/exec).
Read more in the [Nx exec docs](/nx-api/nx/documents/exec).

2
docs/shared/recipes/storybook/angular-configuring-styles.md
View File

@ -6,7 +6,7 @@ description: This document explains how to configure styles and preprocessor opt
# Configuring styles and preprocessor options for Angular projects with a Storybook configuration
{% callout type="note" title="Note" %}
This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
This documentation page contains information about the [Storybook plugin](/nx-api/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
{% /callout %}
Angular supports including extra entry-point files for styles. Also, in case you use Sass, you can add extra base paths that will be checked for imports. In your project's `project.json` file you can use the `styles` and `stylePreprocessorOptions` properties in your `storybook` and `build-storybook` target `options`, as you would in your Storybook or your Angular configurations. If your project is an application, you can add these extra options in your `build` target. Your `storybook` and `build-storybook` `browserTarget` are going to be pointing to the `build` target, so they will pick up these styles from there. Check out the [Angular Workspace Configuration](https://angular.io/guide/workspace-config#styles-and-scripts-configuration) documentation for more information. You can also check the [official Storybook for Angular documentation](https://storybook.js.org/docs/angular/configure/styling-and-css) on working with styles and CSS.

4
docs/shared/recipes/storybook/angular-storybook-compodoc.md
View File

@ -6,7 +6,7 @@ description: This guide explains how to set up Compodoc for Storybook on Angular
# Set up Compodoc for Storybook on Nx
{% callout type="note" title="Note" %}
This documentation page contains information about the [Storybook plugin](/packages/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
This documentation page contains information about the [Storybook plugin](/nx-api/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
{% /callout %}
{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/storybook-compodoc-angular" /%}
@ -141,7 +141,7 @@ Let's see the result for our `web` app `storybook` target, for example (in `apps
{% callout type="warning" title="Check the version!" %}
Make sure you are on Nx version `>=14.1.8` and your `storybook` target is using `@storybook/angular:start-storybook` as the `executor` (like the example above).
If you are using an older version of Nx, you can use [`nx migrate`](/packages/nx/documents/migrate) to migrate your codebase to a later version. Using `nx migrate` will also make sure to update your `storybook` and `build-storybook` targets to match the new format.
If you are using an older version of Nx, you can use [`nx migrate`](/nx-api/nx/documents/migrate) to migrate your codebase to a later version. Using `nx migrate` will also make sure to update your `storybook` and `build-storybook` targets to match the new format.
If you **are** on Nx `>=14.1.8` and you are still using the old executor (`@nx/storybook:storybook`), you can read our documentation about the [Angular Storybook targets](/deprecated/storybook/angular-storybook-targets) to help you change your `storybook` and `build-storybook` targets across your workspace for your Angular projects using Storybook.
{% /callout %}

6
docs/shared/recipes/storybook/configuring-storybook.md
View File

@ -6,7 +6,7 @@ description: This guide explains how Storybook is configured on your Nx workspac
# Configuring Storybook on Nx
{% callout type="info" title="Best practices" %}
Read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide!
Read our [Using Storybook in a Nx workspace - Best practices](/nx-api/storybook/documents/best-practices) guide!
{% /callout %}
Starting with version 15.7, Nx is no longer generating a root Storybook directory and shared root Storybook configurations. Instead, it is only generating a Storybook configuration for each project in your workspace. You may still manually create a root Storybook configuration file, if it is needed for your use case.
@ -44,6 +44,6 @@ In all the other cases, Nx will not interfere with your Storybook setup.
## Read our guides for Configuring Storybook
You can read all our guides for configuring Storybook in our [Storybook documents page](/packages/storybook/documents).
You can read all our guides for configuring Storybook in our [Storybook documents page](/nx-api/storybook/documents).
Please also make sure to read our [Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide, where you can find some best practices for using Storybook in a Nx workspace.
Please also make sure to read our [Using Storybook in a Nx workspace - Best practices](/nx-api/storybook/documents/best-practices) guide, where you can find some best practices for using Storybook in a Nx workspace.

4
docs/shared/recipes/storybook/interaction-tests.md
View File

@ -15,7 +15,7 @@ You can read more about Storybook interaction tests in the following sections of
- [The `play` function](https://storybook.js.org/docs/react/writing-stories/play-function)
{% callout type="warning" title="Set up Storybook in your workspace" %}
You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/packages/storybook) to get started.
You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/nx-api/storybook) to get started.
{% /callout %}
## Setup Storybook Interaction Tests
@ -50,7 +50,7 @@ nx g @nx/storybook:configuration project-name --interactionTests=true
This command will:
- [Set up Storybook for your project](/packages/storybook) - including the `@storybook/addon-interactions` addon.
- [Set up Storybook for your project](/nx-api/storybook) - including the `@storybook/addon-interactions` addon.
- Add a `play` function to your stories.
- Install the necessary dependencies.
- Generate a `test-storybook` target in your project's `project.json`, which has a command to invoke the Storybook test runner.

4
docs/shared/recipes/storybook/one-storybook-for-all.md
View File

@ -6,7 +6,7 @@ description: Dive into a comprehensive guide on how to consolidate all your Stor
# Publishing Storybook: One main Storybook instance for all projects
This guide extends the
[Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one single Storybook for your workspace.
[Using Storybook in a Nx workspace - Best practices](/nx-api/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one single Storybook for your workspace.
This case would work if all your projects (applications and libraries) containing stories that you want to use are using the same framework (Angular, React, Vue, etc). The reason is that you will be importing the stories in a central host Storybook's `.storybook/main.js`, and we will be using one specific builder to build that Storybook. Storybook does not support mixing frameworks in the same Storybook instance.
@ -32,7 +32,7 @@ Now, you have a new library, which will act as a shell/host for all your stories
### Configure the new library to use Storybook
Now let’s configure our new library to use Storybook, using the [`@nx/storybook:configuration` generator](/packages/storybook/generators/configuration). Run:
Now let’s configure our new library to use Storybook, using the [`@nx/storybook:configuration` generator](/nx-api/storybook/generators/configuration). Run:
```shell
nx g @nx/storybook:configuration storybook-host

2
docs/shared/recipes/storybook/one-storybook-per-scope.md
View File

@ -6,7 +6,7 @@ description: Learn how to set up individual Storybook instances for each scope w
# Publishing Storybook: One Storybook instance per scope
This guide extends the
[Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one Storybook per scope (eg. theme, app, framework) for your workspace.
[Using Storybook in a Nx workspace - Best practices](/nx-api/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one Storybook per scope (eg. theme, app, framework) for your workspace.
Sometimes, you have multiple apps and libraries, and each of these is associated with a specific scope. You can read more about grouping libraries and scoping them in the [Library Types](/concepts/more-concepts/library-types) documentation page, and also in the [Code Organization and Naming Conventions](/concepts/more-concepts/monorepo-nx-enterprise#code-organization-&-naming-conventions) documentation section.

2
docs/shared/recipes/storybook/one-storybook-with-composition.md
View File

@ -6,7 +6,7 @@ description: Dive into the comprehensive guide on publishing a unified Storybook
# Publishing Storybook: One main Storybook instance using Storybook Composition
This guide extends the
[Using Storybook in a Nx workspace - Best practices](/packages/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one single Storybook for your workspace, even you are using multiple frameworks, taking advantage of [Storybook Composition](/recipes/storybook/storybook-composition-setup).
[Using Storybook in a Nx workspace - Best practices](/nx-api/storybook/documents/best-practices) guide. In that guide, we discussed the best practices of using Storybook in a Nx workspace. We explained the main concepts and the mental model of how to best set up Storybook. In this guide, we are going to see how to put that into practice, by looking at a real-world example. We are going to see how you can publish one single Storybook for your workspace, even you are using multiple frameworks, taking advantage of [Storybook Composition](/recipes/storybook/storybook-composition-setup).
In this case, we are dealing with a Nx workspace that uses multiple frameworks. Essentially, you would need to have one Storybook host for each of the frameworks, containing all the stories of that specific framework, since the Storybook builder can not handle multiple frameworks simultaneously.

18
docs/shared/recipes/storybook/plugin-angular.md
View File

@ -8,12 +8,12 @@ description: This guide explains how to set up Storybook for Angular projects in
This guide will walk you through setting up [Storybook](https://storybook.js.org) for Angular projects in your Nx workspace.
{% callout type="warning" title="Set up Storybook in your workspace" %}
You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/packages/storybook) to get started.
You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/nx-api/storybook) to get started.
{% /callout %}
## Generate Storybook Configuration for an Angular project
You can generate Storybook configuration for an individual Angular project by using the [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration), like this:
You can generate Storybook configuration for an individual Angular project by using the [`@nx/angular:storybook-configuration` generator](/nx-api/angular/generators/storybook-configuration), like this:
```shell
nx g @nx/angular:storybook-configuration project-name
@ -21,7 +21,7 @@ nx g @nx/angular:storybook-configuration project-name
## Auto-generate Stories
The [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration) has the option to automatically generate `*.stories.ts` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).
The [`@nx/angular:storybook-configuration` generator](/nx-api/angular/generators/storybook-configuration) has the option to automatically generate `*.stories.ts` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).
```text
<some-folder>/
@ -29,7 +29,7 @@ The [`@nx/angular:storybook-configuration` generator](/packages/angular/generato
└── my.component.stories.ts
```
If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/angular:stories` generator](/packages/angular/generators/stories):
If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/angular:stories` generator](/nx-api/angular/generators/stories):
```shell
nx g @nx/angular:stories --project=<project-name>
@ -75,7 +75,7 @@ and the result would be the following:
## Cypress tests for Stories
The [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration) gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.
The [`@nx/angular:storybook-configuration` generator](/nx-api/angular/generators/storybook-configuration) gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.
To launch Storybook and run the Cypress tests against the iframe inside of Storybook:
@ -99,7 +99,7 @@ Let's take for a example a library in your workspace, under `libs/feature/ui`, c
### Story file
The [`@nx/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration) would generate a Story file that looks like this:
The [`@nx/angular:storybook-configuration` generator](/nx-api/angular/generators/storybook-configuration) would generate a Story file that looks like this:
```typescript {% fileName="libs/feature/ui/src/lib/my-button/my-button.component.stories.ts" %}
import { Meta } from '@storybook/angular';
@ -149,7 +149,7 @@ Depending on your Cypress version, the file will end with `.spec.ts` or `.cy.ts`
- [Configuring styles and preprocessor options](/recipes/storybook/angular-configuring-styles)
- [The `browserTarget`](/deprecated/storybook/angular-browser-target)
You can find all Storybook-related Nx topics [here](/packages#storybook).
You can find all Storybook-related Nx topics [here](/nx-api#storybook).
For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/angular/get-started/introduction).
@ -157,8 +157,8 @@ For more on using Storybook, see the [official Storybook documentation](https://
Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/)
- [Set up Storybook version 7](/packages/storybook/documents/storybook-7-setup)
- [Migrate to Storybook version 7](/packages/storybook/generators/migrate-7)
- [Set up Storybook version 7](/nx-api/storybook/documents/storybook-7-setup)
- [Migrate to Storybook version 7](/nx-api/storybook/generators/migrate-7)
#### Older migration scenarios

20
docs/shared/recipes/storybook/plugin-react.md
View File

@ -8,12 +8,12 @@ description: This guide explains how to set up Storybook for React projects in y
This guide will walk you through setting up [Storybook](https://storybook.js.org) for React projects in your Nx workspace.
{% callout type="warning" title="Set up Storybook in your workspace" %}
You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/packages/storybook) to get started.
You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/nx-api/storybook) to get started.
{% /callout %}
## Generate Storybook Configuration for a React project
You can generate Storybook configuration for an individual React project by using the [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration), like this:
You can generate Storybook configuration for an individual React project by using the [`@nx/react:storybook-configuration` generator](/nx-api/react/generators/storybook-configuration), like this:
```shell
nx g @nx/react:storybook-configuration project-name
@ -21,7 +21,7 @@ nx g @nx/react:storybook-configuration project-name
## Nx React Storybook Preset
The [`@nx/react`](/packages/react) package ships with a Storybook addon to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the addon to your configuration.
The [`@nx/react`](/nx-api/react) package ships with a Storybook addon to make sure it uses the very same configuration as your Nx React application. When you generate a Storybook configuration for a project, it'll automatically add the addon to your configuration.
```typescript
module.exports = {
@ -33,7 +33,7 @@ module.exports = {
## Auto-generate Stories
The [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration) has the option to automatically generate `*.stories.ts|tsx` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).
The [`@nx/react:storybook-configuration` generator](/nx-api/react/generators/storybook-configuration) has the option to automatically generate `*.stories.ts|tsx` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).
```text
<some-folder>/
@ -41,7 +41,7 @@ The [`@nx/react:storybook-configuration` generator](/packages/react/generators/s
└── my-component.stories.tsx
```
If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/react:stories` generator](/packages/react/generators/stories):
If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/react:stories` generator](/nx-api/react/generators/stories):
```shell
nx g @nx/react:stories --project=<project-name>
@ -87,7 +87,7 @@ and the result would be the following:
## Cypress tests for Stories
The [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration) gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.
The [`@nx/react:storybook-configuration` generator](/nx-api/react/generators/storybook-configuration) gives the option to set up an e2e Cypress app that is configured to run against the project's Storybook instance.
To launch Storybook and run the Cypress tests against the iframe inside of Storybook:
@ -111,7 +111,7 @@ Let's take for a example a library in your workspace, under `libs/feature/ui`, c
### Story file
The [`@nx/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration) would generate a Story file that looks like this:
The [`@nx/react:storybook-configuration` generator](/nx-api/react/generators/storybook-configuration) would generate a Story file that looks like this:
```typescript {% fileName="libs/feature/ui/src/lib/my-button/my-button.stories.tsx" %}
import type { Meta } from '@storybook/react';
@ -154,7 +154,7 @@ Depending on your Cypress version, the file will end with `.spec.ts` or `.cy.ts`
## More Documentation
You can find all Storybook-related Nx topics [here](/packages#storybook).
You can find all Storybook-related Nx topics [here](/nx-api#storybook).
For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/react/get-started/introduction).
@ -162,8 +162,8 @@ For more on using Storybook, see the [official Storybook documentation](https://
Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/)
- [Set up Storybook version 7](/packages/storybook/documents/storybook-7-setup)
- [Migrate to Storybook version 7](/packages/storybook/generators/migrate-7)
- [Set up Storybook version 7](/nx-api/storybook/documents/storybook-7-setup)
- [Migrate to Storybook version 7](/nx-api/storybook/generators/migrate-7)
#### Older migration scenarios

Some files were not shown because too many files have changed in this diff Show More