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

docs(core): document the @nrwl => @nx rescope (#16403)

Browse Source 
Co-authored-by: FrozenPandaz <jasonjean1993@gmail.com>
This commit is contained in:
Isaac Mann 2023-04-27 18:14:59 -04:00 committed by GitHub
parent f537a4caeb
commit afa5eb59fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
339 changed files with 2621 additions and 2445 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/generated/cli/generate.md
View File

@ -24,43 +24,43 @@ Install `nx` globally to invoke the command directly using `nx`, or use `npx nx`
Generate a new Angular application:
```shell
nx generate @nrwl/angular:app myapp
nx generate @nx/angular:app myapp
```
Generate a new React application:
```shell
nx generate @nrwl/react:app myapp
nx generate @nx/react:app myapp
```
Generate a new web component application:
```shell
nx generate @nrwl/web:app myapp
nx generate @nx/web:app myapp
```
Generate a new Node application:
```shell
nx generate @nrwl/node:app myapp
nx generate @nx/node:app myapp
```
Generate a new Angular library application:
```shell
nx generate @nrwl/angular:library mylibrary
nx generate @nx/angular:library mylibrary
```
Generate a new React library application:
```shell
nx generate @nrwl/react:library mylibrary
nx generate @nx/react:library mylibrary
```
Generate a new Node library application:
```shell
nx generate @nrwl/node:library mylibrary
nx generate @nx/node:library mylibrary
```
## Options

4
docs/generated/cli/list.md
View File

@ -23,10 +23,10 @@ List the plugins installed in the current workspace:
nx list
```
List the generators and executors available in the `@nrwl/web` plugin if it is installed (If the plugin is not installed `nx` will show advice on how to add it to your workspace):
List the generators and executors available in the `@nx/web` plugin if it is installed (If the plugin is not installed `nx` will show advice on how to add it to your workspace):
```shell
nx list @nrwl/web
nx list @nx/web
```
## Options

18
docs/generated/cli/migrate.md
View File

@ -2,7 +2,7 @@
title: 'migrate - CLI command'
description:
'Creates a migrations file or runs migrations from the migrations file.
- Migrate packages and create migrations.json (e.g., nx migrate @nrwl/workspace@latest)
- Migrate packages and create migrations.json (e.g., nx migrate @nx/workspace@latest)
- Run migrations (e.g., nx migrate --run-migrations=migrations.json). Use flag --if-exists to run migrations only if the migrations file exists.'
---
@ -10,7 +10,7 @@ description:
Creates a migrations file or runs migrations from the migrations file.
- Migrate packages and create migrations.json (e.g., nx migrate @nrwl/workspace@latest)
- Migrate packages and create migrations.json (e.g., nx migrate @nx/workspace@latest)
- Run migrations (e.g., nx migrate --run-migrations=migrations.json). Use flag --if-exists to run migrations only if the migrations file exists.
## Usage
@ -35,16 +35,16 @@ Update all Nx plugins to "9.0.0". This will generate migrations.json:
nx migrate 9.0.0
```
Update @nrwl/workspace and generate the list of migrations starting with version 8.0.0 of @nrwl/workspace and @nrwl/node, regardless of what is installed locally:
Update @nx/workspace and generate the list of migrations starting with version 8.0.0 of @nx/workspace and @nx/node, regardless of what is installed locally:
```shell
nx migrate @nrwl/workspace@9.0.0 --from="@nrwl/workspace@8.0.0,@nrwl/node@8.0.0"
nx migrate @nx/workspace@9.0.0 --from="@nx/workspace@8.0.0,@nx/node@8.0.0"
```
Update @nrwl/workspace to "9.0.0". If it tries to update @nrwl/react or @nrwl/angular, use version "9.0.1":
Update @nx/workspace to "9.0.0". If it tries to update @nx/react or @nx/angular, use version "9.0.1":
```shell
nx migrate @nrwl/workspace@9.0.0 --to="@nrwl/react@9.0.1,@nrwl/angular@9.0.1"
nx migrate @nx/workspace@9.0.0 --to="@nx/react@9.0.1,@nx/angular@9.0.1"
```
Update another-package to "12.0.0". This will update other packages and will generate migrations.json file:
@ -107,7 +107,7 @@ Exclude migrations that should have been applied on previous updates. To be used
Type: `string`
Use the provided versions for packages instead of the ones installed in node_modules (e.g., --from="@nrwl/react@12.0.0,@nrwl/js@12.0.0")
Use the provided versions for packages instead of the ones installed in node_modules (e.g., --from="@nx/react@12.0.0,@nx/js@12.0.0")
### help
@ -135,7 +135,7 @@ Enable prompts to confirm whether to collect optional package updates and migrat
Type: `string`
The target package and version (e.g, @nrwl/workspace@13.0.0)
The target package and version (e.g, @nx/workspace@13.0.0)
### runMigrations
@ -147,7 +147,7 @@ Execute migrations from a file (when the file isn't provided, execute migrations
Type: `string`
Use the provided versions for packages instead of the ones calculated by the migrator (e.g., --to="@nrwl/react@12.0.0,@nrwl/js@12.0.0")
Use the provided versions for packages instead of the ones calculated by the migrator (e.g., --to="@nx/react@12.0.0,@nx/js@12.0.0")
### version

2
docs/generated/cli/workspace-generator.md
View File

@ -31,7 +31,7 @@ Preview the changes without updating files
Type: `string`
Name of the generator (e.g., @nrwl/js:library, library)
Name of the generator (e.g., @nx/js:library, library)
### help

16
docs/generated/devkit/ngcli_adapter.md
View File

@ -68,12 +68,12 @@ Example:
```typescript
overrideCollectionResolutionForTesting({
'@nrwl/workspace': path.join(
'@nx/workspace': path.join(
__dirname,
'../../../../workspace/generators.json'
),
'@nrwl/angular': path.join(__dirname, '../../../../angular/generators.json'),
'@nrwl/linter': path.join(__dirname, '../../../../linter/generators.json'),
'@nx/angular': path.join(__dirname, '../../../../angular/generators.json'),
'@nx/linter': path.join(__dirname, '../../../../linter/generators.json'),
});
```
@ -91,7 +91,7 @@ overrideCollectionResolutionForTesting({
### wrapAngularDevkitSchematic
▸ **wrapAngularDevkitSchematic**(`collectionName`, `generatorName`): (`host`: [`Tree`](../../devkit/documents/nrwl_devkit#tree), `generatorOptions`: { `[k: string]`: `any`; }) => `Promise`<`any`\>
▸ **wrapAngularDevkitSchematic**(`collectionName`, `generatorName`): (`host`: [`Tree`](../../devkit/documents/nx_devkit#tree), `generatorOptions`: { `[k: string]`: `any`; }) => `Promise`<`any`\>
#### Parameters
@ -108,10 +108,10 @@ overrideCollectionResolutionForTesting({
##### Parameters
| Name | Type |
| :----------------- | :------------------------------------------------ |
| `host` | [`Tree`](../../devkit/documents/nrwl_devkit#tree) |
| `generatorOptions` | `Object` |
| Name | Type |
| :----------------- | :---------------------------------------------- |
| `host` | [`Tree`](../../devkit/documents/nx_devkit#tree) |
| `generatorOptions` | `Object` |
##### Returns

866
docs/generated/devkit/nrwl_devkit.md → docs/generated/devkit/nx_devkit.md
View File

File diff suppressed because it is too large Load Diff

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

@ -1454,7 +1454,7 @@
},
{
"name": "Nx Devkit",
"path": "/packages/devkit/documents/nrwl_devkit",
"path": "/packages/devkit/documents/nx_devkit",
"id": "packages-devkit",
"isExternal": true,
"children": [],
@ -1521,7 +1521,7 @@
},
{
"name": "Nx Devkit",
"path": "/packages/devkit/documents/nrwl_devkit",
"path": "/packages/devkit/documents/nx_devkit",
"id": "packages-devkit",
"isExternal": true,
"children": [],
@ -3048,6 +3048,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Rescope Packages from @nrwl to @nx",
"path": "/recipes/other/rescope",
"id": "rescope",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Standalone NgRx APIs",
"path": "/recipes/other/standalone-ngrx-apis",
@ -3307,6 +3315,14 @@
"children": [],
"disableCollapsible": false
},
{
"name": "Rescope Packages from @nrwl to @nx",
"path": "/recipes/other/rescope",
"id": "rescope",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Standalone NgRx APIs",
"path": "/recipes/other/standalone-ngrx-apis",
@ -4314,8 +4330,8 @@
"children": [
{
"name": "Overview",
"path": "/packages/devkit/documents/nrwl_devkit",
"id": "nrwl_devkit",
"path": "/packages/devkit/documents/nx_devkit",
"id": "nx_devkit",
"isExternal": false,
"children": [],
"disableCollapsible": false

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

@ -1814,7 +1814,7 @@
"file": "",
"itemList": [],
"isExternal": true,
"path": "/packages/devkit/documents/nrwl_devkit",
"path": "/packages/devkit/documents/nx_devkit",
"tags": ["create-your-own-plugin"]
},
{
@ -1892,14 +1892,14 @@
"path": "/packages",
"tags": []
},
"/packages/devkit/documents/nrwl_devkit": {
"/packages/devkit/documents/nx_devkit": {
"id": "packages-devkit",
"name": "Nx Devkit",
"description": "",
"file": "",
"itemList": [],
"isExternal": true,
"path": "/packages/devkit/documents/nrwl_devkit",
"path": "/packages/devkit/documents/nx_devkit",
"tags": ["create-your-own-plugin"]
},
"/reference/glossary": {

56
docs/generated/manifests/packages.json
View File

@ -2,7 +2,7 @@
"angular": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "angular",
"packageName": "@nrwl/angular",
"packageName": "@nx/angular",
"description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
"documents": {
"/packages/angular/documents/overview": {
@ -396,7 +396,7 @@
"cypress": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "cypress",
"packageName": "@nrwl/cypress",
"packageName": "@nx/cypress",
"description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
"documents": {
"/packages/cypress/documents/overview": {
@ -498,7 +498,7 @@
"detox": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "detox",
"packageName": "@nrwl/detox",
"packageName": "@nx/detox",
"description": "The Nx Plugin for Detox contains executors and generators for allowing your workspace to use the powerful Detox integration testing capabilities.",
"documents": {
"/packages/detox/documents/overview": {
@ -560,19 +560,19 @@
"devkit": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "devkit",
"packageName": "@nrwl/devkit",
"packageName": "@nx/devkit",
"description": "The Nx Devkit is used to customize Nx for different technologies and use cases. It contains many utility functions for reading and writing files, updating configuration, working with Abstract Syntax Trees(ASTs), and more.",
"documents": {
"/packages/devkit/documents/nrwl_devkit": {
"id": "nrwl_devkit",
"/packages/devkit/documents/nx_devkit": {
"id": "nx_devkit",
"name": "Overview",
"description": "The Nx Devkit is used to customize Nx for different technologies and use cases. It contains many utility functions for reading and writing files, updating configuration, working with Abstract Syntax Trees(ASTs), and more.",
"file": "generated/packages/devkit/documents/nrwl_devkit",
"file": "generated/packages/devkit/documents/nx_devkit",
"itemList": [],
"isExternal": false,
"path": "/packages/devkit/documents/nrwl_devkit",
"path": "/packages/devkit/documents/nx_devkit",
"tags": [],
"originalFilePath": "generated/devkit/nrwl_devkit"
"originalFilePath": "generated/devkit/nx_devkit"
},
"/packages/devkit/documents/ngcli_adapter": {
"id": "ngcli_adapter",
@ -595,7 +595,7 @@
"esbuild": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "esbuild",
"packageName": "@nrwl/esbuild",
"packageName": "@nx/esbuild",
"description": "The Nx Plugin for esbuild contains executors and generators that support building applications using esbuild",
"documents": {
"/packages/esbuild/documents/overview": {
@ -648,7 +648,7 @@
"eslint-plugin": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "eslint-plugin",
"packageName": "@nrwl/eslint-plugin-nx",
"packageName": "@nx/eslint-plugin",
"description": "The eslint-plugin package is an ESLint plugin that contains a collection of recommended ESLint rule configurations which you can extend from in your own ESLint configs, as well as an Nx-specific lint rule called enforce-module-boundaries.",
"documents": {
"/packages/eslint-plugin/documents/overview": {
@ -683,7 +683,7 @@
"expo": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "expo",
"packageName": "@nrwl/expo",
"packageName": "@nx/expo",
"description": "The Expo Plugin for Nx contains executors and generators for managing and developing an expo application within your workspace. For example, you can directly build for different target platforms as well as generate projects and publish your code.",
"documents": {
"/packages/expo/documents/overview": {
@ -844,7 +844,7 @@
"express": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "express",
"packageName": "@nrwl/express",
"packageName": "@nx/express",
"description": "The Nx Plugin for Express contains executors and generators for allowing your workspace to create powerful Express Node applications and APIs.",
"documents": {
"/packages/express/documents/overview": {
@ -887,7 +887,7 @@
"jest": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "jest",
"packageName": "@nrwl/jest",
"packageName": "@nx/jest",
"description": "The Nx Plugin for Jest contains executors and generators allowing your workspace to use the powerful Jest testing capabilities.",
"documents": {
"/packages/jest/documents/overview": {
@ -940,7 +940,7 @@
"js": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "js",
"packageName": "@nrwl/js",
"packageName": "@nx/js",
"description": "The JS plugin for Nx contains executors and generators that provide the best experience for developing JavaScript and TypeScript projects. ",
"documents": {
"/packages/js/documents/overview": {
@ -1020,7 +1020,7 @@
"linter": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "linter",
"packageName": "@nrwl/linter",
"packageName": "@nx/linter",
"description": "The Linter plugin for Nx contains executors, generators and utilities used for linting JavaScript/TypeScript projects within an Nx workspace.",
"documents": {
"/packages/linter/documents/overview": {
@ -1073,7 +1073,7 @@
"nest": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "nest",
"packageName": "@nrwl/nest",
"packageName": "@nx/nest",
"description": "The Nx Plugin for Nest contains executors and generators for allowing your workspace to create powerful Nest best in class APIs.",
"documents": {
"/packages/nest/documents/overview": {
@ -1269,7 +1269,7 @@
"next": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "next",
"packageName": "@nrwl/next",
"packageName": "@nx/next",
"description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
"documents": {
"/packages/next/documents/overview": {
@ -1396,7 +1396,7 @@
"node": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "node",
"packageName": "@nrwl/node",
"packageName": "@nx/node",
"description": "The Node Plugin for Nx contains generators and executors to manage Node applications within an Nx workspace.",
"documents": {
"/packages/node/documents/overview": {
@ -1772,7 +1772,7 @@
"plugin": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "plugin",
"packageName": "@nrwl/nx-plugin",
"packageName": "@nx/plugin",
"description": "This plugin is used to create Nx plugins! It contains generators for generating common plugin features like generators, executors, migrations and more.",
"documents": {
"/packages/plugin/documents/overview": {
@ -1879,7 +1879,7 @@
"react": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "react",
"packageName": "@nrwl/react",
"packageName": "@nx/react",
"description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
"documents": {
"/packages/react/documents/overview": {
@ -2067,7 +2067,7 @@
"react-native": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "react-native",
"packageName": "@nrwl/react-native",
"packageName": "@nx/react-native",
"description": "The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides: \n\n-Integration with libraries such as Jest, Detox, and Storybook.\n-Scaffolding for creating buildable libraries that can be published to npm.\n-Utilities for automatic workspace refactoring.",
"documents": {
"/packages/react-native/documents/overview": {
@ -2255,7 +2255,7 @@
"rollup": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "rollup",
"packageName": "@nrwl/rollup",
"packageName": "@nx/rollup",
"description": "The Nx Plugin for Rollup contains executors and generators that support building applications using Rollup.",
"documents": {},
"root": "/packages/rollup",
@ -2296,7 +2296,7 @@
"storybook": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "storybook",
"packageName": "@nrwl/storybook",
"packageName": "@nx/storybook",
"description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.",
"documents": {
"/packages/storybook/documents/overview": {
@ -2553,7 +2553,7 @@
"vite": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "vite",
"packageName": "@nrwl/vite",
"packageName": "@nx/vite",
"description": "The Nx Plugin for building and testing applications using Vite",
"documents": {
"/packages/vite/documents/overview": {
@ -2653,7 +2653,7 @@
"web": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "web",
"packageName": "@nrwl/web",
"packageName": "@nx/web",
"description": "The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Scaffolding for creating buildable libraries that can be published to npm.\n\n- Utilities for automatic workspace refactoring.",
"documents": {
"/packages/web/documents/overview": {
@ -2715,7 +2715,7 @@
"webpack": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "webpack",
"packageName": "@nrwl/webpack",
"packageName": "@nx/webpack",
"description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
"documents": {
"/packages/webpack/documents/overview": {
@ -2808,7 +2808,7 @@
"workspace": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "workspace",
"packageName": "@nrwl/workspace",
"packageName": "@nx/workspace",
"description": "The Workspace plugin contains executors and generators that are useful for any Nx workspace. It should be present in every Nx workspace and other plugins build on it.",
"documents": {
"/packages/workspace/documents/overview": {

20
docs/generated/manifests/recipes.json
View File

@ -1587,6 +1587,16 @@
"path": "/recipes/other/identify-dependencies-between-folders",
"tags": []
},
{
"id": "rescope",
"name": "Rescope Packages from @nrwl to @nx",
"description": "",
"file": "shared/recipes/rescope",
"itemList": [],
"isExternal": false,
"path": "/recipes/other/rescope",
"tags": []
},
{
"id": "standalone-ngrx-apis",
"name": "Standalone NgRx APIs",
@ -1912,6 +1922,16 @@
"path": "/recipes/other/identify-dependencies-between-folders",
"tags": []
},
"/recipes/other/rescope": {
"id": "rescope",
"name": "Rescope Packages from @nrwl to @nx",
"description": "",
"file": "shared/recipes/rescope",
"itemList": [],
"isExternal": false,
"path": "/recipes/other/rescope",
"tags": []
},
"/recipes/other/standalone-ngrx-apis": {
"id": "standalone-ngrx-apis",
"name": "Standalone NgRx APIs",

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

@ -620,7 +620,7 @@
"file": "",
"id": "packages-devkit",
"name": "Nx Devkit",
"path": "/packages/devkit/documents/nrwl_devkit"
"path": "/packages/devkit/documents/nx_devkit"
},
{
"description": "",

54
docs/generated/packages-metadata.json
View File

@ -364,7 +364,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "angular",
"packageName": "@nrwl/angular",
"packageName": "@nx/angular",
"root": "/packages/angular",
"source": "/packages/angular/src"
},
@ -487,7 +487,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "cypress",
"packageName": "@nrwl/cypress",
"packageName": "@nx/cypress",
"root": "/packages/cypress",
"source": "/packages/cypress/src"
},
@ -548,7 +548,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "detox",
"packageName": "@nrwl/detox",
"packageName": "@nx/detox",
"root": "/packages/detox",
"source": "/packages/detox/src"
},
@ -556,15 +556,15 @@
"description": "The Nx Devkit is used to customize Nx for different technologies and use cases. It contains many utility functions for reading and writing files, updating configuration, working with Abstract Syntax Trees(ASTs), and more.",
"documents": [
{
"id": "nrwl_devkit",
"id": "nx_devkit",
"name": "Overview",
"description": "The Nx Devkit is used to customize Nx for different technologies and use cases. It contains many utility functions for reading and writing files, updating configuration, working with Abstract Syntax Trees(ASTs), and more.",
"file": "generated/packages/devkit/documents/nrwl_devkit",
"file": "generated/packages/devkit/documents/nx_devkit",
"itemList": [],
"isExternal": false,
"path": "devkit/documents/nrwl_devkit",
"path": "devkit/documents/nx_devkit",
"tags": [],
"originalFilePath": "generated/devkit/nrwl_devkit"
"originalFilePath": "generated/devkit/nx_devkit"
},
{
"id": "ngcli_adapter",
@ -582,7 +582,7 @@
"generators": [],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "devkit",
"packageName": "@nrwl/devkit",
"packageName": "@nx/devkit",
"root": "/packages/devkit",
"source": "/packages/devkit/src"
},
@ -634,7 +634,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "esbuild",
"packageName": "@nrwl/esbuild",
"packageName": "@nx/esbuild",
"root": "/packages/esbuild",
"source": "/packages/esbuild/src"
},
@ -668,7 +668,7 @@
"generators": [],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "eslint-plugin",
"packageName": "@nrwl/eslint-plugin-nx",
"packageName": "@nx/eslint-plugin",
"root": "/packages/eslint-plugin",
"source": "/packages/eslint-plugin/src"
},
@ -828,7 +828,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "expo",
"packageName": "@nrwl/expo",
"packageName": "@nx/expo",
"root": "/packages/expo",
"source": "/packages/expo/src"
},
@ -870,7 +870,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "express",
"packageName": "@nrwl/express",
"packageName": "@nx/express",
"root": "/packages/express",
"source": "/packages/express/src"
},
@ -922,7 +922,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "jest",
"packageName": "@nrwl/jest",
"packageName": "@nx/jest",
"root": "/packages/jest",
"source": "/packages/jest/src"
},
@ -1001,7 +1001,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "js",
"packageName": "@nrwl/js",
"packageName": "@nx/js",
"root": "/packages/js",
"source": "/packages/js/src"
},
@ -1053,7 +1053,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "linter",
"packageName": "@nrwl/linter",
"packageName": "@nx/linter",
"root": "/packages/linter",
"source": "/packages/linter/src"
},
@ -1248,7 +1248,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "nest",
"packageName": "@nrwl/nest",
"packageName": "@nx/nest",
"root": "/packages/nest",
"source": "/packages/nest/src"
},
@ -1374,7 +1374,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "next",
"packageName": "@nrwl/next",
"packageName": "@nx/next",
"root": "/packages/next",
"source": "/packages/next/src"
},
@ -1444,7 +1444,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "node",
"packageName": "@nrwl/node",
"packageName": "@nx/node",
"root": "/packages/node",
"source": "/packages/node/src"
},
@ -1854,7 +1854,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "plugin",
"packageName": "@nrwl/nx-plugin",
"packageName": "@nx/plugin",
"root": "/packages/plugin",
"source": "/packages/plugin/src"
},
@ -2041,7 +2041,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "react",
"packageName": "@nrwl/react",
"packageName": "@nx/react",
"root": "/packages/react",
"source": "/packages/react/src"
},
@ -2228,7 +2228,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "react-native",
"packageName": "@nrwl/react-native",
"packageName": "@nx/react-native",
"root": "/packages/react-native",
"source": "/packages/react-native/src"
},
@ -2268,7 +2268,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "rollup",
"packageName": "@nrwl/rollup",
"packageName": "@nx/rollup",
"root": "/packages/rollup",
"source": "/packages/rollup/src"
},
@ -2512,7 +2512,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "storybook",
"packageName": "@nrwl/storybook",
"packageName": "@nx/storybook",
"root": "/packages/storybook",
"source": "/packages/storybook/src"
},
@ -2622,7 +2622,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "vite",
"packageName": "@nrwl/vite",
"packageName": "@nx/vite",
"root": "/packages/vite",
"source": "/packages/vite/src"
},
@ -2683,7 +2683,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "web",
"packageName": "@nrwl/web",
"packageName": "@nx/web",
"root": "/packages/web",
"source": "/packages/web/src"
},
@ -2775,7 +2775,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "webpack",
"packageName": "@nrwl/webpack",
"packageName": "@nx/webpack",
"root": "/packages/webpack",
"source": "/packages/webpack/src"
},
@ -2901,7 +2901,7 @@
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "workspace",
"packageName": "@nrwl/workspace",
"packageName": "@nx/workspace",
"root": "/packages/workspace",
"source": "/packages/workspace/src"
}

14
docs/generated/packages/angular/documents/overview.md
View File

@ -20,11 +20,11 @@ more [here](/recipes/adopting-nx/migration-angular).
Adding the Angular plugin to an existing Nx workspace can be done with the following:
```shell
yarn add -D @nrwl/angular
yarn add -D @nx/angular
```
```shell
npm install -D @nrwl/angular
npm install -D @nx/angular
```
## Using the Angular Plugin
@ -34,7 +34,7 @@ npm install -D @nrwl/angular
It's straightforward to generate an Angular application:
```shell
nx g @nrwl/angular:app appName
nx g @nx/angular:app appName
```
By default, the application will be generated with:
@ -58,7 +58,7 @@ nx e2e appName
Generating an Angular library is very similar to generating an application:
```shell
nx g @nrwl/angular:lib libName
nx g @nx/angular:lib libName
```
By default, the library will be generated with:
@ -81,12 +81,12 @@ Read more about:
### Fallback to `@schematics/angular`
If you try to invoke a generator that is not present in `@nrwl/angular`, the request will automatically be forwarded on
to `@schematics/angular`. So, even though there is no `@nrwl/angular:service` generator, the following command will
If you try to invoke a generator that is not present in `@nx/angular`, the request will automatically be forwarded on
to `@schematics/angular`. So, even though there is no `@nx/angular:service` generator, the following command will
successfully create a service:
```shell
nx g @nrwl/angular:service my-service
nx g @nx/angular:service my-service
```
## More Documentation

2
docs/generated/packages/angular/executors/delegate-build.json
View File

@ -33,7 +33,7 @@
},
"additionalProperties": false,
"required": ["buildTarget", "outputPath", "tsConfig"],
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\nDelegate the build of the project to a different target.\n\n```json\n{\n \"prod-build\": {\n \"executor\": \"@nrwl/angular:delegate-build\",\n \"options\": {\n \"buildTarget\": \"app:build:production\",\n \"outputPath\": \"dist/apps/app/production\",\n \"tsConfig\": \"apps/app/tsconfig.json\",\n \"watch\": false\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Watch for build changes\" %}\nDelegate the build of the project to a different target.\n\n```json\n{\n \"prod-build\": {\n \"executor\": \"@nrwl/angular:delegate-build\",\n \"options\": {\n \"buildTarget\": \"app:build:production\",\n \"outputPath\": \"dist/apps/app/production\",\n \"tsConfig\": \"apps/app/tsconfig.json\",\n \"watch\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\nDelegate the build of the project to a different target.\n\n```json\n{\n \"prod-build\": {\n \"executor\": \"@nx/angular:delegate-build\",\n \"options\": {\n \"buildTarget\": \"app:build:production\",\n \"outputPath\": \"dist/apps/app/production\",\n \"tsConfig\": \"apps/app/tsconfig.json\",\n \"watch\": false\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Watch for build changes\" %}\nDelegate the build of the project to a different target.\n\n```json\n{\n \"prod-build\": {\n \"executor\": \"@nx/angular:delegate-build\",\n \"options\": {\n \"buildTarget\": \"app:build:production\",\n \"outputPath\": \"dist/apps/app/production\",\n \"tsConfig\": \"apps/app/tsconfig.json\",\n \"watch\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Delegates the build to a different target while supporting incremental builds.",

2
docs/generated/packages/angular/executors/module-federation-dev-server.json
View File

@ -116,7 +116,7 @@
},
"additionalProperties": false,
"required": ["browserTarget"],
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\nThe Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve them statically also. \nSee an example set up of it below:\n\n```json\n{\n \"serve\": {\n \"executor\": \"@nrwl/angular:module-federation-dev-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"host:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"host:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"port\": 4200,\n \"publicHost\": \"http://localhost:4200\"\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Serve host with remotes that can be live reloaded\" %}\nThe Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve a set selection with live reloading enabled also. \nSee an example set up of it below:\n\n```json\n{\n \"serve-with-hmr-remotes\": {\n \"executor\": \"@nrwl/angular:module-federation-dev-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"host:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"host:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"port\": 4200,\n \"publicHost\": \"http://localhost:4200\",\n \"devRemotes\": [\"remote1\", \"remote2\"]\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\nThe Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve them statically also. \nSee an example set up of it below:\n\n```json\n{\n \"serve\": {\n \"executor\": \"@nx/angular:module-federation-dev-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"host:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"host:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"port\": 4200,\n \"publicHost\": \"http://localhost:4200\"\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Serve host with remotes that can be live reloaded\" %}\nThe Module Federation Dev Server will serve a host application and find the remote applications associated with the host and serve a set selection with live reloading enabled also. \nSee an example set up of it below:\n\n```json\n{\n \"serve-with-hmr-remotes\": {\n \"executor\": \"@nx/angular:module-federation-dev-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"host:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"host:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n \"options\": {\n \"port\": 4200,\n \"publicHost\": \"http://localhost:4200\",\n \"devRemotes\": [\"remote1\", \"remote2\"]\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "The module-federation-dev-server executor is reserved exclusively for use with host Module Federation applications. It allows the user to specify which remote applications should be served with the host.",
"aliases": [],

2
docs/generated/packages/angular/executors/webpack-browser.json
View File

@ -7,7 +7,7 @@
"$schema": "http://json-schema.org/draft-07/schema",
"title": "Schema for Webpack Browser",
"description": "The webpack-browser executor is very similar to the standard browser builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences: \n- Supports Custom Webpack Configurations \n- Supports Incremental Building",
"examplesFile": "##### Using a custom webpack configuration\n\nThe executor supports providing a path to a custom webpack configuration. This allows you to customize how your Angular application is built. It currently supports the following types of webpack configurations:\n\n- `object`\n- `Function`\n- `Promise<object|Function>`\n\nThe executor will merge the provided configuration with the webpack configuration that Angular Devkit uses. The merge order is:\n\n- Angular Devkit Configuration\n- Provided Configuration\n\nTo use a custom webpack configuration when building your Angular application, change the `build` target in your `project.json` to match the following:\n\n```typescript\n\"build\": {\n \"executor\": \"@nrwl/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n}\n```\n\n##### Incrementally Building your Application\n\nThe executor supports incrementally building your Angular application by building the workspace libraries it depends on _(that have been marked as buildable)_ and then building your application using the built source of the libraries.\n\nThis can improve build time as the building of the workspace libraries can be cached, meaning they only have to be rebuilt if they have changed.\n\n> Note: There may be some additional overhead in the linking of the built libraries' sources which may reduce the overall improvement in build time. Therefore this approach only benefits large applications and would likely have a negative impact on small and medium applications. \n> You can read more about when to use incremental builds [here](/more-concepts/incremental-builds#when-should-i-use-incremental-builds).\n\nTo allow your Angular application to take advantage of incremental building, change the `build` target in your `project.json` to match the following:\n\n```typescript\n\"build\": {\n \"executor\": \"@nrwl/angular:webpack-browser\",\n \"options\": {\n ...\n \"buildLibsFromSource\": false\n }\n}\n```\n",
"examplesFile": "##### Using a custom webpack configuration\n\nThe executor supports providing a path to a custom webpack configuration. This allows you to customize how your Angular application is built. It currently supports the following types of webpack configurations:\n\n- `object`\n- `Function`\n- `Promise<object|Function>`\n\nThe executor will merge the provided configuration with the webpack configuration that Angular Devkit uses. The merge order is:\n\n- Angular Devkit Configuration\n- Provided Configuration\n\nTo use a custom webpack configuration when building your Angular application, change the `build` target in your `project.json` to match the following:\n\n```typescript\n\"build\": {\n \"executor\": \"@nx/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n}\n```\n\n##### Incrementally Building your Application\n\nThe executor supports incrementally building your Angular application by building the workspace libraries it depends on _(that have been marked as buildable)_ and then building your application using the built source of the libraries.\n\nThis can improve build time as the building of the workspace libraries can be cached, meaning they only have to be rebuilt if they have changed.\n\n> Note: There may be some additional overhead in the linking of the built libraries' sources which may reduce the overall improvement in build time. Therefore this approach only benefits large applications and would likely have a negative impact on small and medium applications. \n> You can read more about when to use incremental builds [here](/more-concepts/incremental-builds#when-should-i-use-incremental-builds).\n\nTo allow your Angular application to take advantage of incremental building, change the `build` target in your `project.json` to match the following:\n\n```typescript\n\"build\": {\n \"executor\": \"@nx/angular:webpack-browser\",\n \"options\": {\n ...\n \"buildLibsFromSource\": false\n }\n}\n```\n",
"type": "object",
"presets": [
{

2
docs/generated/packages/angular/executors/webpack-dev-server.json
View File

@ -7,7 +7,7 @@
"$schema": "http://json-schema.org/draft-07/schema",
"title": "Schema for Webpack Dev Server",
"description": "The webpack-dev-server executor is very similar to the standard dev server builder provided by the Angular Devkit. It is usually used in tandem with `@nrwl/angular:webpack-browser` when your Angular application uses a custom webpack configuration.",
"examplesFile": "##### Seving an application with a custom webpack configuration\n\nThis executor should be used along with `@nrwl/angular:webpack-browser` to serve an application using a custom webpack configuration.\n\nYour `project.json` file should contain a `build` and `serve` target that matches the following:\n\n```json\n\"build\": {\n \"executor\": \"@nrwl/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n},\n\"serve\": {\n \"executor\": \"@nrwl/angular:webpack-dev-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"appName:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"appName:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n}\n```\n",
"examplesFile": "##### Seving an application with a custom webpack configuration\n\nThis executor should be used along with `@nx/angular:webpack-browser` to serve an application using a custom webpack configuration.\n\nYour `project.json` file should contain a `build` and `serve` target that matches the following:\n\n```json\n\"build\": {\n \"executor\": \"@nx/angular:webpack-browser\",\n \"options\": {\n ...\n \"customWebpackConfig\": {\n \"path\": \"apps/appName/webpack.config.js\"\n }\n }\n},\n\"serve\": {\n \"executor\": \"@nx/angular:webpack-dev-server\",\n \"configurations\": {\n \"production\": {\n \"browserTarget\": \"appName:build:production\"\n },\n \"development\": {\n \"browserTarget\": \"appName:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\",\n}\n```\n",
"type": "object",
"presets": [
{ "name": "Using a Different Port", "keys": ["browserTarget", "port"] }

2
docs/generated/packages/angular/generators/application.json
View File

@ -165,7 +165,7 @@
},
"additionalProperties": false,
"required": ["name"],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/angular:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n```bash\nnx g @nrwl/angular:app my-app --directory=my-dir --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Components application\" %}\n\nCreate an application with Single File Components (inline styles and inline templates):\n\n```bash\nnx g @nrwl/angular:app my-app --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Components application\" %}\n\nCreate an application that is setup to use standalone components:\n\n```bash\nnx g @nrwl/angular:app my-app --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Set custom prefix and tags\" %}\n\nSet the prefix to apply to generated selectors and add tags to the application (used for linting).\n\n```bash\nnx g @nrwl/angular:app my-app --prefix=admin --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/angular:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n```bash\nnx g @nx/angular:app my-app --directory=my-dir --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Components application\" %}\n\nCreate an application with Single File Components (inline styles and inline templates):\n\n```bash\nnx g @nx/angular:app my-app --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Components application\" %}\n\nCreate an application that is setup to use standalone components:\n\n```bash\nnx g @nx/angular:app my-app --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Set custom prefix and tags\" %}\n\nSet the prefix to apply to generated selectors and add tags to the application (used for linting).\n\n```bash\nnx g @nx/angular:app my-app --prefix=admin --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
"presets": []
},
"aliases": ["app"],

2
docs/generated/packages/angular/generators/component-cypress-spec.json
View File

@ -62,7 +62,7 @@
"componentPath",
"componentFileName"
],
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\n\nCreate a cypress spec for a component that is set up with Storybook.\n\n```bash\nnx g @nrwl/angular:component-cypress-spec --componentName=MyButtonComponent --componentPath=libs/ui/src/lib/button/button.component.ts --componentFileName=button.component --projectName=ui --projectPath=libs/ui\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\n\nCreate a cypress spec for a component that is set up with Storybook.\n\n```bash\nnx g @nx/angular:component-cypress-spec --componentName=MyButtonComponent --componentPath=libs/ui/src/lib/button/button.component.ts --componentFileName=button.component --projectName=ui --projectPath=libs/ui\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Creates a Cypress spec for a UI component that has a story.",

2
docs/generated/packages/angular/generators/component-test.json
View File

@ -51,7 +51,7 @@
"componentDir",
"componentFileName"
],
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nAngular component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you're wanting to create Cypress tests for a Storybook story, then check out the [component-cypress-spec generator docs](/packages/angular/generators/component-cypress-spec)\n\nIf you're wanting to create Storybook stories for a component, then check out the [stories generator docs](/packages/angular/generators/stories) or [component-story generator docs](/packages/angular/generators/component-cypress-spec)\n{% /callout %}\n\nThis generator is used to create a Cypress component test file for a given Angular component.\n\n```shell\nnx g @nrwl/angular:component-test --project=my-cool-angular-project --componentName=CoolBtnComponent --componentDir=src/cool-btn --componentFileName=cool-btn.component\n```\n\nTest file are generated with the `.cy.ts` suffix. this is to prevent colliding with any existing `.spec.` files contained in the project.\n\nIt's currently expected the generated `.cy.ts` file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the [cypress-component-project generator](/packages/angular/generators/cypress-component-configuration) to set up the project for component testing.\n",
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nAngular component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you're wanting to create Cypress tests for a Storybook story, then check out the [component-cypress-spec generator docs](/packages/angular/generators/component-cypress-spec)\n\nIf you're wanting to create Storybook stories for a component, then check out the [stories generator docs](/packages/angular/generators/stories) or [component-story generator docs](/packages/angular/generators/component-cypress-spec)\n{% /callout %}\n\nThis generator is used to create a Cypress component test file for a given Angular component.\n\n```shell\nnx g @nx/angular:component-test --project=my-cool-angular-project --componentName=CoolBtnComponent --componentDir=src/cool-btn --componentFileName=cool-btn.component\n```\n\nTest file are generated with the `.cy.ts` suffix. this is to prevent colliding with any existing `.spec.` files contained in the project.\n\nIt's currently expected the generated `.cy.ts` file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the [cypress-component-project generator](/packages/angular/generators/cypress-component-configuration) to set up the project for component testing.\n",
"presets": []
},
"description": "Creates a cypress component test file for a component.",

2
docs/generated/packages/angular/generators/component.json
View File

@ -125,7 +125,7 @@
}
},
"required": ["name", "project"],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nrwl/angular:component my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Component\" %}\n\nCreate a standalone component named `my-component`:\n\n```bash\nnx g @nrwl/angular:component my-component --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nrwl/angular:component my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nrwl/angular:component my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nx/angular:component my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Component\" %}\n\nCreate a standalone component named `my-component`:\n\n```bash\nnx g @nx/angular:component my-component --standalone\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
"presets": []
},
"aliases": ["c"],

2
docs/generated/packages/angular/generators/cypress-component-configuration.json
View File

@ -37,7 +37,7 @@
}
},
"required": ["project"],
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nAngular component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/angular/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your Angular project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';\n\nexport default defineConfig({\n component: nxComponentTestingPreset(__filename),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';\n\nexport default defineConfig({\n component: {\n ...nxComponentTestingPreset(__filename),\n // extra options here\n },\n});\n```\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-angular-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor Angular projects, the build target needs to be using the `@nrwl/angular:webpack-browser` or\n`@angular-devkit/build-angular:browser` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-project --build-target:some-angular-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/angular:cypress-component-configuration --project=my-cool-angular-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-angular-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n \"targets\" {\n \"component-test\": {\n \"executor\": \"@nrwl/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"<path-to-project-root>/cypress.config.ts\",\n \"testingType\": \"component\",\n \"devServerTarget\": \"some-angular-app:build\",\n \"skipServe\": true\n }\n }\n }\n}\n```\n\nNx also supports [React component testing](/packages/angular/generators/cypress-component-configuration).\n",
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nAngular component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/angular/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your Angular project up and running with Cypress Component Testing.\n\n```shell\nnx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';\n\nexport default defineConfig({\n component: nxComponentTestingPreset(__filename),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';\n\nexport default defineConfig({\n component: {\n ...nxComponentTestingPreset(__filename),\n // extra options here\n },\n});\n```\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-angular-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor Angular projects, the build target needs to be using the `@nx/angular:webpack-browser` or\n`@angular-devkit/build-angular:browser` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project --build-target:some-angular-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nx/angular:cypress-component-configuration --project=my-cool-angular-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-angular-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n \"targets\" {\n \"component-test\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"<path-to-project-root>/cypress.config.ts\",\n \"testingType\": \"component\",\n \"devServerTarget\": \"some-angular-app:build\",\n \"skipServe\": true\n }\n }\n }\n}\n```\n\nNx also supports [React component testing](/packages/angular/generators/cypress-component-configuration).\n",
"presets": []
},
"description": "Setup Cypress component testing for a project.",

2
docs/generated/packages/angular/generators/library-secondary-entry-point.json
View File

@ -33,7 +33,7 @@
},
"additionalProperties": false,
"required": ["name", "library"],
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\nCreate a secondary entrypoint named `button` in the `ui` library.\n\n```bash\nnx g @nrwl/angular:library-secondary-entry-point --library=ui --name=button\n```\n\n{% /tab %}\n\n{% tab label=\"Skip generating module\" %}\nCreate a secondary entrypoint named `button` in the `ui` library but skip creating an NgModule.\n\n```bash\nnx g @nrwl/angular:library-secondary-entry-point --library=ui --name=button --skipModule\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\nCreate a secondary entrypoint named `button` in the `ui` library.\n\n```bash\nnx g @nx/angular:library-secondary-entry-point --library=ui --name=button\n```\n\n{% /tab %}\n\n{% tab label=\"Skip generating module\" %}\nCreate a secondary entrypoint named `button` in the `ui` library but skip creating an NgModule.\n\n```bash\nnx g @nx/angular:library-secondary-entry-point --library=ui --name=button --skipModule\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"aliases": ["secondary-entry-point", "entry-point"],

2
docs/generated/packages/angular/generators/library.json
View File

@ -199,7 +199,7 @@
},
"additionalProperties": false,
"required": ["name"],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Library\" %}\n\nCreates the `my-ui-lib` library with an `ui` tag:\n\n```bash\nnx g @nrwl/angular:library my-ui-lib --tags=ui\n```\n\n{% /tab %}\n\n{% tab label=\"Publishable Library\" %}\n\nCreates the `my-lib` library that can be built producing an output following the Angular Package Format (APF) to be distributed as an NPM package:\n\n```bash\nnx g @nrwl/angular:library my-lib --publishable --import-path=@my-org/my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable Library\" %}\n\nCreates the `my-lib` library with support for incremental builds:\n\n```bash\nnx g @nrwl/angular:library my-lib --buildable\n```\n\n{% /tab %}\n\n{% tab label=\"Nested Folder & Import\"%}\nCreates the `my-lib` library in the `nested` directory and sets the import path to `@myorg/nested/my-lib`:\n\n```bash\nnx g @nrwl/angular:library --directory=nested --importPath=@myorg/nested/my-lib my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone component\"%}\nCreates the `my-standalone-lib` library with a standalone component as an entry point instead of an ng-module. The component can be used via the `myorg-standalone-component` selector.\n\n```bash\nnx g @nrwl/angular:library --standalone --selector=myorg-standalone-component my-standalone-lib\n```\n\n{% /tab %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Library\" %}\n\nCreates the `my-ui-lib` library with an `ui` tag:\n\n```bash\nnx g @nx/angular:library my-ui-lib --tags=ui\n```\n\n{% /tab %}\n\n{% tab label=\"Publishable Library\" %}\n\nCreates the `my-lib` library that can be built producing an output following the Angular Package Format (APF) to be distributed as an NPM package:\n\n```bash\nnx g @nx/angular:library my-lib --publishable --import-path=@my-org/my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable Library\" %}\n\nCreates the `my-lib` library with support for incremental builds:\n\n```bash\nnx g @nx/angular:library my-lib --buildable\n```\n\n{% /tab %}\n\n{% tab label=\"Nested Folder & Import\"%}\nCreates the `my-lib` library in the `nested` directory and sets the import path to `@myorg/nested/my-lib`:\n\n```bash\nnx g @nx/angular:library --directory=nested --importPath=@myorg/nested/my-lib my-lib\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone component\"%}\nCreates the `my-standalone-lib` library with a standalone component as an entry point instead of an ng-module. The component can be used via the `myorg-standalone-component` selector.\n\n```bash\nnx g @nx/angular:library --standalone --selector=myorg-standalone-component my-standalone-lib\n```\n\n{% /tab %}\n",
"presets": []
},
"aliases": ["lib"],

2
docs/generated/packages/angular/generators/ng-add.json
View File

@ -69,7 +69,7 @@
}
},
"additionalProperties": false,
"examplesFile": "## Information\n\nThis generator is usually used as part of the process of migrating from an Angular CLI Workspace to Nx Workspaces using `ng add @nrwl/angular`.\n\nYou can read more about [migrating from Angular CLI to Nx here](https://nx.dev/recipes/adopting-nx/migration-angular).\n",
"examplesFile": "## Information\n\nThis generator is usually used as part of the process of migrating from an Angular CLI Workspace to Nx Workspaces using `ng add @nx/angular`.\n\nYou can read more about [migrating from Angular CLI to Nx here](https://nx.dev/recipes/adopting-nx/migration-angular).\n",
"presets": []
},
"description": "Migrates an Angular CLI workspace to Nx or adds the Angular plugin to an Nx workspace.",

2
docs/generated/packages/angular/generators/scam-to-standalone.json
View File

@ -28,7 +28,7 @@
"x-priority": "internal"
}
},
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\n\nThis generator allows you to convert an Inline SCAM to a Standalone Component. It's important that the SCAM you wish to convert has it's NgModule within the same file for the generator to be able to correctly convert the component to Standalone.\n\n```bash\n\nnx g @nrwl/angular:scam-to-standalone --component=libs/mylib/src/lib/myscam/myscam.component.ts --project=mylib\n\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Basic Usage\" %}\n\nThis generator allows you to convert an Inline SCAM to a Standalone Component. It's important that the SCAM you wish to convert has it's NgModule within the same file for the generator to be able to correctly convert the component to Standalone.\n\n```bash\n\nnx g @nx/angular:scam-to-standalone --component=libs/mylib/src/lib/myscam/myscam.component.ts --project=mylib\n\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Convert an existing Single Component Angular Module (SCAM) to a Standalone Component.",

2
docs/generated/packages/angular/generators/setup-tailwind.json
View File

@ -38,7 +38,7 @@
},
"additionalProperties": false,
"required": ["project"],
"examplesFile": "## Examples\n\nThe `setup-tailwind` generator can be used to add [Tailwind](https://tailwindcss.com) configuration to apps and publishable libraries.\n\n{% tabs %}\n\n{% tab label=\"Standard Setup\" %}\n\nTo generate a standard Tailwind setup, just run the following command.\n\n```bash\nnx g @nrwl/angular:setup-tailwind myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Specifying the Styles Entrypoint\" %}\n\nTo specify the styles file that should be used as the entrypoint for Tailwind, simply pass the `--stylesEntryPoint` flag, relative to workspace root.\n\n```bash\nnx g @nrwl/angular:setup-tailwind myapp --stylesEntryPoint=apps/myapp/src/styles.css\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"examplesFile": "## Examples\n\nThe `setup-tailwind` generator can be used to add [Tailwind](https://tailwindcss.com) configuration to apps and publishable libraries.\n\n{% tabs %}\n\n{% tab label=\"Standard Setup\" %}\n\nTo generate a standard Tailwind setup, just run the following command.\n\n```bash\nnx g @nx/angular:setup-tailwind myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Specifying the Styles Entrypoint\" %}\n\nTo specify the styles file that should be used as the entrypoint for Tailwind, simply pass the `--stylesEntryPoint` flag, relative to workspace root.\n\n```bash\nnx g @nx/angular:setup-tailwind myapp --stylesEntryPoint=apps/myapp/src/styles.css\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Configures Tailwind CSS for an application or a buildable/publishable library.",

2
docs/generated/packages/angular/generators/stories.json
View File

@ -49,7 +49,7 @@
},
"additionalProperties": false,
"required": ["name"],
"examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nrwl/angular:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n",
"examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nx/angular:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:stories ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n",
"presets": []
},
"description": "Creates stories/specs for all components declared in a project.",

2
docs/generated/packages/angular/generators/storybook-configuration.json
View File

@ -94,7 +94,7 @@
},
"additionalProperties": false,
"required": ["name"],
"examplesFile": "This generator will set up Storybook for your Angular project.\n\n```bash\nnx g @nrwl/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#generate-storybook-configuration-for-an-angular-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for Angular - Cypress section](/packages/storybook/documents/overview-angular#cypress-tests-for-stories).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/angular:storybook-configuration ui --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/angular:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/angular:storybook-configuration ui --storybook7Configuration=true\n```\n\n{% callout type=\"info\" title=\"For Nx versions <15.9\" %}\nThe flag is called `storybook7betaConfiguration` for Nx versions <15.9.\n{% /callout %}\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n",
"examplesFile": "This generator will set up Storybook for your Angular project.\n\n```bash\nnx g @nx/angular:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Angular overview page](/packages/storybook/documents/overview-angular#generate-storybook-configuration-for-an-angular-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for Angular - Cypress section](/packages/storybook/documents/overview-angular#cypress-tests-for-stories).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nx/angular:storybook-configuration ui --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/angular:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nx/angular:storybook-configuration ui --storybook7Configuration=true\n```\n\n{% callout type=\"info\" title=\"For Nx versions <15.9\" %}\nThe flag is called `storybook7betaConfiguration` for Nx versions <15.9.\n{% /callout %}\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n",
"presets": []
},
"description": "Adds Storybook configuration to a project.",

2
docs/generated/packages/angular/generators/web-worker.json
View File

@ -42,7 +42,7 @@
},
"additionalProperties": false,
"required": ["name", "project"],
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Simple Usage\" %}\n\nThe basic usage of the `web-worker` generator is defined below. You must provide a name for the web worker and the project to assign it to.\n\n```bash\nnx g @nrwl/angular:web-worker myWebWorker --project=myapp\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n\n{% tab label=\"Simple Usage\" %}\n\nThe basic usage of the `web-worker` generator is defined below. You must provide a name for the web worker and the project to assign it to.\n\n```bash\nnx g @nx/angular:web-worker myWebWorker --project=myapp\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"description": "Creates a Web Worker.",

12
docs/generated/packages/cypress/documents/cypress-component-testing.md
View File

@ -8,14 +8,14 @@ directly to a project, like [Jest](/packages/jest)
## Add Component Testing to a Project
> Currently only [@nrwl/react](/packages/react/generators/cypress-component-configuration) and [@nrwl/angular](/packages/angular/generators/cypress-component-configuration) plugins support component testing
> Currently only [@nx/react](/packages/react/generators/cypress-component-configuration) and [@nx/angular](/packages/angular/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.
```shell
nx g @nrwl/react:cypress-component-configuration --project=your-project
nx g @nx/react:cypress-component-configuration --project=your-project
nx g @nrwl/angular:cypress-component-configuration --project=your-project
nx g @nx/angular:cypress-component-configuration --project=your-project
```
You can optionally pass in `--generate-tests` to create component tests for all components within the library.
@ -23,15 +23,15 @@ 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.
```shell
nx g @nrwl/react:cypress-component-configuration --project=your-project --build-target=my-react-app:build
nx g @nx/react:cypress-component-configuration --project=your-project --build-target=my-react-app:build
nx g @nrwl/angular:cypress-component-configuration --project=your-project --build-target=my-ng-app:build
nx g @nx/angular:cypress-component-configuration --project=your-project --build-target=my-ng-app:build
```
The build target option can be changed later via updating the `devServerTarget` option in the `component-test` target.
{% callout type="warning" title="Executor Options" %}
When using component testing make sure to set `skipServe: true` in the component test target options, otherwise `@nrwl/cypress` will attempt to run the build first which can slow down your component tests. `skipServe: true` is automatically set when using the `cypress-component-configuration` generator.
When using component testing make sure to set `skipServe: true` in the component test target options, otherwise `@nx/cypress` will attempt to run the build first which can slow down your component tests. `skipServe: true` is automatically set when using the `cypress-component-configuration` generator.
{% /callout %}
## Testing Projects

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

@ -13,14 +13,14 @@ Cypress is a test runner built for the modern web. It has a lot of great feature
>
> Info about [using Cypress and Storybook can be found here](/packages/storybook/documents/overview-react#cypress-tests-for-storiesbook)
If the `@nrwl/cypress` package is not installed, install the version that matches your `nx` package version.
If the `@nx/cypress` package is not installed, install the version that matches your `nx` package version.
```shell
yarn add --dev @nrwl/cypress
yarn add --dev @nx/cypress
```
```shell
npm install --save-dev @nrwl/cypress
npm install --save-dev @nx/cypress
```
## E2E Testing
@ -28,7 +28,7 @@ npm install --save-dev @nrwl/cypress
By default, when creating a new frontend application, Nx will use Cypress to create the e2e tests project.
```shell
nx g @nrwl/web:app frontend
nx g @nx/web:app frontend
```
### Creating a Cypress E2E project for an existing project
@ -36,13 +36,13 @@ nx g @nrwl/web:app frontend
To generate an E2E project based on an existing project, run the following generator
```shell
nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name
nx g @nx/cypress:cypress-project your-app-name-e2e --project=your-app-name
```
Optionally, you can use the `--baseUrl` option if you don't want cypress plugin to serve `your-app-name`.
```shell
nx g @nrwl/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200
nx g @nx/cypress:cypress-project your-app-name-e2e --baseUrl=http://localhost:4200
```
Replace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.
@ -114,7 +114,7 @@ There are a handful of ways to pass environment variables to Cypress, but the mo
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 [@nrwl/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](/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.
Optionally, you can pass environment variables via the commandline with the `--env` flag.

2
docs/generated/packages/cypress/documents/v11-migration-guide.md
View File

@ -15,7 +15,7 @@ As of nx v15.1.0, if your project was already using Cypress v10, then your proje
{% /callout %}
```shell
nx g @nrwl/cypress:migrate-to-cypress-11
nx g @nx/cypress:migrate-to-cypress-11
```
In general, these are the steps taken to migrate your project:

2
docs/generated/packages/cypress/executors/cypress.json
View File

@ -142,7 +142,7 @@
},
"additionalProperties": true,
"required": ["cypressConfig"],
"examplesFile": "Depending on your testing type, the Cypress executor is configured in different ways. The following are sample configurations that are created via the [cypress-project](/packages/cypress/generators/cypress-project) and [cypress-component-project](/packages/cypress/generators/cypress-component-project) generators.\n\n{% tabs %}\n{% tab label=\"E2E Testing\" %}\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nrwl/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"API Testing\" %}\nAPI testing with Cypress is the same setup as e2e testing. Just change which `devServerTarget` is used!\n{% /callout %}\n\n### Providing a Base URL\n\nIf `devServerTarget` is provided, the url returned from started the dev server will be passed to cypress as the `baseUrl` option.\n\nDefining a `baseUrl` in the executor options will override the inferred `baseUrl` from the `devServerTarget`.\n\nThe `baseUrl` defined in the Cypress config file is the last value used if no url is found in the `devServerTarget` or executor options.\n\n### Static Serving\n\nWhen running in CI it doesn't make sense to start up a dev server since there aren't changes to watch for.\n\nYou can use [`@nrwl/web:file-server`](/packages/web/executors/file-server) to serve the pre-built static files of your frontend project.\n\nIn some _frontend_ application, add a 'static-serve' target.\n\n```json\n\"serve-static\": {\n \"executor\": \"@nrwl/web:file-server\",\n \"options\":{\n \"buildTarget\": \"frontend:build\"\n }\n}\n```\n\nIn the _e2e_ application add a configuration to change `devServerTarget` to point to the `static-serve` from the _frontend_ application\n\n```json\n\"e2e\": {\n //...\n \"configurations\": {\n \"ci\": {\n \"devServerTarget\": \"frontend:serve-static\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"What about Node projects?\" %}\nThe same can be done for backend node apps with [`@nrwl/js:node` executor](/packages/js/executors/node)\n{% /callout %}\n\n```bash\nnx e2e my-app-e2e --configuration=ci\n```\n\n{% /tab %}\n{% tab label=\"Component Testing\" %}\n\n{% callout type=\"note\" title=\"Cypress Component Testing\" %}\nWhen adding component testing to a project, it's best to use the framework specific generator, instead `cypress-component-project` directly.\n\n- [React component testing](/packages/react/generators/cypress-component-configuration)\n- [Angular component testing](/packages/angular/generators/cypress-component-configuration)\n\n{% /callout %}\n\n```json\n\"targets\": {\n \"component-test\": {\n \"executor\": \"@nrwl/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:build\",\n \"testingType\": \"component\",\n \"skipServe\": true\n }\n }\n}\n```\n\nIt's important `skipServe` is set to true. Nx doesn't need to run the `devServerTarget`, Cypress creates its own dev server for component testing.\nInstead, Nx needs to know what build target to create the correct configuration to pass to Cypress, which is why it's still used in component testing.\n\n{% /tab %}\n{% /tabs %}\n\n### Environment Variables\n\nUsing [executor configurations](/recipe/use-executor-configurations#use-executor-configurations) offers flexibility to set environment variables\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nrwl/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n },\n \"configurations\": {\n \"qa\": {\n \"env\": {\n \"API_URL\": \"https://api.qa.company.com\"\n }\n },\n \"dev\": {\n \"env\": {\n \"API_URL\": \"http://locahost:3333/api\"\n }\n }\n }\n }\n}\n```\n\nRead more on different ways to use [environment variables for cypress executor](/packages/cypress#environment-variables)\n"
"examplesFile": "Depending on your testing type, the Cypress executor is configured in different ways. The following are sample configurations that are created via the [cypress-project](/packages/cypress/generators/cypress-project) and [cypress-component-project](/packages/cypress/generators/cypress-component-project) generators.\n\n{% tabs %}\n{% tab label=\"E2E Testing\" %}\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"API Testing\" %}\nAPI testing with Cypress is the same setup as e2e testing. Just change which `devServerTarget` is used!\n{% /callout %}\n\n### Providing a Base URL\n\nIf `devServerTarget` is provided, the url returned from started the dev server will be passed to cypress as the `baseUrl` option.\n\nDefining a `baseUrl` in the executor options will override the inferred `baseUrl` from the `devServerTarget`.\n\nThe `baseUrl` defined in the Cypress config file is the last value used if no url is found in the `devServerTarget` or executor options.\n\n### Static Serving\n\nWhen running in CI it doesn't make sense to start up a dev server since there aren't changes to watch for.\n\nYou can use [`@nx/web:file-server`](/packages/web/executors/file-server) to serve the pre-built static files of your frontend project.\n\nIn some _frontend_ application, add a 'static-serve' target.\n\n```json\n\"serve-static\": {\n \"executor\": \"@nx/web:file-server\",\n \"options\":{\n \"buildTarget\": \"frontend:build\"\n }\n}\n```\n\nIn the _e2e_ application add a configuration to change `devServerTarget` to point to the `static-serve` from the _frontend_ application\n\n```json\n\"e2e\": {\n //...\n \"configurations\": {\n \"ci\": {\n \"devServerTarget\": \"frontend:serve-static\"\n }\n }\n}\n```\n\n{% callout type=\"note\" title=\"What about Node projects?\" %}\nThe same can be done for backend node apps with [`@nx/js:node` executor](/packages/js/executors/node)\n{% /callout %}\n\n```bash\nnx e2e my-app-e2e --configuration=ci\n```\n\n{% /tab %}\n{% tab label=\"Component Testing\" %}\n\n{% callout type=\"note\" title=\"Cypress Component Testing\" %}\nWhen adding component testing to a project, it's best to use the framework specific generator, instead `cypress-component-project` directly.\n\n- [React component testing](/packages/react/generators/cypress-component-configuration)\n- [Angular component testing](/packages/angular/generators/cypress-component-configuration)\n\n{% /callout %}\n\n```json\n\"targets\": {\n \"component-test\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:build\",\n \"testingType\": \"component\",\n \"skipServe\": true\n }\n }\n}\n```\n\nIt's important `skipServe` is set to true. Nx doesn't need to run the `devServerTarget`, Cypress creates its own dev server for component testing.\nInstead, Nx needs to know what build target to create the correct configuration to pass to Cypress, which is why it's still used in component testing.\n\n{% /tab %}\n{% /tabs %}\n\n### Environment Variables\n\nUsing [executor configurations](/recipe/use-executor-configurations#use-executor-configurations) offers flexibility to set environment variables\n\n```json\n\"targets\": {\n \"e2e\": {\n \"executor\": \"@nx/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"apps/app-e2e/cypres.config.ts\",\n \"devServerTarget\": \"my-react-app:serve\",\n \"testingType\": \"e2e\"\n },\n \"configurations\": {\n \"qa\": {\n \"env\": {\n \"API_URL\": \"https://api.qa.company.com\"\n }\n },\n \"dev\": {\n \"env\": {\n \"API_URL\": \"http://locahost:3333/api\"\n }\n }\n }\n }\n}\n```\n\nRead more on different ways to use [environment variables for cypress executor](/packages/cypress#environment-variables)\n"
},
"description": "Run Cypress E2E tests.",
"aliases": [],

2
docs/generated/packages/cypress/generators/cypress-e2e-configuration.json
View File

@ -84,7 +84,7 @@
}
},
"required": ["project"],
"examplesFile": "This is a generator to add a cypress e2e configuration to an existing project.\n\n```bash\nnx g cypress-e2e-configuration --project=my-cool-project --devServerTarget=some-app:serve\n```\n\nRunning this generator, adds the required files to run cypress tests for a project,\nMainly a `cypress.config.ts` file and default files in the `<project-root>/cypress/` directory.\nTests will be located in `<project-root>/cypress/e2e/*` by default.\n\nYou can customize the directory used via the `--directory` flag, the value is relative to the project root.\n\nFor example if you wanted to place the files inside an `e2e` folder\n\n```bash\nnx g cypress-e2e-configuration --project=my-cool-project --devServerTarget=some-app:serve --directory=e2e\n```\n\nProviding a `--devServerTarget` is optional if you provide a `--baseUrl` or the project you're adding the configuration to has a `serve` target already.\nOtherwise, a `--devServerTarget` is recommend for the `@nrwl/cypress:cypress` executor to spin up the dev server for you automatically when needed.\n\n## Feature Based Testing\n\nThis generator helps in creating feature based e2e/integration testing setups where you can place the feature tests in the same project as the feature library.\nThis differs from creating a separate e2e project that contained all tests for an application which can easily cause more tests to run than is strictly necessary.\n\nTake the following workspace where the `feature-cart` project is affected.\n\n{% graph height=\"450px\" %}\n\n```json\n{\n \"projects\": [\n {\n \"type\": \"app\",\n \"name\": \"fancy-app\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"app\",\n \"name\": \"fancy-app-e2e\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"lib\",\n \"name\": \"feature-user\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"lib\",\n \"name\": \"feature-dashboard\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"lib\",\n \"name\": \"feature-cart\",\n \"data\": {\n \"tags\": []\n }\n }\n ],\n \"groupByFolder\": false,\n \"workspaceLayout\": {\n \"appsDir\": \"apps\",\n \"libsDir\": \"libs\"\n },\n \"dependencies\": {\n \"fancy-app\": [\n {\n \"target\": \"feature-user\",\n \"source\": \"fancy-app\",\n \"type\": \"static\"\n },\n {\n \"target\": \"feature-cart\",\n \"source\": \"fancy-app\",\n \"type\": \"static\"\n }\n ],\n \"fancy-app-e2e\": [\n {\n \"target\": \"fancy-app\",\n \"source\": \"fancy-app-e2e\",\n \"type\": \"implicit\"\n }\n ],\n \"feature-user\": [\n {\n \"target\": \"feature-dashboard\",\n \"source\": \"feature-user\",\n \"type\": \"direct\"\n }\n ],\n \"feature-cart\": [],\n \"feature-dashboard\": []\n },\n \"affectedProjectIds\": [\"feature-cart\", \"fancy-app\", \"fancy-app-e2e\"]\n}\n```\n\n{% /graph %}\n\nIn this case, if tests for the all the `feature-*` projects where contained in the `fancy-app-e2e` project, then all of those features will be tested in the app, when only the `feature-cart` tests need to run.\n\nRunning these e2e/integration tests more often than they should results in longer CI times.\n\nBrining those e2e test closer to each feature can result is lowering CI times since we don't need to test those features if they did not change.\n\nBuilding this way leaves the `fancy-app-e2e` for mostly smoke type testing instead of more in-depth feature testing.\n\nUsing the `cypress-e2e-configuration` generator can help you accomplish this in your workspace.\n\n```bash\nnx g cypress-e2e-configuration --project=feature-cart --devServerTarget=fancy-app:serve\nnx g cypress-e2e-configuration --project=feature-user --devServerTarget=fancy-app:serve\nnx g cypress-e2e-configuration --project=feature-dashboard --devServerTarget=fancy-app:serve\n```\n\nEach project will now get their own `e2e` target, where the feature project is only concerned with itself. This allows for more focused tests without worrying about forcing unrelated tests to also run.\n\nIt's important to remember that these feature tests are still going to be leveraging the same app to run the tests against so if you plan to run in parallel, you can leverage using a file server and the ability for `@nrwl/cypress:cypress` executor to pass through a port or find a free port to allow running tests in parallel. Read more [about the --port flag](/packages/cypress/executors/cypress#port)\n",
"examplesFile": "This is a generator to add a cypress e2e configuration to an existing project.\n\n```bash\nnx g cypress-e2e-configuration --project=my-cool-project --devServerTarget=some-app:serve\n```\n\nRunning this generator, adds the required files to run cypress tests for a project,\nMainly a `cypress.config.ts` file and default files in the `<project-root>/cypress/` directory.\nTests will be located in `<project-root>/cypress/e2e/*` by default.\n\nYou can customize the directory used via the `--directory` flag, the value is relative to the project root.\n\nFor example if you wanted to place the files inside an `e2e` folder\n\n```bash\nnx g cypress-e2e-configuration --project=my-cool-project --devServerTarget=some-app:serve --directory=e2e\n```\n\nProviding a `--devServerTarget` is optional if you provide a `--baseUrl` or the project you're adding the configuration to has a `serve` target already.\nOtherwise, a `--devServerTarget` is recommend for the `@nx/cypress:cypress` executor to spin up the dev server for you automatically when needed.\n\n## Feature Based Testing\n\nThis generator helps in creating feature based e2e/integration testing setups where you can place the feature tests in the same project as the feature library.\nThis differs from creating a separate e2e project that contained all tests for an application which can easily cause more tests to run than is strictly necessary.\n\nTake the following workspace where the `feature-cart` project is affected.\n\n{% graph height=\"450px\" %}\n\n```json\n{\n \"projects\": [\n {\n \"type\": \"app\",\n \"name\": \"fancy-app\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"app\",\n \"name\": \"fancy-app-e2e\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"lib\",\n \"name\": \"feature-user\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"lib\",\n \"name\": \"feature-dashboard\",\n \"data\": {\n \"tags\": []\n }\n },\n {\n \"type\": \"lib\",\n \"name\": \"feature-cart\",\n \"data\": {\n \"tags\": []\n }\n }\n ],\n \"groupByFolder\": false,\n \"workspaceLayout\": {\n \"appsDir\": \"apps\",\n \"libsDir\": \"libs\"\n },\n \"dependencies\": {\n \"fancy-app\": [\n {\n \"target\": \"feature-user\",\n \"source\": \"fancy-app\",\n \"type\": \"static\"\n },\n {\n \"target\": \"feature-cart\",\n \"source\": \"fancy-app\",\n \"type\": \"static\"\n }\n ],\n \"fancy-app-e2e\": [\n {\n \"target\": \"fancy-app\",\n \"source\": \"fancy-app-e2e\",\n \"type\": \"implicit\"\n }\n ],\n \"feature-user\": [\n {\n \"target\": \"feature-dashboard\",\n \"source\": \"feature-user\",\n \"type\": \"direct\"\n }\n ],\n \"feature-cart\": [],\n \"feature-dashboard\": []\n },\n \"affectedProjectIds\": [\"feature-cart\", \"fancy-app\", \"fancy-app-e2e\"]\n}\n```\n\n{% /graph %}\n\nIn this case, if tests for the all the `feature-*` projects where contained in the `fancy-app-e2e` project, then all of those features will be tested in the app, when only the `feature-cart` tests need to run.\n\nRunning these e2e/integration tests more often than they should results in longer CI times.\n\nBrining those e2e test closer to each feature can result is lowering CI times since we don't need to test those features if they did not change.\n\nBuilding this way leaves the `fancy-app-e2e` for mostly smoke type testing instead of more in-depth feature testing.\n\nUsing the `cypress-e2e-configuration` generator can help you accomplish this in your workspace.\n\n```bash\nnx g cypress-e2e-configuration --project=feature-cart --devServerTarget=fancy-app:serve\nnx g cypress-e2e-configuration --project=feature-user --devServerTarget=fancy-app:serve\nnx g cypress-e2e-configuration --project=feature-dashboard --devServerTarget=fancy-app:serve\n```\n\nEach project will now get their own `e2e` target, where the feature project is only concerned with itself. This allows for more focused tests without worrying about forcing unrelated tests to also run.\n\nIt's important to remember that these feature tests are still going to be leveraging the same app to run the tests against so if you plan to run in parallel, you can leverage using a file server and the ability for `@nx/cypress:cypress` executor to pass through a port or find a free port to allow running tests in parallel. Read more [about the --port flag](/packages/cypress/executors/cypress#port)\n",
"presets": []
},
"description": "Add a Cypress E2E Configuration to an existing project.",

2
docs/generated/packages/cypress/generators/cypress-project.json
View File

@ -73,7 +73,7 @@
}
},
"required": ["name"],
"examplesFile": "Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app\n```\n\nWhen providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner.\n\nIf you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project`\n\n```bash\nnx g cypress-project --name=my-app-e2e --base-url=http://localhost:1234\n```\n\n{% callout type=\"note\" title=\"What about API Projects?\" %}\nYou can also run the `cypress-project` generator against API projects like a [Nest API](/packages/nest/generators/application#@nrwl/nest:application).\nIf there is a URL to visit then you can test it with Cypress!\n{% /callout %}\n\n## Using Cypress with Vite.js\n\nNow, you can generate your Cypress project with Vite.js as the bundler:\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app --bundler=vite\n```\n\nThis generator will pass the `bundler` information (`bundler: 'vite'`) to our `nxE2EPreset`, in your project's `cypress.config.ts` file (eg. `my-app-e2e/cypress.config.ts`).\n\n### Customizing the Vite.js configuration\n\nThe `nxE2EPreset` will then use the `bundler` information to generate the correct settings for your Cypress project to use Vite.js. In the background, the way this works is that it's using a custom Vite preprocessor for your files, that's called on the `file:preprocessor` event. If you want to customize this behaviour, you can do so like this in your project's `cypress.config.ts` file:\n\n```ts\nimport { defineConfig } from 'cypress';\nimport { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';\n\nconst config = nxE2EPreset(__filename, { bundler: 'vite' });\nexport default defineConfig({\n e2e: {\n ...config,\n setupNodeEvents(on, config): {\n config.setupNodeEvents(on);\n // Your settings here\n }\n },\n});\n```\n",
"examplesFile": "Adding Cypress to an existing application requires two options. The name of the e2e app to create and what project that e2e app is for.\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app\n```\n\nWhen providing `--project` option, the generator will look for the `serve` target in that given project. This allows the [cypress executor](/packages/cypress/executors/cypress) to spin up the project and start the cypress runner.\n\nIf you prefer to not have the project served automatically, you can provide a `--base-url` argument in place of `--project`\n\n```bash\nnx g cypress-project --name=my-app-e2e --base-url=http://localhost:1234\n```\n\n{% callout type=\"note\" title=\"What about API Projects?\" %}\nYou can also run the `cypress-project` generator against API projects like a [Nest API](/packages/nest/generators/application#@nx/nest:application).\nIf there is a URL to visit then you can test it with Cypress!\n{% /callout %}\n\n## Using Cypress with Vite.js\n\nNow, you can generate your Cypress project with Vite.js as the bundler:\n\n```bash\nnx g cypress-project --name=my-app-e2e --project=my-app --bundler=vite\n```\n\nThis generator will pass the `bundler` information (`bundler: 'vite'`) to our `nxE2EPreset`, in your project's `cypress.config.ts` file (eg. `my-app-e2e/cypress.config.ts`).\n\n### Customizing the Vite.js configuration\n\nThe `nxE2EPreset` will then use the `bundler` information to generate the correct settings for your Cypress project to use Vite.js. In the background, the way this works is that it's using a custom Vite preprocessor for your files, that's called on the `file:preprocessor` event. If you want to customize this behaviour, you can do so like this in your project's `cypress.config.ts` file:\n\n```ts\nimport { defineConfig } from 'cypress';\nimport { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';\n\nconst config = nxE2EPreset(__filename, { bundler: 'vite' });\nexport default defineConfig({\n e2e: {\n ...config,\n setupNodeEvents(on, config): {\n config.setupNodeEvents(on);\n // Your settings here\n }\n },\n});\n```\n",
"presets": []
},
"description": "Add a Cypress E2E Project.",

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

@ -28,21 +28,21 @@ npm install -g jest
By default, when creating a mobile application, Nx will use Detox to create the e2e tests project.
```shell
nx g @nrwl/react-native:app frontend
nx g @nx/react-native:app frontend
```
### Creating a Detox E2E project for an existing project
You can create a new Detox E2E project for an existing mobile project.
If the `@nrwl/detox` package is not installed, install the version that matches your `@nrwl/workspace` version.
If the `@nx/detox` package is not installed, install the version that matches your `@nx/workspace` version.
{% tabs %}
{%tab label="npm"%}
```sh
# npm
npm install --save-dev @nrwl/detox
npm install --save-dev @nx/detox
```
{% /tab %}
@ -50,7 +50,7 @@ npm install --save-dev @nrwl/detox
```sh
# yarn
yarn add --dev @nrwl/detox
yarn add --dev @nx/detox
```
{% /tab %}
@ -59,7 +59,7 @@ yarn add --dev @nrwl/detox
Next, generate an E2E project based on an existing project.
```sh
nx g @nrwl/detox:app your-app-name-e2e --project=your-app-name
nx g @nx/detox:app your-app-name-e2e --project=your-app-name
```
Replace `your-app-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`.

16
docs/generated/packages/devkit/documents/ngcli_adapter.md
View File

@ -68,12 +68,12 @@ Example:
```typescript
overrideCollectionResolutionForTesting({
'@nrwl/workspace': path.join(
'@nx/workspace': path.join(
__dirname,
'../../../../workspace/generators.json'
),
'@nrwl/angular': path.join(__dirname, '../../../../angular/generators.json'),
'@nrwl/linter': path.join(__dirname, '../../../../linter/generators.json'),
'@nx/angular': path.join(__dirname, '../../../../angular/generators.json'),
'@nx/linter': path.join(__dirname, '../../../../linter/generators.json'),
});
```
@ -91,7 +91,7 @@ overrideCollectionResolutionForTesting({
### wrapAngularDevkitSchematic
▸ **wrapAngularDevkitSchematic**(`collectionName`, `generatorName`): (`host`: [`Tree`](../../devkit/documents/nrwl_devkit#tree), `generatorOptions`: { `[k: string]`: `any`; }) => `Promise`<`any`\>
▸ **wrapAngularDevkitSchematic**(`collectionName`, `generatorName`): (`host`: [`Tree`](../../devkit/documents/nx_devkit#tree), `generatorOptions`: { `[k: string]`: `any`; }) => `Promise`<`any`\>
#### Parameters
@ -108,10 +108,10 @@ overrideCollectionResolutionForTesting({
##### Parameters
| Name | Type |
| :----------------- | :------------------------------------------------ |
| `host` | [`Tree`](../../devkit/documents/nrwl_devkit#tree) |
| `generatorOptions` | `Object` |
| Name | Type |
| :----------------- | :---------------------------------------------- |
| `host` | [`Tree`](../../devkit/documents/nx_devkit#tree) |
| `generatorOptions` | `Object` |
##### Returns

866
docs/generated/packages/devkit/documents/nrwl_devkit.md → docs/generated/packages/devkit/documents/nx_devkit.md
View File

File diff suppressed because it is too large Load Diff

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

@ -17,14 +17,14 @@ To add the esbuild plugin to an existing workspace, run the following:
{% tab label="npm" %}
```shell
npm install -D @nrwl/esbuild
npm install -D @nx/esbuild
```
{% /tab %}
{% tab label="yarn" %}
```shell
yarn add -D @nrwl/esbuild
yarn add -D @nx/esbuild
```
{% /tab %}
@ -35,10 +35,10 @@ yarn add -D @nrwl/esbuild
You can add a new library that builds using esbuild with:
```shell
nx g @nrwl/js:lib mylib --bundler=esbuild
nx g @nx/js:lib mylib --bundler=esbuild
```
This command will install the esbuild plugin if needed, and set `@nrwl/esbuild:esbuild` executor for the `build` target.
This command will install the esbuild plugin if needed, and set `@nx/esbuild:esbuild` executor for the `build` target.
### Adding esbuild target to existing libraries
@ -70,7 +70,7 @@ Assets are non-JS and non-TS files, such as images, CSS, etc. You can add them t
```jsonc
"build": {
"executor": "@nrwl/esbuild:esbuild",
"executor": "@nx/esbuild:esbuild",
"options": {
//...
"assets": [
@ -120,7 +120,7 @@ Extra API options for esbuild can be passed in the `esbuildOptions` object for y
```jsonc
"build": {
"executor": "@nrwl/esbuild:esbuild",
"executor": "@nx/esbuild:esbuild",
"options": {
//...
"esbuildOptions": {

2
docs/generated/packages/esbuild/executors/esbuild.json
View File

@ -206,7 +206,7 @@
}
},
"additionalProperties": true,
"examplesFile": "`<app-root>/project.json`:\n\n```json\n{\n //...\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\"\n }\n }\n }\n}\n```\n\n```bash\nnx build <app-name>\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"CommonJS output\" %}\n\nThe CommonJS format is required in some environments, such as Electron applications. By default, `esbuild` will use the ESM format, which is recommended for Web and Node applications. You may also output to multiple formats.\n\n```bash\nnx build <app-name> --format=cjs\nnx build <app-name> --format=esm,cjs\nnx build <app-name> # defaults to es# defaults to esm\n```\n\n```json\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"format\": [\"esm\", \"cjs\"]\n}\n```\n\n{% /tab %}\n{% tab label=\"External packages\" %}\n\nYou can avoid packages from being bundled by providing the `external` option with a list of packages to skip.\n\nYou can also use `*` wildcard to match assets.\n\n```json\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"external\": [\"lodash\", \"*.png\"]\n}\n```\n\n{% /tab %}\n{% tab label=\"Skip type checking\" %}\n\nType checking is the slowest part of the build. You may want to skip type checking during build and run it as another job in CI.\n\n```json\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"skipTypeCheck\": true\n}\n```\n\n{% /tab %}\n{% tab label=\"Additional esbuild options\" %}\n\nAdditional [esbuild options](https://esbuild.github.io/api/) can be passed using `esbuildOptions` in your project configuration.\n\n```json\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"esbuildOptions\": {\n \"legalComments\": \"inline\"\n \"banner\": {\n \".js\": \"// banner\"\n },\n \"footer\": {\n \".js\": \"// footer\"\n }\n }\n}\n```\n\n{% /tab %}\n{% tabs %}\n",
"examplesFile": "`<app-root>/project.json`:\n\n```json\n{\n //...\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\"\n }\n }\n }\n}\n```\n\n```bash\nnx build <app-name>\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"CommonJS output\" %}\n\nThe CommonJS format is required in some environments, such as Electron applications. By default, `esbuild` will use the ESM format, which is recommended for Web and Node applications. You may also output to multiple formats.\n\n```bash\nnx build <app-name> --format=cjs\nnx build <app-name> --format=esm,cjs\nnx build <app-name> # defaults to es# defaults to esm\n```\n\n```json\n\"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"format\": [\"esm\", \"cjs\"]\n}\n```\n\n{% /tab %}\n{% tab label=\"External packages\" %}\n\nYou can avoid packages from being bundled by providing the `external` option with a list of packages to skip.\n\nYou can also use `*` wildcard to match assets.\n\n```json\n\"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"external\": [\"lodash\", \"*.png\"]\n}\n```\n\n{% /tab %}\n{% tab label=\"Skip type checking\" %}\n\nType checking is the slowest part of the build. You may want to skip type checking during build and run it as another job in CI.\n\n```json\n\"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"skipTypeCheck\": true\n}\n```\n\n{% /tab %}\n{% tab label=\"Additional esbuild options\" %}\n\nAdditional [esbuild options](https://esbuild.github.io/api/) can be passed using `esbuildOptions` in your project configuration.\n\n```json\n\"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n \"main\": \"<app-root>\",\n \"tsConfig\": \"<app-root>/tsconfig.app.json\",\n \"outputPath\": \"dist/<app-root>\",\n \"esbuildOptions\": {\n \"legalComments\": \"inline\"\n \"banner\": {\n \".js\": \"// banner\"\n },\n \"footer\": {\n \".js\": \"// footer\"\n }\n }\n}\n```\n\n{% /tab %}\n{% tabs %}\n",
"presets": []
},
"description": "Bundle a package using EsBuild.",

2
docs/generated/packages/esbuild/generators/esbuild-project.json
View File

@ -58,7 +58,7 @@
}
},
"required": [],
"examplesFile": "```bash\nnx g @nrwl/esbuild:esbuild-project my-package\n```\n\n{% callout type=\"note\" title=\"Overwriting existing build option\" %}\nThe `esbuild-projet` generator validates that an existing `build` target isn't already defined for the project. If you are adding esbuild to a project with an existing `build` target, pass the `--skipValidation` option.\n{% /callout %}\n\nYou may also provide a custom main entry file, or a custom tsconfig file if the defaults don't work. By default, the generator will look for a main file matching `src/index.ts` or `src/main.ts`, and a tsconfig file matching `tsconfig.app.json` or `tsconfig.lib.json`.\n\n```bash\nnx g @nrwl/esbuild:esbuild-project my-package \\\n--main=packages/my-package/src/entry.ts \\\n--tsConfig=packages/my-package/tsconfig.custom.json\n```\n",
"examplesFile": "```bash\nnx g @nx/esbuild:esbuild-project my-package\n```\n\n{% callout type=\"note\" title=\"Overwriting existing build option\" %}\nThe `esbuild-projet` generator validates that an existing `build` target isn't already defined for the project. If you are adding esbuild to a project with an existing `build` target, pass the `--skipValidation` option.\n{% /callout %}\n\nYou may also provide a custom main entry file, or a custom tsconfig file if the defaults don't work. By default, the generator will look for a main file matching `src/index.ts` or `src/main.ts`, and a tsconfig file matching `tsconfig.app.json` or `tsconfig.lib.json`.\n\n```bash\nnx g @nx/esbuild:esbuild-project my-package \\\n--main=packages/my-package/src/entry.ts \\\n--tsConfig=packages/my-package/tsconfig.custom.json\n```\n",
"presets": []
},
"description": "Add esbuild configuration to a project.",

4
docs/generated/packages/eslint-plugin/documents/enforce-module-boundaries.md
View File

@ -1,4 +1,4 @@
The `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. Enforcing strict boundaries helps to prevent unplanned cross-dependencies.
The `@nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. Enforcing strict boundaries helps to prevent unplanned cross-dependencies.
## Usage
@ -11,7 +11,7 @@ You can use the `enforce-module-boundaries` rule by adding it to your ESLint rul
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"@nrwl/nx/enforce-module-boundaries": [
"@nx/enforce-module-boundaries": [
"error",
{
// ...rule specific configuration

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

@ -1,23 +1,23 @@
The `@nrwl/eslint-plugin-nx` package is an ESLint plugin that contains a collection of recommended ESLint rule configurations which you can extend from in your own ESLint configs, as well as an Nx-specific lint rule called [enforce-module-boundaries](#enforce-module-boundaries-rule).
The `@nx/eslint-plugin` package is an ESLint plugin that contains a collection of recommended ESLint rule configurations which you can extend from in your own ESLint configs, as well as an Nx-specific lint rule called [enforce-module-boundaries](#enforce-module-boundaries-rule).
## Setting Up ESLint Plugin
### Installation
In any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:
In any Nx workspace, you can install `@nx/eslint-plugin` by running the following commands if the package is not already installed:
{% tabs %}
{%tab label="npm"%}
```shell
npm i --save-dev @nrwl/eslint-plugin-nx
npm i --save-dev @nx/eslint-plugin
```
{% /tab %}
{%tab label="yarn"%}
```shell
yarn add --dev @nrwl/eslint-plugin-nx
yarn add --dev @nx/eslint-plugin
```
{% /tab %}
@ -29,28 +29,28 @@ The plugin contains the following rule configurations divided into sub-plugins.
### JavaScript
The `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.
The `@nx/javascript` ESLint plugin contains best practices when using JavaScript.
### TypeScript
The `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.
The `@nx/typescript` ESLint plugin contains best practices when using TypeSript.
### Angular
Contains configurations matching best practices when using Angular framework:
- `@nrwl/nx/angular`
- `@nrwl/nx/angular-template`
- `@nx/angular`
- `@nx/angular-template`
### React
Contains configurations matching best practices when using React framework:
- `@nrwl/nx/react-base`
- `@nrwl/nx/react-jsx`
- `@nrwl/nx/react-typescript`
- `@nx/react-base`
- `@nx/react-jsx`
- `@nx/react-typescript`
You can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins
You can also use `@nx/react` which includes all three `@nx/react-*` plugins
### Enforce Module Boundaries rule

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

@ -18,14 +18,14 @@ Install the expo plugin
{%tab label="npm"%}
```shell
npm i --save-dev @nrwl/expo
npm i --save-dev @nx/expo
```
{% /tab %}
{%tab label="yarn"%}
```shell
yarn add --dev @nrwl/expo
yarn add --dev @nx/expo
```
{% /tab %}
@ -36,7 +36,7 @@ yarn add --dev @nrwl/expo
Add a new application to your workspace with the following command:
```shell
nx g @nrwl/expo:app my-app
nx g @nx/expo:app my-app
```
Start the application by running:
@ -50,7 +50,7 @@ nx start my-app
To generate a new library run:
```shell
npx nx g @nrwl/react-native:lib your-lib-name
npx nx g @nx/react-native:lib your-lib-name
```
### Generating Components
@ -58,7 +58,7 @@ npx nx g @nrwl/react-native:lib your-lib-name
To generate a new component inside library run:
```shell
npx nx g @nrwl/react-native:component your-component-name --project=your-lib-name --export
npx nx g @nx/react-native:component your-component-name --project=your-lib-name --export
```
Replace `your-lib-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`

2
docs/generated/packages/expo/executors/build-list.json
View File

@ -75,7 +75,7 @@
}
},
"required": [],
"examplesFile": "The `build-list` command allows to check the details of your Expo Application Services (EAS) build status.\n\n`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"build-list\": {\n \"executor\": \"@nrwl/expo:build-list\",\n \"options\": {}\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:build-list\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Get Status of Different Platforms\" %}\nThe `platform` option allows you to check build status of different platform (e.g. android, ios, all):\n\n```json\n \"build-list\": {\n \"executor\": \"@nrwl/expo:build-list\",\n \"options\": {\n \"platform\": \"ios\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Get Status Interactively\" %}\n\nThe `interactive` option allows you to specify whether to use interactive mode:\n\n```json\n \"build-list\": {\n \"executor\": \"@nrwl/expo:build-list\",\n \"options\": {\n \"interactive\": true\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Get Status in JSON Format\" %}\n\nThe `json` option allows you to print the output in JSON format:\n\n```json\n \"build-list\": {\n \"executor\": \"@nrwl/expo:build-list\",\n \"options\": {\n \"interactive\": false,\n \"json\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"examplesFile": "The `build-list` command allows to check the details of your Expo Application Services (EAS) build status.\n\n`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"build-list\": {\n \"executor\": \"@nx/expo:build-list\",\n \"options\": {}\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:build-list\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Get Status of Different Platforms\" %}\nThe `platform` option allows you to check build status of different platform (e.g. android, ios, all):\n\n```json\n \"build-list\": {\n \"executor\": \"@nx/expo:build-list\",\n \"options\": {\n \"platform\": \"ios\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Get Status Interactively\" %}\n\nThe `interactive` option allows you to specify whether to use interactive mode:\n\n```json\n \"build-list\": {\n \"executor\": \"@nx/expo:build-list\",\n \"options\": {\n \"interactive\": true\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Get Status in JSON Format\" %}\n\nThe `json` option allows you to print the output in JSON format:\n\n```json\n \"build-list\": {\n \"executor\": \"@nx/expo:build-list\",\n \"options\": {\n \"interactive\": false,\n \"json\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"presets": []
},
"description": "List all EAS builds for your Expo project",

2
docs/generated/packages/expo/executors/prebuild.json
View File

@ -34,7 +34,7 @@
"description": "Project template to clone from. File path pointing to a local tar file or a github repo"
}
},
"examplesFile": "The `prebuild` command generates native code before a native app can compile.\n\n`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"prebuild\": {\n \"executor\": \"@nrwl/expo:prebuild\",\n \"options\": {}\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:prebuild\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Generate Native Code for Different Platforms\" %}\nThe `platform` option allows you to specify the platform to generate native code for (e.g. android, ios, all).\n\n```json\n \"prebuild\": {\n \"executor\": \"@nrwl/expo:prebuild\",\n \"options\": {\n \"platform\": \"android\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Regenerate Native Code\" %}\n\nThe `clean` option allows you to delete the native folders and regenerate them before apply changes.\n\n```json\n \"prebuild\": {\n \"executor\": \"@nrwl/expo:prebuild\",\n \"options\": {\n \"clean\": true\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Install NPM Packages and CocoaPods\" %}\n\nThe `install` option allows you to install NPM Packages and CocoaPods.\n\n```json\n \"prebuild\": {\n \"executor\": \"@nrwl/expo:prebuild\",\n \"options\": {\n \"install\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"examplesFile": "The `prebuild` command generates native code before a native app can compile.\n\n`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"prebuild\": {\n \"executor\": \"@nx/expo:prebuild\",\n \"options\": {}\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:prebuild\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Generate Native Code for Different Platforms\" %}\nThe `platform` option allows you to specify the platform to generate native code for (e.g. android, ios, all).\n\n```json\n \"prebuild\": {\n \"executor\": \"@nx/expo:prebuild\",\n \"options\": {\n \"platform\": \"android\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Regenerate Native Code\" %}\n\nThe `clean` option allows you to delete the native folders and regenerate them before apply changes.\n\n```json\n \"prebuild\": {\n \"executor\": \"@nx/expo:prebuild\",\n \"options\": {\n \"clean\": true\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Install NPM Packages and CocoaPods\" %}\n\nThe `install` option allows you to install NPM Packages and CocoaPods.\n\n```json\n \"prebuild\": {\n \"executor\": \"@nx/expo:prebuild\",\n \"options\": {\n \"install\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"presets": []
},
"description": "Create native iOS and Android project files for building natively.",

2
docs/generated/packages/expo/executors/run.json
View File

@ -70,7 +70,7 @@
}
},
"required": ["platform"],
"examplesFile": "The `run` command allows you to compile your app locally.\n\n`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"run-ios\": {\n \"executor\": \"@nrwl/expo:run\",\n \"options\": {\n \"platform\": \"ios\"\n }\n },\n \"run-android\": {\n \"executor\": \"@nrwl/expo:run\",\n \"options\": {\n \"platform\": \"android\"\n }\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:run-ios\nnx run mobile:run-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Compile Android with Different Variants\" %}\nThe `variant` option allows you to specify the compile Android app with variants defined in `build.gradle` file (e.g. debug, release).\n\n```json\n \"run-android\": {\n \"executor\": \"@nrwl/expo:run\",\n \"options\": {\n \"platform\": \"android\",\n \"variant\": \"release\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Compile iOS with Different Configurations\" %}\n\nThe `xcodeConfiguration` option allows you to specify Xcode configuration to use (e.g. Debug or Release).\n\n```json\n \"run-ios\": {\n \"executor\": \"@nrwl/expo:run\",\n \"options\": {\n \"platform\": \"ios\",\n \"xcodeConfiguration\": \"Release\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Run on a device\" %}\n\nThe `device` option allows you to launch your app in a specific device name or UDID.\nTo see all your iOS simulators: run `xcrun simctl list devices available`.\nTo see all your Android emulators, run: `emulator -list-avds`.\n\n```json\n \"run-ios\": {\n \"executor\": \"@nrwl/expo:run\",\n \"options\": {\n \"platform\": \"ios\",\n \"device\": \"iPhone 14\"\n }\n },\n \"run-android\": {\n \"executor\": \"@nrwl/expo:run\",\n \"options\": {\n \"platform\": \"android\",\n \"device\": \"Pixel_XL_API_Tiramisu\"\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"examplesFile": "The `run` command allows you to compile your app locally.\n\n`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"run-ios\": {\n \"executor\": \"@nx/expo:run\",\n \"options\": {\n \"platform\": \"ios\"\n }\n },\n \"run-android\": {\n \"executor\": \"@nx/expo:run\",\n \"options\": {\n \"platform\": \"android\"\n }\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:run-ios\nnx run mobile:run-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Compile Android with Different Variants\" %}\nThe `variant` option allows you to specify the compile Android app with variants defined in `build.gradle` file (e.g. debug, release).\n\n```json\n \"run-android\": {\n \"executor\": \"@nx/expo:run\",\n \"options\": {\n \"platform\": \"android\",\n \"variant\": \"release\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Compile iOS with Different Configurations\" %}\n\nThe `xcodeConfiguration` option allows you to specify Xcode configuration to use (e.g. Debug or Release).\n\n```json\n \"run-ios\": {\n \"executor\": \"@nx/expo:run\",\n \"options\": {\n \"platform\": \"ios\",\n \"xcodeConfiguration\": \"Release\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Run on a device\" %}\n\nThe `device` option allows you to launch your app in a specific device name or UDID.\nTo see all your iOS simulators: run `xcrun simctl list devices available`.\nTo see all your Android emulators, run: `emulator -list-avds`.\n\n```json\n \"run-ios\": {\n \"executor\": \"@nx/expo:run\",\n \"options\": {\n \"platform\": \"ios\",\n \"device\": \"iPhone 14\"\n }\n },\n \"run-android\": {\n \"executor\": \"@nx/expo:run\",\n \"options\": {\n \"platform\": \"android\",\n \"device\": \"Pixel_XL_API_Tiramisu\"\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"presets": []
},
"description": "Run the Android app binary locally or run the iOS app binary locally",

2
docs/generated/packages/expo/executors/start.json
View File

@ -86,7 +86,7 @@
"description": "Allows this command to run while offline"
}
},
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"start\": {\n \"executor\": \"@nrwl/expo:start\",\n \"options\": {\n \"port\": 8081\n }\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:start\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Specify starting on platform\" %}\nThe `ios`, `android` and `web` option allows you to start the server on different platforms.\n\nOpens your app in Expo Go in a currently running iOS simulator on your computer:\n\n```json\n \"start\": {\n \"executor\": \"@nrwl/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"ios\": true\n }\n }\n```\n\nOpens your app in Expo Go on a connected Android device\n\n```json\n \"start\": {\n \"executor\": \"@nrwl/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"android\": true\n }\n }\n```\n\nOpens your app in a web browser:\n\n```json\n \"start\": {\n \"executor\": \"@nrwl/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"web\": true\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Specify the host\" %}\nThe `host` option allows you to specify the type of host to use. `lan` uses the local network; `tunnel` ues any network by tunnel through ngrok; `localhost` connects to the dev server over localhost.\n\n```json\n \"start\": {\n \"executor\": \"@nrwl/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"host\": \"localhost\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Starts the server with cache reset\" %}\n\nThe `clear` option allows you to remove Metro bundler cache.\n\n```json\n \"start\": {\n \"executor\": \"@nrwl/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"clear\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"start\": {\n \"executor\": \"@nx/expo:start\",\n \"options\": {\n \"port\": 8081\n }\n }\n //...\n }\n}\n```\n\n```shell\nnx run mobile:start\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Specify starting on platform\" %}\nThe `ios`, `android` and `web` option allows you to start the server on different platforms.\n\nOpens your app in Expo Go in a currently running iOS simulator on your computer:\n\n```json\n \"start\": {\n \"executor\": \"@nx/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"ios\": true\n }\n }\n```\n\nOpens your app in Expo Go on a connected Android device\n\n```json\n \"start\": {\n \"executor\": \"@nx/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"android\": true\n }\n }\n```\n\nOpens your app in a web browser:\n\n```json\n \"start\": {\n \"executor\": \"@nx/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"web\": true\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Specify the host\" %}\nThe `host` option allows you to specify the type of host to use. `lan` uses the local network; `tunnel` ues any network by tunnel through ngrok; `localhost` connects to the dev server over localhost.\n\n```json\n \"start\": {\n \"executor\": \"@nx/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"host\": \"localhost\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Starts the server with cache reset\" %}\n\nThe `clear` option allows you to remove Metro bundler cache.\n\n```json\n \"start\": {\n \"executor\": \"@nx/expo:start\",\n \"options\": {\n \"port\": 8081,\n \"clear\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"presets": []
},
"description": "Start a local dev server for the app or start a Webpack dev server for the web app",

12
docs/generated/packages/express/documents/overview.md
View File

@ -17,14 +17,14 @@ Install the express plugin
{%tab label="npm"%}
```shell
npm i --save-dev @nrwl/express
npm i --save-dev @nx/express
```
{% /tab %}
{%tab label="yarn"%}
```shell
yarn add --dev @nrwl/express
yarn add --dev @nx/express
```
{% /tab %}
@ -35,7 +35,7 @@ yarn add --dev @nrwl/express
Add a new application to your workspace with the following command:
```shell
nx g @nrwl/express:app my-app
nx g @nx/express:app my-app
```
Serve the application by running
@ -46,7 +46,7 @@ nx serve my-app
This starts the application on localhost:3333/api by default.
> Express does not come with any library generators, but you can leverage the[`@nrwl/js`](/packages/js#create-libraries) plugin to generate a Node.js library for your express application.
> Express does not come with any library generators, but you can leverage the[`@nx/js`](/packages/js#create-libraries) plugin to generate a Node.js library for your express application.
### Application Proxies
@ -54,7 +54,7 @@ The Express application generator has an option to configure other projects in t
can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
```shell
nx g @nrwl/express:app <express-app> --frontendProject my-react-app
nx g @nx/express:app <express-app> --frontendProject my-react-app
```
## Using Express
@ -89,5 +89,5 @@ before serving the Express application.
## More Documentation
- [Using Jest](/packages/jest)
- [@nrwl/js](/packages/js)
- [@nx/js](/packages/js)
- [Express](https://expressjs.com/)

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

@ -9,27 +9,27 @@
By default, Nx will use Jest when creating applications and libraries.
```shell
nx g @nrwl/web:app frontend
nx g @nx/web:app frontend
```
### Adding Jest to an Existing Project
Add Jest to a project using the `jest-project` generator from `@nrwl/jest`.
Add Jest to a project using the `jest-project` generator from `@nx/jest`.
First, install `@nrwl/jest`, if not already installed using your preferred package manager.
First, install `@nx/jest`, if not already installed using your preferred package manager.
```shell
npm install --save-dev @nrwl/jest
npm install --save-dev @nx/jest
```
```shell
yarn add --dev @nrwl/jest
yarn add --dev @nx/jest
```
Once installed, run the `jest-project` generator
```shell
nx g @nrwl/jest:jest-project --project=<project-name>
nx g @nx/jest:jest-project --project=<project-name>
```
> Hint: You can use the `--dry-run` flag to see what will be generated.
@ -99,12 +99,12 @@ Primary configurations for Jest will be via the `jest.config.ts` file that gener
The root level `jest.config.ts` file configures [Jest multi project support](https://jestjs.io/docs/configuration#projects-arraystring--projectconfig).
This configuration allows editor/IDE integrations to pick up individual project's configurations rather than the one at the root.
The set of Jest projects within Nx workspaces tends to change. Instead of statically defining a list in `jest.config.ts`, Nx provides a utility function called `getJestProjects` which queries for Jest configurations defined for targets which use the `@nrwl/jest:jest` executor.
The set of Jest projects within Nx workspaces tends to change. Instead of statically defining a list in `jest.config.ts`, Nx provides a utility function called `getJestProjects` which queries for Jest configurations defined for targets which use the `@nx/jest:jest` executor.
You can add Jest projects which are not included in `getJestProjects()`, because they do not use the Nx Jest executor, by doing something like the following:
```typescript {% fileName="jest.config.ts"}
import { getJestProjects } from '@nrwl/jest';
import { getJestProjects } from '@nx/jest';
export default {
projects: [...getJestProjects(), '<rootDir>/path/to/jest.config.ts'],
@ -135,7 +135,7 @@ In order to use Jest's global setup/teardown functions that reference nx librari
Nx provides a helper function that you can import within your setup/teardown file.
```typescript {% fileName="global-setup.ts" %}
import { registerTsProject } from '@nrwl/js/src/internal';
import { registerTsProject } from '@nx/js/src/internal';
const cleanupRegisteredPaths = registerTsProject('.', 'tsconfig.base.json');
import { yourFancyFunction } from '@some-org/my-util-library';
@ -166,4 +166,4 @@ export default {
## More Documentation
- [Jest Docs](https://jestjs.io/)
- [@nrwl/jest options](/packages/jest)
- [@nx/jest options](/packages/jest)

2
docs/generated/packages/jest/executors/jest.json
View File

@ -190,7 +190,7 @@
}
},
"required": ["jestConfig"],
"examplesFile": "Jest can be configured in many ways, but primarily you'll need to at least have the jestConfig options\n\n```json\n\"test\": {\n \"executor\": \"@nrwl/jest:jest\",\n \"options\": {\n \"jestConfig\": \"libs/my-lib/jest.config.ts\"\n }\n}\n```\n\nIt is also helpful to have `passWithNoTests: true` set so your project doesn't fail testing while tests are still being added.\n\n```json\n\"test\": {\n \"executor\": \"@nrwl/jest:jest\",\n \"options\": {\n \"jestConfig\": \"libs/my-lib/jest.config.ts\",\n \"passWithNoTests\": true\n }\n}\n```\n\n### Snapshots\n\nUpdate snapshots running with `--update-snapshot` or `-u` for short.\n\n```bash\nnx test my-project -u\n```\n\nOther times you might not want to allow updating snapshots such as in CI.\nAdding a _ci_ configuration is helpful for adding this behavior.\n\n```json\n\"test\": {\n \"executor\": \"@nrwl/jest:jest\",\n \"options\": {\n \"jestConfig\": \"libs/my-lib/jest.config.ts\",\n \"passWithNoTests\": true\n },\n \"configurations\": {\n \"ci\": {\n \"ci\": true\n }\n }\n}\n```\n\n```bash\nnx affected --target=test --configuration=ci\n```\n\nLearn more [about _affected_](/concepts/affected)\n"
"examplesFile": "Jest can be configured in many ways, but primarily you'll need to at least have the jestConfig options\n\n```json\n\"test\": {\n \"executor\": \"@nx/jest:jest\",\n \"options\": {\n \"jestConfig\": \"libs/my-lib/jest.config.ts\"\n }\n}\n```\n\nIt is also helpful to have `passWithNoTests: true` set so your project doesn't fail testing while tests are still being added.\n\n```json\n\"test\": {\n \"executor\": \"@nx/jest:jest\",\n \"options\": {\n \"jestConfig\": \"libs/my-lib/jest.config.ts\",\n \"passWithNoTests\": true\n }\n}\n```\n\n### Snapshots\n\nUpdate snapshots running with `--update-snapshot` or `-u` for short.\n\n```bash\nnx test my-project -u\n```\n\nOther times you might not want to allow updating snapshots such as in CI.\nAdding a _ci_ configuration is helpful for adding this behavior.\n\n```json\n\"test\": {\n \"executor\": \"@nx/jest:jest\",\n \"options\": {\n \"jestConfig\": \"libs/my-lib/jest.config.ts\",\n \"passWithNoTests\": true\n },\n \"configurations\": {\n \"ci\": {\n \"ci\": true\n }\n }\n}\n```\n\n```bash\nnx affected --target=test --configuration=ci\n```\n\nLearn more [about _affected_](/concepts/affected)\n"
},
"description": "Run Jest unit tests.",
"aliases": [],

24
docs/generated/packages/js/documents/overview.md
View File

@ -4,20 +4,20 @@ The JS plugin contains executors and generators that are useful for JavaScript/T
### Installation
In any Nx workspace, you can install `@nrwl/js` by running the following commands if `@nrwl/js` package is not installed:
In any Nx workspace, you can install `@nx/js` by running the following commands if `@nx/js` package is not installed:
{% tabs %}
{%tab label="npm"%}
```shell
npm i --save-dev @nrwl/js
npm i --save-dev @nx/js
```
{% /tab %}
{%tab label="yarn"%}
```shell
yarn add --dev @nrwl/js
yarn add --dev @nx/js
```
{% /tab %}
@ -25,7 +25,7 @@ yarn add --dev @nrwl/js
### `ts` Preset
When initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nrwl/js` pre-installed.
When initializing a new Nx workspace, specifying `--preset=ts` will generate a workspace with `@nx/js` pre-installed.
{% tabs %}
{%tab label="npm"%}
@ -49,7 +49,7 @@ yarn create nx-workspace my-org --preset=ts
You can add a new JS/TS library with the following command:
```shell
nx g @nrwl/js:lib my-lib
nx g @nx/js:lib my-lib
```
## Build
@ -57,7 +57,7 @@ nx g @nrwl/js:lib my-lib
You can `build` libraries that are generated with a bundler specified.
```shell
nx g @nrwl/js:lib my-buildable-lib --bundler=rollup
nx g @nx/js:lib my-buildable-lib --bundler=rollup
```
Generating a library with `--bundler` specified will add a `build` target to the library's `project.json` file allows the library to be built.
@ -84,9 +84,9 @@ nx lint my-lib
## Compiler
By default, `@nrwl/js` uses [TypeScript Compiler (TSC)](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#tsc-the-typescript-compiler), via `@nrwl/js:tsc` executor, to compile your libraries. Optionally, you can switch `tsc` out for a different compiler with `--compiler` flag when executing the generators.
By default, `@nx/js` uses [TypeScript Compiler (TSC)](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#tsc-the-typescript-compiler), via `@nx/js:tsc` executor, to compile your libraries. Optionally, you can switch `tsc` out for a different compiler with `--compiler` flag when executing the generators.
Currently, `@nrwl/js` supports the following compilers:
Currently, `@nx/js` supports the following compilers:
- [Speedy Web Compiler (SWC)](https://swc.rs)
@ -95,15 +95,15 @@ Currently, `@nrwl/js` supports the following compilers:
- Create a buildable library with `swc`
```shell
nx g @nrwl/js:lib my-swc-lib --bundler=swc
nx g @nx/js:lib my-swc-lib --bundler=swc
```
- Convert a `tsc` library to use `swc`
```shell
nx g @nrwl/js:convert-to-swc my-buildable-lib
nx g @nx/js:convert-to-swc my-buildable-lib
```
Now the `build` command will use `@nrwl/js:swc` executor to compile your libraries.
Now the `build` command will use `@nx/js:swc` executor to compile your libraries.
> The first time you generate a `swc` library or convert a `tsc` library over to `swc`, `@nrwl/js` will install the necessary dependencies to use `swc`.
> The first time you generate a `swc` library or convert a `tsc` library over to `swc`, `@nx/js` will install the necessary dependencies to use `swc`.

2
docs/generated/packages/js/executors/swc.json
View File

@ -158,7 +158,7 @@
]
}
},
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Inline libraries\" %}\n\n`@nrwl/js:swc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nrwl/js:swc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"all\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=all\n```\n\n`@nrwl/js:swc` can also inline buildable libraries by setting `external: 'none'`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nrwl/js:swc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"none\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=none\n```\n\n{% /tab %}\n{% tab label=\"Custom swcrc\" %}\n\n`@nrwl/js:swc` can compile your code with a custom `.swcrc`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nrwl/js:swc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"swcrc\": \"libs/ts-lib/.dev.swcrc\"\n },\n \"configurations\": {\n \"production\": {\n \"swcrc\": \"libs/ts-lib/.prod.swcrc\"\n }\n }\n }\n}\n```\n\n{% /tab %}\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Inline libraries\" %}\n\n`@nx/js:swc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nx/js:swc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"all\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=all\n```\n\n`@nx/js:swc` can also inline buildable libraries by setting `external: 'none'`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nx/js:swc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"none\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=none\n```\n\n{% /tab %}\n{% tab label=\"Custom swcrc\" %}\n\n`@nx/js:swc` can compile your code with a custom `.swcrc`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nx/js:swc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"swcrc\": \"libs/ts-lib/.dev.swcrc\"\n },\n \"configurations\": {\n \"production\": {\n \"swcrc\": \"libs/ts-lib/.prod.swcrc\"\n }\n }\n }\n}\n```\n\n{% /tab %}\n{% /tabs %}\n",
"presets": []
},
"description": "Build a project using SWC.",

2
docs/generated/packages/js/executors/tsc.json
View File

@ -171,7 +171,7 @@
]
}
},
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Using TypeScript Transformer Plugins\" %}\n\n`@nrwl/js:tsc` can run the [TypeScript Transformers](https://github.com/madou/typescript-transformer-handbook) by using the `transformers` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nrwl/js:tsc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"transformers\": [\n \"@nestjs/swagger/plugin\",\n {\n \"name\": \"@automapper/classes/transformer-plugin\",\n \"options\": {}\n }\n ]\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Inline libraries\" %}\n\n`@nrwl/js:tsc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nrwl/js:tsc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"all\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=all\n```\n\n`@nrwl/js:tsc` can also inline buildable libraries by setting `external: 'none'`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nrwl/js:tsc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"none\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=none\n```\n\n{% /tab %}\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Using TypeScript Transformer Plugins\" %}\n\n`@nx/js:tsc` can run the [TypeScript Transformers](https://github.com/madou/typescript-transformer-handbook) by using the `transformers` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nx/js:tsc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"transformers\": [\n \"@nestjs/swagger/plugin\",\n {\n \"name\": \"@automapper/classes/transformer-plugin\",\n \"options\": {}\n }\n ]\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Inline libraries\" %}\n\n`@nx/js:tsc` can inline non-buildable libraries by opt-in to **Inlining** mode with `external` option.\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nx/js:tsc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"all\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=all\n```\n\n`@nx/js:tsc` can also inline buildable libraries by setting `external: 'none'`\n\n```json {% fileName=\"libs/ts-lib/project.json\" %}\n{\n \"build\": {\n \"executor\": \"@nx/js:tsc\",\n \"options\": {\n \"outputPath\": \"dist/libs/ts-lib\",\n \"main\": \"libs/ts-lib/src/index.ts\",\n \"tsConfig\": \"libs/ts-lib/tsconfig.lib.json\",\n \"assets\": [\"libs/ts-lib/*.md\"],\n \"external\": \"none\"\n }\n }\n}\n```\n\n```shell\nnpx nx build ts-lib --external=none\n```\n\n{% /tab %}\n{% /tabs %}\n",
"presets": []
},
"description": "Build a project using TypeScript.",

2
docs/generated/packages/js/generators/library.json
View File

@ -135,7 +135,7 @@
}
},
"required": ["name"],
"examplesFile": "---\ntitle: JS library generator examples\ndescription: This page contains examples for the @nrwl/js:lib generator.\n---\n\nThe `@nrwl/js:lib` generator will generate a library for you, and it will configure it according to the options you provide.\n\n```bash\nnpx nx g @nrwl/js:lib mylib\n```\n\nBy default, the library that is generated when you use this executor without passing any options, like the example above, will be a buildable library, using the `@nrwl/js:tsc` executor as a builder.\n\nYou may configure the tools you want to use to build your library, or bundle it too, by passing the `--bundler` flag. The `--bundler` flag controls the compiler and/or the bundler that will be used to build your library. If you choose `tsc` or `swc`, the result will be a buildable library using either `tsc` or `swc` as the compiler. If you choose `rollup` or `vite`, the result will be a buildable library using `rollup` or `vite` as the bundler. In the case of `rollup`, it will default to the `tsc` compiler. If you choose `esbuild`, you may use the [`esbuildOptions` property](https://esbuild.github.io/api/) in your `project.json` under the `build` target options to specify whether you wish to bundle your library or not.\n\n## Examples\n\n{% tabs %}\n\n{% tab label=\"Buildable with default compiler (tsc)\" %}\n\nGenerate a buildable library using the `@nrwl/js:tsc` executor. This uses `tsc` as the compiler.\n\n```bash\nnpx nx g @nrwl/js:lib mylib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with SWC compiler\" %}\n\nGenerate a buildable library using [SWC](https://swc.rs) as the compiler. This will use the `@nrwl/js:swc` executor.\n\n```bash\nnpx nx g @nrwl/js:lib mylib --bundler=swc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with tsc\" %}\n\nGenerate a buildable library using tsc as the compiler. This will use the `@nrwl/js:tsc` executor.\n\n```bash\nnpx nx g @nrwl/js:lib mylib --bundler=tsc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Rollup as a bundler\" %}\n\nGenerate a buildable library using [Rollup](https://rollupjs.org) as the bundler. This will use the `@nrwl/rollup:rollup` executor. It will also use [SWC](https://swc.rs) as the compiler.\n\n```bash\nnpx nx g @nrwl/js:lib mylib --bundler=rollup\n```\n\nIf you do not want to use `swc` as the compiler, and want to use the default `babel` compiler, you can do so in your `project.json` under the `build` target options, using the [`compiler` property](https://nx.dev/packages/rollup/executors/rollup#compiler):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nrwl/rollup:rollup\",\n \"options\": {\n //...\n \"compiler\": \"babel\"\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Vite as a bundler\" %}\n\nGenerate a buildable library using [Vite](https://vitejs.dev/) as the bundler. This will use the `@nrwl/vite:build` executor.\n\n```bash\nnpx nx g @nrwl/js:lib mylib --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Using ESBuild\" %}\n\nGenerate a buildable library using [ESBuild](https://esbuild.github.io/) as the bundler. This will use the `@nrwl/esbuild:esbuild` executor.\n\n```bash\nnpx nx g @nrwl/js:lib mylib --bundler=esbuild\n```\n\nIf you want to specify whether you want to bundle your library or not, you can do so in your `project.json` under the `build` target options, using the [`esbuildOptions` property](https://esbuild.github.io/api/):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nrwl/esbuild:esbuild\",\n \"options\": {\n //...\n \"esbuildOptions\": {\n \"bundle\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Minimal publishing target\" %}\n\nGenerate a **publishable** library with a minimal publishing target. The result will be a buildable library using the `@nrwl/js:tsc` executor, using `tsc` as the compiler. You can change the compiler or the bundler by passing the `--bundler` flag.\n\n```bash\nnpx nx g lib mylib --publishable\n```\n\n{% /tab %}\n\n{% tab label=\"Using directory flag\" %}\n\nGenerate a library named `mylib` and put it under a directory named `myapp` (`libs/myapp/mylib`)\n\n```shell\nnpx nx g lib mylib --directory=myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Non-buildable library\" %}\n\nGenerate a non-buildable library.\n\n```bash\nnpx nx g @nrwl/js:lib mylib --bundler=none\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"examplesFile": "---\ntitle: JS library generator examples\ndescription: This page contains examples for the @nx/js:lib generator.\n---\n\nThe `@nx/js:lib` generator will generate a library for you, and it will configure it according to the options you provide.\n\n```bash\nnpx nx g @nx/js:lib mylib\n```\n\nBy default, the library that is generated when you use this executor without passing any options, like the example above, will be a buildable library, using the `@nx/js:tsc` executor as a builder.\n\nYou may configure the tools you want to use to build your library, or bundle it too, by passing the `--bundler` flag. The `--bundler` flag controls the compiler and/or the bundler that will be used to build your library. If you choose `tsc` or `swc`, the result will be a buildable library using either `tsc` or `swc` as the compiler. If you choose `rollup` or `vite`, the result will be a buildable library using `rollup` or `vite` as the bundler. In the case of `rollup`, it will default to the `tsc` compiler. If you choose `esbuild`, you may use the [`esbuildOptions` property](https://esbuild.github.io/api/) in your `project.json` under the `build` target options to specify whether you wish to bundle your library or not.\n\n## Examples\n\n{% tabs %}\n\n{% tab label=\"Buildable with default compiler (tsc)\" %}\n\nGenerate a buildable library using the `@nx/js:tsc` executor. This uses `tsc` as the compiler.\n\n```bash\nnpx nx g @nx/js:lib mylib\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with SWC compiler\" %}\n\nGenerate a buildable library using [SWC](https://swc.rs) as the compiler. This will use the `@nx/js:swc` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=swc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable with tsc\" %}\n\nGenerate a buildable library using tsc as the compiler. This will use the `@nx/js:tsc` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=tsc\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Rollup as a bundler\" %}\n\nGenerate a buildable library using [Rollup](https://rollupjs.org) as the bundler. This will use the `@nx/rollup:rollup` executor. It will also use [SWC](https://swc.rs) as the compiler.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=rollup\n```\n\nIf you do not want to use `swc` as the compiler, and want to use the default `babel` compiler, you can do so in your `project.json` under the `build` target options, using the [`compiler` property](https://nx.dev/packages/rollup/executors/rollup#compiler):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nx/rollup:rollup\",\n \"options\": {\n //...\n \"compiler\": \"babel\"\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Buildable, with Vite as a bundler\" %}\n\nGenerate a buildable library using [Vite](https://vitejs.dev/) as the bundler. This will use the `@nx/vite:build` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Using ESBuild\" %}\n\nGenerate a buildable library using [ESBuild](https://esbuild.github.io/) as the bundler. This will use the `@nx/esbuild:esbuild` executor.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=esbuild\n```\n\nIf you want to specify whether you want to bundle your library or not, you can do so in your `project.json` under the `build` target options, using the [`esbuildOptions` property](https://esbuild.github.io/api/):\n\n```jsonc {% fileName=\"libs/mylib/project.json\" %}\n\"build\": {\n \"executor\": \"@nx/esbuild:esbuild\",\n \"options\": {\n //...\n \"esbuildOptions\": {\n \"bundle\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Minimal publishing target\" %}\n\nGenerate a **publishable** library with a minimal publishing target. The result will be a buildable library using the `@nx/js:tsc` executor, using `tsc` as the compiler. You can change the compiler or the bundler by passing the `--bundler` flag.\n\n```bash\nnpx nx g lib mylib --publishable\n```\n\n{% /tab %}\n\n{% tab label=\"Using directory flag\" %}\n\nGenerate a library named `mylib` and put it under a directory named `myapp` (`libs/myapp/mylib`)\n\n```shell\nnpx nx g lib mylib --directory=myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Non-buildable library\" %}\n\nGenerate a non-buildable library.\n\n```bash\nnpx nx g @nx/js:lib mylib --bundler=none\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
"presets": []
},
"aliases": ["lib"],

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

@ -4,14 +4,14 @@ The Linter plugin contains executors, generator, plugin and utilities used for l
### Installation
In any Nx workspace, you can install `@nrwl/linter` by running the following commands if `@nrwl/linter` package is not installed:
In any Nx workspace, you can install `@nx/linter` by running the following commands if `@nx/linter` package is not installed:
```shell
npm i --save-dev @nrwl/linter
npm i --save-dev @nx/linter
```
```shell
yarn add --dev @nrwl/linter
yarn add --dev @nx/linter
```
## Lint

2
docs/generated/packages/linter/executors/eslint.json
View File

@ -131,7 +131,7 @@
}
},
"required": ["lintFilePatterns"],
"examplesFile": "Linter can be configured in multiple ways. The basic way is to provide only `lintFilePatterns`, which is a mandatory property. This tells us where to look for files to lint.\n\n`project.json`:\n\n```json\n\"lint\": {\n \"executor\": \"@nrwl/linter:eslint\",\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"]\n }\n}\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Fixing linter issues\" %}\n\nLinter provides an automated way of fixing known issues. To ensure that those changes are properly cached, we need to add an `outputs` property to the `lint` target. Omitting the `outputs` property would produce an invalid cache record. Both of these properties are set by default when scaffolding a new project.\n\n```json\n\"lint\": {\n \"executor\": \"@nrwl/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"]\n }\n}\n```\n\nWith these settings, we can run the command with a `--fix` flag:\n\n```bash\nnx run frontend:lint --fix\n```\n\nWe can also set this flag via project configuration to always fix files when running lint:\n\n```json\n\"lint\": {\n \"executor\": \"@nrwl/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"fix\": true\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Custom output format\" %}\n\nESLint executor uses the `stylish` output format by default. You can change this by specifying the `format` property:\n\n```json\n\"lint\": {\n \"executor\": \"@nrwl/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"format\": \"compact\"\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Silence warnings\" %}\n\nMigrated or legacy projects tend to have an overwhelming amount of lint errors. We might want to change those temporarily to be warnings so they don't block the development. But they would still clutter the report. We can run the command with `--quiet` to hide warning (errors would still break the lint):\n\n```bash\nnx run frontend:lint --quiet\n```\n\nWe can also set this via project configuration as a default option.\n\n```json\n\"lint\": {\n \"executor\": \"@nrwl/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"quiet\": true\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"ESLint config file\" %}\n\n`ESLint` provides several ways of specifying the configuration. The default one is using `.eslintrc.json` but you can override it by setting the `eslintConfig` flag:\n\n```json\n\"lint\": {\n \"executor\": \"@nrwl/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"eslintConfig\": \".eslintrc.js\"\n }\n}\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"examplesFile": "Linter can be configured in multiple ways. The basic way is to provide only `lintFilePatterns`, which is a mandatory property. This tells us where to look for files to lint.\n\n`project.json`:\n\n```json\n\"lint\": {\n \"executor\": \"@nx/linter:eslint\",\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"]\n }\n}\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Fixing linter issues\" %}\n\nLinter provides an automated way of fixing known issues. To ensure that those changes are properly cached, we need to add an `outputs` property to the `lint` target. Omitting the `outputs` property would produce an invalid cache record. Both of these properties are set by default when scaffolding a new project.\n\n```json\n\"lint\": {\n \"executor\": \"@nx/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"]\n }\n}\n```\n\nWith these settings, we can run the command with a `--fix` flag:\n\n```bash\nnx run frontend:lint --fix\n```\n\nWe can also set this flag via project configuration to always fix files when running lint:\n\n```json\n\"lint\": {\n \"executor\": \"@nx/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"fix\": true\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Custom output format\" %}\n\nESLint executor uses the `stylish` output format by default. You can change this by specifying the `format` property:\n\n```json\n\"lint\": {\n \"executor\": \"@nx/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"format\": \"compact\"\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Silence warnings\" %}\n\nMigrated or legacy projects tend to have an overwhelming amount of lint errors. We might want to change those temporarily to be warnings so they don't block the development. But they would still clutter the report. We can run the command with `--quiet` to hide warning (errors would still break the lint):\n\n```bash\nnx run frontend:lint --quiet\n```\n\nWe can also set this via project configuration as a default option.\n\n```json\n\"lint\": {\n \"executor\": \"@nx/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"quiet\": true\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"ESLint config file\" %}\n\n`ESLint` provides several ways of specifying the configuration. The default one is using `.eslintrc.json` but you can override it by setting the `eslintConfig` flag:\n\n```json\n\"lint\": {\n \"executor\": \"@nx/linter:eslint\",\n \"outputs\": [\"{options.outputFile}\"],\n \"options\": {\n \"lintFilePatterns\": [\"apps/frontend/**/*.ts\"],\n \"eslintConfig\": \".eslintrc.js\"\n }\n}\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"presets": []
},
"hasher": "./src/executors/eslint/hasher",

2
docs/generated/packages/linter/generators/workspace-rule.json
View File

@ -22,7 +22,7 @@
}
},
"required": ["name", "directory"],
"examplesFile": "{% tabs %}\n{% tab label=\"Create rule\" %}\n\nThis command will generate a new workspace lint rule called `my-custom-rule`. The new rule will be generated in `tools/eslint-rules/rules` folder:\n\n```shell\nnx g @nrwl/linter:workspace-rule my-custom-rule\n```\n\n{% /tab %}\n{% tab label=\"Custom sub-folder\" %}\n\nWe can change the default sub-folder from `rules` and specify a custom one:\n\n```shell\nnx g @nrwl/linter:workspace-rule --name=my-custom-rule --directory=my/custom/path\n```\n\nThe command above will generate the rule in `tools/eslint-rules/my/custom/path` folder.\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"examplesFile": "{% tabs %}\n{% tab label=\"Create rule\" %}\n\nThis command will generate a new workspace lint rule called `my-custom-rule`. The new rule will be generated in `tools/eslint-rules/rules` folder:\n\n```shell\nnx g @nx/linter:workspace-rule my-custom-rule\n```\n\n{% /tab %}\n{% tab label=\"Custom sub-folder\" %}\n\nWe can change the default sub-folder from `rules` and specify a custom one:\n\n```shell\nnx g @nx/linter:workspace-rule --name=my-custom-rule --directory=my/custom/path\n```\n\nThe command above will generate the rule in `tools/eslint-rules/my/custom/path` folder.\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"presets": []
},
"description": "Create a new Workspace ESLint rule.",

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

@ -24,11 +24,11 @@ yarn create nx-workspace my-workspace --preset=nest
To add the Nest plugin to an existing workspace, run one the following commands:
```shell
npm install -D @nrwl/nest
npm install -D @nx/nest
```
```shell
yarn add -D @nrwl/nest
yarn add -D @nx/nest
```
### Create Applications
@ -36,7 +36,7 @@ yarn add -D @nrwl/nest
You can add a new Nest application with the following command:
```shell
nx g @nrwl/nest:app my-nest-app
nx g @nx/nest:app my-nest-app
```
#### Application Proxies
@ -44,7 +44,7 @@ nx g @nrwl/nest:app my-nest-app
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
```shell
nx g @nrwl/nest:app my-nest-app --frontendProject my-angular-app
nx g @nx/nest:app my-nest-app --frontendProject my-angular-app
```
### Create Libraries
@ -52,19 +52,19 @@ nx g @nrwl/nest:app my-nest-app --frontendProject my-angular-app
You can add a new Nest library with the following command:
```shell
nx g @nrwl/nest:lib my-nest-lib
nx g @nx/nest:lib my-nest-lib
```
To make the library `buildable`, use the following command:
```shell
nx g @nrwl/nest:lib my-nest-lib --buildable
nx g @nx/nest:lib my-nest-lib --buildable
```
To make the library `publishable`, use the following command:
```shell
nx g @nrwl/nest:lib my-nest-lib --publishable --importPath=@my-workspace/my-nest-lib
nx g @nx/nest:lib my-nest-lib --publishable --importPath=@my-workspace/my-nest-lib
```
> Read more about [building and publishing libraries here](/more-concepts/buildable-and-publishable-libraries).

8
docs/generated/packages/next/documents/next-config-setup.md
View File

@ -22,7 +22,7 @@ module.exports = withNx({
});
```
This guide contains information on how to compose the Nx plugin with other plugins, such as `@next/mdx`. Note that Nx prior to version 16 is missing the compose utility from the `@nrwl/next` package, and a workaround will be provided for Nx 15 and prior.
This guide contains information on how to compose the Nx plugin with other plugins, such as `@next/mdx`. Note that Nx prior to version 16 is missing the compose utility from the `@nx/next` package, and a workaround will be provided for Nx 15 and prior.
{% callout type="warning" title="Avoid next-compose-plugins" %}
There is a popular package called `next-compose-plugins` that has not been maintained for over two years. This package does not correctly combine plugins in all situations. If you do use it, replace the package with Nx 16's `composePlugins` utility (see below).
@ -34,9 +34,9 @@ Since Nx 16, we provide a `composePlugins` utility function that helps users com
```js
// next.config.js
const { composePlugins, withNx } = require('@nrwl/next');
const { composePlugins, withNx } = require('@nx/next');
/**
* @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
@ -87,7 +87,7 @@ If you are not on Nx 16 and later versions, the `composePlugins` utility is not
// ...
/**
* @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
// ...

16
docs/generated/packages/next/documents/overview.md
View File

@ -10,16 +10,16 @@ The Next.js plugin contains executors and generators for managing Next.js applic
To create a new Nx workspace with Next.js, run `npx create-nx-workspace@latest --preset=next`.
To add Next.js to an existing Nx workspace, install the `@nrwl/next` package. Make sure to install the version that matches your `@nrwl/workspace` version.
To add Next.js to an existing Nx workspace, install the `@nx/next` package. Make sure to install the version that matches your `@nx/workspace` version.
```shell
#yarn
yarn add --dev @nrwl/next
yarn add --dev @nx/next
```
```shell
#npm
npm install --save-dev @nrwl/next
npm install --save-dev @nx/next
```
### Creating Applications
@ -27,7 +27,7 @@ npm install --save-dev @nrwl/next
You can add a new application with the following:
```shell
nx g @nrwl/next:app my-new-app
nx g @nx/next:app my-new-app
```
### Generating Libraries
@ -44,7 +44,7 @@ and [Library Types](/more-concepts/library-types).
To generate a new library run:
```shell
nx g @nrwl/next:lib my-new-lib
nx g @nx/next:lib my-new-lib
```
### Generating Pages and Components
@ -52,9 +52,9 @@ nx g @nrwl/next:lib my-new-lib
Nx also provides commands to quickly generate new pages and components for your application.
```shell
nx g @nrwl/next:page my-new-page --project=my-new-app
nx g @nx/next:page my-new-page --project=my-new-app
nx g @nrwl/next:component my-new-component --project=my-new-app
nx g @nx/next:component my-new-component --project=my-new-app
```
Above commands will add a new page `my-new-page` and a component `my-new-component` to `my-new-app` project respectively.
@ -98,7 +98,7 @@ There is no need to build the library prior to using it. When you update your li
For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options.
```shell
nx g @nrwl/next:lib my-new-lib --publishable --importPath=@happynrwl/ui-components
nx g @nx/next:lib my-new-lib --publishable --importPath=@happynrwl/ui-components
```
### Testing Projects

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

@ -6,10 +6,10 @@ To add the Node plugin to an existing workspace, run one of the following:
```shell
# For npm users
npm install -D @nrwl/node
npm install -D @nx/node
# For yarn users
yarn add -D @nrwl/node
yarn add -D @nx/node
```
### Creating Applications
@ -17,7 +17,7 @@ yarn add -D @nrwl/node
You can add a new application with the following:
```shell
nx g @nrwl/node:application my-new-app
nx g @nx/node:application my-new-app
```
You can run your application with `nx serve my-new-app`, which starts it in watch mode.
@ -27,11 +27,11 @@ You can run your application with `nx serve my-new-app`, which starts it in watc
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
```shell
nx g @nrwl/node:lib my-new-lib
nx g @nx/node:lib my-new-lib
# If you want the library to be buildable or publishable to npm
nx g @nrwl/node:lib my-new-lib --buildable
nx g @nrwl/node:lib my-new-lib \
nx g @nx/node:lib my-new-lib --buildable
nx g @nx/node:lib my-new-lib \
--publishable \
--importPath=@myorg/my-new-lib
```
@ -70,7 +70,7 @@ The output is in the `dist` folder. You can customize the output folder by setti
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
```shell
nx g @nrwl/node:application my-new-app \
nx g @nx/node:application my-new-app \
--frontendProject my-react-app
```

14
docs/generated/packages/nx/documents/generate.md
View File

@ -24,43 +24,43 @@ Install `nx` globally to invoke the command directly using `nx`, or use `npx nx`
Generate a new Angular application:
```shell
nx generate @nrwl/angular:app myapp
nx generate @nx/angular:app myapp
```
Generate a new React application:
```shell
nx generate @nrwl/react:app myapp
nx generate @nx/react:app myapp
```
Generate a new web component application:
```shell
nx generate @nrwl/web:app myapp
nx generate @nx/web:app myapp
```
Generate a new Node application:
```shell
nx generate @nrwl/node:app myapp
nx generate @nx/node:app myapp
```
Generate a new Angular library application:
```shell
nx generate @nrwl/angular:library mylibrary
nx generate @nx/angular:library mylibrary
```
Generate a new React library application:
```shell
nx generate @nrwl/react:library mylibrary
nx generate @nx/react:library mylibrary
```
Generate a new Node library application:
```shell
nx generate @nrwl/node:library mylibrary
nx generate @nx/node:library mylibrary
```
## Options

4
docs/generated/packages/nx/documents/list.md
View File

@ -23,10 +23,10 @@ List the plugins installed in the current workspace:
nx list
```
List the generators and executors available in the `@nrwl/web` plugin if it is installed (If the plugin is not installed `nx` will show advice on how to add it to your workspace):
List the generators and executors available in the `@nx/web` plugin if it is installed (If the plugin is not installed `nx` will show advice on how to add it to your workspace):
```shell
nx list @nrwl/web
nx list @nx/web
```
## Options

18
docs/generated/packages/nx/documents/migrate.md
View File

@ -2,7 +2,7 @@
title: 'migrate - CLI command'
description:
'Creates a migrations file or runs migrations from the migrations file.
- Migrate packages and create migrations.json (e.g., nx migrate @nrwl/workspace@latest)
- Migrate packages and create migrations.json (e.g., nx migrate @nx/workspace@latest)
- Run migrations (e.g., nx migrate --run-migrations=migrations.json). Use flag --if-exists to run migrations only if the migrations file exists.'
---
@ -10,7 +10,7 @@ description:
Creates a migrations file or runs migrations from the migrations file.
- Migrate packages and create migrations.json (e.g., nx migrate @nrwl/workspace@latest)
- Migrate packages and create migrations.json (e.g., nx migrate @nx/workspace@latest)
- Run migrations (e.g., nx migrate --run-migrations=migrations.json). Use flag --if-exists to run migrations only if the migrations file exists.
## Usage
@ -35,16 +35,16 @@ Update all Nx plugins to "9.0.0". This will generate migrations.json:
nx migrate 9.0.0
```
Update @nrwl/workspace and generate the list of migrations starting with version 8.0.0 of @nrwl/workspace and @nrwl/node, regardless of what is installed locally:
Update @nx/workspace and generate the list of migrations starting with version 8.0.0 of @nx/workspace and @nx/node, regardless of what is installed locally:
```shell
nx migrate @nrwl/workspace@9.0.0 --from="@nrwl/workspace@8.0.0,@nrwl/node@8.0.0"
nx migrate @nx/workspace@9.0.0 --from="@nx/workspace@8.0.0,@nx/node@8.0.0"
```
Update @nrwl/workspace to "9.0.0". If it tries to update @nrwl/react or @nrwl/angular, use version "9.0.1":
Update @nx/workspace to "9.0.0". If it tries to update @nx/react or @nx/angular, use version "9.0.1":
```shell
nx migrate @nrwl/workspace@9.0.0 --to="@nrwl/react@9.0.1,@nrwl/angular@9.0.1"
nx migrate @nx/workspace@9.0.0 --to="@nx/react@9.0.1,@nx/angular@9.0.1"
```
Update another-package to "12.0.0". This will update other packages and will generate migrations.json file:
@ -107,7 +107,7 @@ Exclude migrations that should have been applied on previous updates. To be used
Type: `string`
Use the provided versions for packages instead of the ones installed in node_modules (e.g., --from="@nrwl/react@12.0.0,@nrwl/js@12.0.0")
Use the provided versions for packages instead of the ones installed in node_modules (e.g., --from="@nx/react@12.0.0,@nx/js@12.0.0")
### help
@ -135,7 +135,7 @@ Enable prompts to confirm whether to collect optional package updates and migrat
Type: `string`
The target package and version (e.g, @nrwl/workspace@13.0.0)
The target package and version (e.g, @nx/workspace@13.0.0)
### runMigrations
@ -147,7 +147,7 @@ Execute migrations from a file (when the file isn't provided, execute migrations
Type: `string`
Use the provided versions for packages instead of the ones calculated by the migrator (e.g., --to="@nrwl/react@12.0.0,@nrwl/js@12.0.0")
Use the provided versions for packages instead of the ones calculated by the migrator (e.g., --to="@nx/react@12.0.0,@nx/js@12.0.0")
### version

2
docs/generated/packages/nx/documents/workspace-generator.md
View File

@ -31,7 +31,7 @@ Preview the changes without updating files
Type: `string`
Name of the generator (e.g., @nrwl/js:library, library)
Name of the generator (e.g., @nx/js:library, library)
### help

12
docs/generated/packages/plugin/documents/overview.md
View File

@ -4,7 +4,7 @@ At its core, a generator is a function that creates or modifies code and an exec
> A list of plugins that is maintained by Nrwl is found in the [Nrwl/nx repo](https://github.com/nrwl/nx/tree/master/packages). \
> A list of custom plugins created by the community is found in the [Community](/community) section.
> Plugins are written using Nx Devkit. **Read [Nx Devkit](/packages/devkit/documents/nrwl_devkit) for more information.**
> Plugins are written using Nx Devkit. **Read [Nx Devkit](/packages/devkit/documents/nx_devkit) for more information.**
{% youtube
src="https://www.youtube.com/embed/fC1-4fAZDP4"
@ -25,7 +25,7 @@ This command creates a brand-new workspace, and sets up a pre-configured plugin
> Note, the command above will create a plugin with the package name set to `@my-org/my-plugin`. You can pass `--importPath` to provide a different package name.
> If you do not want to create a new workspace, install the `@nrwl/nx-plugin` dependency in an already existing workspace with npm or yarn. Then run `nx g @nrwl/nx-plugin:plugin [pluginName]`.
> If you do not want to create a new workspace, install the `@nx/plugin` dependency in an already existing workspace with npm or yarn. Then run `nx g @nx/plugin:plugin [pluginName]`.
A new plugin is created with a default generator, executor, and e2e app.
@ -51,7 +51,7 @@ The `schema.d.ts` file is used for type checking inside the implementation file.
### Adding more generators
To add more generators to the plugin, run the following command:
`nx generate @nrwl/nx-plugin:generator [generatorName] --project=[pluginName]`.
`nx generate @nx/plugin:generator [generatorName] --project=[pluginName]`.
This will scaffold out a new generator and update the necessary files to support it.
@ -76,7 +76,7 @@ The default executor is set up to just emit a console log. Some examples of what
### Adding more executors
To add more executors to the plugin, run the following command:
`nx generate @nrwl/nx-plugin:executor [executor] --project=[pluginName]`.
`nx generate @nx/plugin:executor [executor] --project=[pluginName]`.
This will scaffold out a new generator and update the necessary files to support it.
@ -117,7 +117,7 @@ it('should create my-plugin', async (done) => {
- The `ensureNxProject` is the function that will create the temporary directory. It takes two arguments, the plugin package name and the dist directory of when it's built.
- The `runNxCommandAsync` will execute a `nx` command in the E2E directory.
There are additional functions that the `@nrwl/nx-plugin/testing` package exports. Most of them are file utilities to manipulate and read files in the E2E directory.
There are additional functions that the `@nx/plugin/testing` package exports. Most of them are file utilities to manipulate and read files in the E2E directory.
## Including Assets
@ -127,7 +127,7 @@ To make sure that assets are copied to the dist folder, open the plugin's `proje
```jsonc {% fileName="project.json" %}
"build": {
"executor": "@nrwl/node:package",
"executor": "@nx/node:package",
"options": {
// shortened...
"assets": [

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

@ -28,20 +28,20 @@ npx create-nx-workspace your-workspace-name
### Adding React Native to an Existing Workspace
For existing Nx workspaces, install the `@nrwl/react-native` package to add React Native capabilities to it.
For existing Nx workspaces, install the `@nx/react-native` package to add React Native capabilities to it.
{% tabs %}
{%tab label="npm"%}
```shell
npm i --save-dev @nrwl/react-native
npm i --save-dev @nx/react-native
```
{% /tab %}
{%tab label="yarn"%}
```shell
yarn add --dev @nrwl/react-native
yarn add --dev @nx/react-native
```
{% /tab %}
@ -52,7 +52,7 @@ yarn add --dev @nrwl/react-native
To create additional React Native apps run:
```shell
nx g @nrwl/react-native:app <your-app-name>
nx g @nx/react-native:app <your-app-name>
```
### Generating Libraries
@ -60,7 +60,7 @@ nx g @nrwl/react-native:app <your-app-name>
To generate a new library run:
```shell
nx g @nrwl/react-native:lib your-lib-name
nx g @nx/react-native:lib your-lib-name
```
### Generating Components
@ -68,7 +68,7 @@ nx g @nrwl/react-native:lib your-lib-name
To generate a new component inside library run:
```shell
nx g @nrwl/react-native:component your-component-name --project=your-lib-name --export
nx g @nx/react-native:component your-component-name --project=your-lib-name --export
```
Replace `your-lib-name` with the app's name as defined in your `tsconfig.base.json` file or the `name` property of your `package.json`
@ -82,7 +82,7 @@ The Nx CLI provides the [`migrate` command](/core-features/automate-updating-dep
To upgrade native iOS and Android code to latest, you can use the [upgrade-native](/packages/react-native/generators/upgrade-native) generator:
```shell
nx generate @nrwl/react-native:upgrade-native <your-app-name>
nx generate @nx/react-native:upgrade-native <your-app-name>
```
This is a command that will replace the iOS and Android native code folder entirely.

2
docs/generated/packages/react-native/executors/build-android.json
View File

@ -90,7 +90,7 @@
}
},
"required": [],
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"build-android\": {\n \"executor\": \"@nrwl/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:build-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Build with custom tasks\" %}\nThe `tasks` option accepts any custom gradle task, such as `assembleDebug`, `assembleRelease`, `bundleDebug`, `bundleRelease`, `installDebug`, `installRelease`.\nFor example, pass in `bundleRelease` or `bundleRelease` to tasks, it will create with `.aab` extension under bundle folder.\nPass in `assembleDebug` or `assembleRelease` to tasks, it will create a build with `.apk` extension under apk folder.\nPass in `installDebug` or `installRelease` to tasks, it will create a build with `.apk` extension and immediately install it on a running emulator or connected device.\n\n```json\n \"build-android\": {\n \"executor\": \"@nrwl/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {\n \"tasks\": [\"bundleRelease\"]\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Build for debug/release\" %}\n\nThe `mode` option allows you determine whether to build for debug/release apk.\n\n```json\n \"build-android\": {\n \"executor\": \"@nrwl/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {\n \"mode\": \"debug\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Build for current device architecture\" %}\n\nThe `activeArchOnly` option allows you to build native libraries only for the current device architecture for debug builds.\n\n```json\n \"build-android\": {\n \"executor\": \"@nrwl/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {\n \"activeArchOnly\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"build-android\": {\n \"executor\": \"@nx/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:build-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Build with custom tasks\" %}\nThe `tasks` option accepts any custom gradle task, such as `assembleDebug`, `assembleRelease`, `bundleDebug`, `bundleRelease`, `installDebug`, `installRelease`.\nFor example, pass in `bundleRelease` or `bundleRelease` to tasks, it will create with `.aab` extension under bundle folder.\nPass in `assembleDebug` or `assembleRelease` to tasks, it will create a build with `.apk` extension under apk folder.\nPass in `installDebug` or `installRelease` to tasks, it will create a build with `.apk` extension and immediately install it on a running emulator or connected device.\n\n```json\n \"build-android\": {\n \"executor\": \"@nx/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {\n \"tasks\": [\"bundleRelease\"]\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Build for debug/release\" %}\n\nThe `mode` option allows you determine whether to build for debug/release apk.\n\n```json\n \"build-android\": {\n \"executor\": \"@nx/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {\n \"mode\": \"debug\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Build for current device architecture\" %}\n\nThe `activeArchOnly` option allows you to build native libraries only for the current device architecture for debug builds.\n\n```json\n \"build-android\": {\n \"executor\": \"@nx/react-native:build-android\",\n \"outputs\": [\n \"{projectRoot}/build/outputs/bundle\",\n \"{projectRoot}/build/outputs/apk\"\n ],\n \"options\": {\n \"activeArchOnly\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
},
"description": "Release Build for Android.",
"aliases": [],

2
docs/generated/packages/react-native/executors/build-ios.json
View File

@ -96,7 +96,7 @@
}
},
"required": [],
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"build-ios\": {\n \"executor\": \"@nrwl/react-native:build-ios\",\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:build-ios\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Build in Specific Location\" %}\nThe `buildFolder` option allows to specify the location for ios build artifacts. It corresponds to Xcode's -derivedDataPath.\n\n```json\n \"build-ios\": {\n \"executor\": \"@nrwl/react-native:build-ios\",\n \"options\": {\n \"buildFolder\": \"dist/ios/build\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --buildFolder=dist/ios/build\n```\n\n{% /tab %}\n{% tab label=\"Build the Debug/Release app\" %}\nThe `mode` option allows to specify the xcode configuartion, such as `Debug` or `Release`.\n\n```json\n \"build-ios\": {\n \"executor\": \"@nrwl/react-native:build-ios\",\n \"options\": {\n \"mode\": \"Release\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --mode=Debug\nnx build-ios <app-name> --mode=Release\n```\n\n{% /tab %}\n{% tab label=\"Build for a simulator\" %}\nThe `simulator` option allows you to launch your iOS app in a specific simulator:\n\nTo see all the available simulators, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"build-ios\": {\n \"executor\": \"@nrwl/react-native:build-ios\",\n \"options\": {\n \"simulator\": \"iPhone 14 Pro\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --simulator=\"iPhone 14 Pro\"\n```\n\n{% /tab %}\n{% tab label=\"Build for a device\" %}\nThe `device` option allows you to launch your iOS app in a specific device.\n\nTo see all the available device, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"build-ios\": {\n \"executor\": \"@nrwl/react-native:build-ios\",\n \"options\": {\n \"device\": \"deviceName\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --device=\"deviceName\"\n```\n\n{% /tab %}\n{% tab label=\"Set Device by udid\" %}\nThe `udid` option allows you to explicitly set device to use by udid.\n\nTo see all the available simulators and devices with udid, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"build-ios\": {\n \"executor\": \"@nrwl/react-native:build-ios\",\n \"options\": {\n \"udid\": \"device udid\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --udid=\"device udid\"\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"build-ios\": {\n \"executor\": \"@nx/react-native:build-ios\",\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:build-ios\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Build in Specific Location\" %}\nThe `buildFolder` option allows to specify the location for ios build artifacts. It corresponds to Xcode's -derivedDataPath.\n\n```json\n \"build-ios\": {\n \"executor\": \"@nx/react-native:build-ios\",\n \"options\": {\n \"buildFolder\": \"dist/ios/build\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --buildFolder=dist/ios/build\n```\n\n{% /tab %}\n{% tab label=\"Build the Debug/Release app\" %}\nThe `mode` option allows to specify the xcode configuartion, such as `Debug` or `Release`.\n\n```json\n \"build-ios\": {\n \"executor\": \"@nx/react-native:build-ios\",\n \"options\": {\n \"mode\": \"Release\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --mode=Debug\nnx build-ios <app-name> --mode=Release\n```\n\n{% /tab %}\n{% tab label=\"Build for a simulator\" %}\nThe `simulator` option allows you to launch your iOS app in a specific simulator:\n\nTo see all the available simulators, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"build-ios\": {\n \"executor\": \"@nx/react-native:build-ios\",\n \"options\": {\n \"simulator\": \"iPhone 14 Pro\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --simulator=\"iPhone 14 Pro\"\n```\n\n{% /tab %}\n{% tab label=\"Build for a device\" %}\nThe `device` option allows you to launch your iOS app in a specific device.\n\nTo see all the available device, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"build-ios\": {\n \"executor\": \"@nx/react-native:build-ios\",\n \"options\": {\n \"device\": \"deviceName\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --device=\"deviceName\"\n```\n\n{% /tab %}\n{% tab label=\"Set Device by udid\" %}\nThe `udid` option allows you to explicitly set device to use by udid.\n\nTo see all the available simulators and devices with udid, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"build-ios\": {\n \"executor\": \"@nx/react-native:build-ios\",\n \"options\": {\n \"udid\": \"device udid\"\n }\n }\n```\n\n```bash\nnx build-ios <app-name> --udid=\"device udid\"\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
},
"description": "Build iOS app",
"aliases": [],

2
docs/generated/packages/react-native/executors/bundle.json
View File

@ -79,7 +79,7 @@
}
},
"required": ["platform", "entryFile", "bundleOutput"],
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"bundle-ios\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"outputs\": [\"{projectRoot}/build\"],\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\"\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\"\n }\n }\n }\n}\n```\n\n```bash\nnx run mobile:bundle-ios\nnx run mobile:bundle-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Bundle with sourcemap\" %}\nThe `sourcemapOutput` option allows you to specify the path of the source map relative to app folder:\n\n```json\n \"bundle-ios\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\",\n \"sourcemapOutput\": \"../../dist/apps/mobile/ios/main.map\",\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\",\n \"sourcemapOutput\": \"../../dist/apps/mobile/android/main.map\",\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Create a dev/release bundle\" %}\n\nThe `dev` option determines whether to create a dev or release bundle. The default value is `true`, by setting it as `false`, warnings are disabled and the bundle is minified.\n\n```json\n \"bundle-ios\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\",\n \"dev\": false\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\",\n \"dev\": false\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Create a minified bundle\" %}\n\nThe `minify` option allows you to create a minified bundle:\n\n```json\n \"bundle-ios\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\",\n \"minify\": true\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nrwl/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\",\n \"minify\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"bundle-ios\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"outputs\": [\"{projectRoot}/build\"],\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\"\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\"\n }\n }\n }\n}\n```\n\n```bash\nnx run mobile:bundle-ios\nnx run mobile:bundle-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Bundle with sourcemap\" %}\nThe `sourcemapOutput` option allows you to specify the path of the source map relative to app folder:\n\n```json\n \"bundle-ios\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\",\n \"sourcemapOutput\": \"../../dist/apps/mobile/ios/main.map\",\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\",\n \"sourcemapOutput\": \"../../dist/apps/mobile/android/main.map\",\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Create a dev/release bundle\" %}\n\nThe `dev` option determines whether to create a dev or release bundle. The default value is `true`, by setting it as `false`, warnings are disabled and the bundle is minified.\n\n```json\n \"bundle-ios\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\",\n \"dev\": false\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\",\n \"dev\": false\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Create a minified bundle\" %}\n\nThe `minify` option allows you to create a minified bundle:\n\n```json\n \"bundle-ios\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"ios\",\n \"bundleOutput\": \"dist/apps/mobile/ios/main.jsbundle\",\n \"minify\": true\n }\n },\n \"bundle-android\": {\n \"executor\": \"@nx/react-native:bundle\",\n \"options\": {\n \"entryFile\": \"src/main.tsx\",\n \"platform\": \"android\",\n \"bundleOutput\": \"dist/apps/mobile/android/main.jsbundle\",\n \"minify\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
},
"description": "Builds the JavaScript bundle for offline use.",
"aliases": [],

2
docs/generated/packages/react-native/executors/run-android.json
View File

@ -113,7 +113,7 @@
"default": false
}
},
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"run-android\": {\n \"executor\": \"@nrwl/react-native:run-android\",\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:run-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Run on a specific device/simulator\" %}\nTo see all the avaiable emulators, run command:\n\n```bash\nemulator -list-avds\n```\n\nThe `deviceId` option allows you to launch your android app in a specific device/simulator:\n\n```json\n \"run-android\": {\n \"executor\": \"@nrwl/react-native:run-android\",\n \"options\": {\n \"deviceId\": \"Pixel_5_API_30\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Run the debug/release app\" %}\nThe `mode` option allows to specify the build variant, such as `debug` or `release`.\n\n```json\n \"run-android\": {\n \"executor\": \"@nrwl/react-native:run-android\",\n \"options\": {\n \"mode\": \"release\"\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"run-android\": {\n \"executor\": \"@nx/react-native:run-android\",\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:run-android\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Run on a specific device/simulator\" %}\nTo see all the avaiable emulators, run command:\n\n```bash\nemulator -list-avds\n```\n\nThe `deviceId` option allows you to launch your android app in a specific device/simulator:\n\n```json\n \"run-android\": {\n \"executor\": \"@nx/react-native:run-android\",\n \"options\": {\n \"deviceId\": \"Pixel_5_API_30\"\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Run the debug/release app\" %}\nThe `mode` option allows to specify the build variant, such as `debug` or `release`.\n\n```json\n \"run-android\": {\n \"executor\": \"@nx/react-native:run-android\",\n \"options\": {\n \"mode\": \"release\"\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
},
"description": "Runs Android application.",
"aliases": [],

2
docs/generated/packages/react-native/executors/run-ios.json
View File

@ -109,7 +109,7 @@
"description": "Path relative to project root where pre-built .app binary lives."
}
},
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"run-ios\": {\n \"executor\": \"@nrwl/react-native:run-ios\",\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:run-ios\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Build the Debug/Release app\" %}\nThe `mode` option allows to specify the xcode configuartion schema, such as `Debug` or `Release`.\n\n```json\n \"run-ios\": {\n \"executor\": \"@nrwl/react-native:run-ios\",\n \"options\": {\n \"mode\": \"Release\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --mode=Debug\n```\n\n{% /tab %}\n{% tab label=\"Run on a simulator\" %}\nThe `simulator` option allows you to launch your iOS app in a specific simulator.\n\nTo see all the available simulators, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"run-ios\": {\n \"executor\": \"@nrwl/react-native:run-ios\",\n \"options\": {\n \"simulator\": \"iPhone 14 Pro (16.2)\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --simulator=\"iPhone 14 Pro (16.2)\"\n```\n\n{% /tab %}\n{% tab label=\"Run on a device\" %}\nThe `device` option allows you to launch your iOS app in a specific device.\n\nTo see all the available devices, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"run-ios\": {\n \"executor\": \"@nrwl/react-native:run-ios\",\n \"options\": {\n \"device\": \"deviceName\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --device=\"deviceName\"\n```\n\n{% /tab %}\n{% tab label=\"Set Device by udid\" %}\nThe `udid` option allows you to explicitly set device to use by udid.\n\nTo see all the available simulators and devices with udid, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"run-ios\": {\n \"executor\": \"@nrwl/react-native:run-ios\",\n \"options\": {\n \"udid\": \"device udid\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --udid=\"device udid\"\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"run-ios\": {\n \"executor\": \"@nx/react-native:run-ios\",\n \"options\": {}\n }\n }\n}\n```\n\n```bash\nnx run mobile:run-ios\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Build the Debug/Release app\" %}\nThe `mode` option allows to specify the xcode configuartion schema, such as `Debug` or `Release`.\n\n```json\n \"run-ios\": {\n \"executor\": \"@nx/react-native:run-ios\",\n \"options\": {\n \"mode\": \"Release\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --mode=Debug\n```\n\n{% /tab %}\n{% tab label=\"Run on a simulator\" %}\nThe `simulator` option allows you to launch your iOS app in a specific simulator.\n\nTo see all the available simulators, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"run-ios\": {\n \"executor\": \"@nx/react-native:run-ios\",\n \"options\": {\n \"simulator\": \"iPhone 14 Pro (16.2)\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --simulator=\"iPhone 14 Pro (16.2)\"\n```\n\n{% /tab %}\n{% tab label=\"Run on a device\" %}\nThe `device` option allows you to launch your iOS app in a specific device.\n\nTo see all the available devices, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"run-ios\": {\n \"executor\": \"@nx/react-native:run-ios\",\n \"options\": {\n \"device\": \"deviceName\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --device=\"deviceName\"\n```\n\n{% /tab %}\n{% tab label=\"Set Device by udid\" %}\nThe `udid` option allows you to explicitly set device to use by udid.\n\nTo see all the available simulators and devices with udid, run command:\n\n```bash\nxcrun simctl list devices available\n```\n\n```json\n \"run-ios\": {\n \"executor\": \"@nx/react-native:run-ios\",\n \"options\": {\n \"udid\": \"device udid\"\n }\n }\n```\n\n```bash\nnx run-ios <app-name> --udid=\"device udid\"\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n"
},
"description": "Runs iOS application.",
"aliases": [],

2
docs/generated/packages/react-native/executors/start.json
View File

@ -27,7 +27,7 @@
"default": true
}
},
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"start\": {\n \"executor\": \"@nrwl/react-native:start\",\n \"options\": {\n \"port\": 8081\n }\n }\n }\n}\n```\n\n```bash\nnx run mobile:start\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Starts the server non-interactively\" %}\nThe `interactive` option allows you to specify whether to use interactive mode:\n\n```json\n \"start\": {\n \"executor\": \"@nrwl/react-native:start\",\n \"options\": {\n \"port\": 8081,\n \"interactive\": false\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Starts the server with cache reset\" %}\n\nThe `resetCache` option allows you to remove cached files.\n\n```json\n \"start\": {\n \"executor\": \"@nrwl/react-native:start\",\n \"options\": {\n \"port\": 8081,\n \"resetCache\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"examplesFile": "`project.json`:\n\n```json\n{\n \"name\": \"mobile\",\n //...\n \"targets\": {\n //...\n \"start\": {\n \"executor\": \"@nx/react-native:start\",\n \"options\": {\n \"port\": 8081\n }\n }\n }\n}\n```\n\n```bash\nnx run mobile:start\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Starts the server non-interactively\" %}\nThe `interactive` option allows you to specify whether to use interactive mode:\n\n```json\n \"start\": {\n \"executor\": \"@nx/react-native:start\",\n \"options\": {\n \"port\": 8081,\n \"interactive\": false\n }\n }\n```\n\n{% /tab %}\n{% tab label=\"Starts the server with cache reset\" %}\n\nThe `resetCache` option allows you to remove cached files.\n\n```json\n \"start\": {\n \"executor\": \"@nx/react-native:start\",\n \"options\": {\n \"port\": 8081,\n \"resetCache\": true\n }\n }\n```\n\n{% /tab %}\n{% /tabs %}\n\n---\n",
"presets": []
},
"description": "Starts the Javascript server that communicates with connected devices.",

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

@ -14,10 +14,10 @@ To add the React plugin to an existing workspace, run one of the following:
```shell
# For npm users
npm install -D @nrwl/react
npm install -D @nx/react
# For yarn users
yarn add -D @nrwl/react
yarn add -D @nx/react
```
### Creating Applications and Libraries
@ -25,7 +25,7 @@ yarn add -D @nrwl/react
You can add a new application with the following:
```shell
nx g @nrwl/react:app my-new-app
nx g @nx/react:app my-new-app
```
To start the application in development mode, run `nx serve my-new-app`.
@ -33,12 +33,12 @@ To start the application in development mode, run `nx serve my-new-app`.
And add a new library as follows:
```shell
nx g @nrwl/react:lib my-new-lib
nx g @nx/react:lib my-new-lib
# If you want the library to be buildable or publishable to npm
nx g @nrwl/react:lib my-new-lib --bundler=vite
nx g @nrwl/react:lib my-new-lib --bundler=rollup
nx g @nrwl/react:lib my-new-lib \
nx g @nx/react:lib my-new-lib --bundler=vite
nx g @nx/react:lib my-new-lib --bundler=rollup
nx g @nx/react:lib my-new-lib \
--publishable \
--importPath=@myorg/my-new-lib
```
@ -50,12 +50,12 @@ Read more about [building and publishing libraries here](/more-concepts/buildabl
Adding a component to an existing project can be done with:
```shell
nx g @nrwl/react:component my-new-component \
nx g @nx/react:component my-new-component \
--project=my-new-app
# Note: If you want to export the component
# from the library use --export
nx g @nrwl/react:component my-new-component \
nx g @nx/react:component my-new-component \
--project=my-new-lib \
--export
```
@ -67,7 +67,7 @@ Replace `my-new-app` and `my-new-lib` with the name of your projects.
If you want to add a new hook, run the following
```shell
nx g @nrwl/react:hook my-new-hook --project=my-new-lib
nx g @nx/react:hook my-new-hook --project=my-new-lib
```
Replace `my-new-lib` with the name of your project.

2
docs/generated/packages/react/generators/application.json
View File

@ -186,7 +186,7 @@
}
},
"required": [],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/react:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/react:app my-app --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n```bash\nnx g @nrwl/react:app my-app --directory=my-dir --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nrwl/react:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nx/react:app my-app --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n```bash\nnx g @nx/react:app my-app --directory=my-dir --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nx/react:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
"presets": []
},
"aliases": ["app"],

2
docs/generated/packages/react/generators/component-test.json
View File

@ -30,7 +30,7 @@
}
},
"required": ["project", "componentPath"],
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you're wanting to create Cypress tests for a Storybook story, then check out the [component-cypress-spec generator docs](/packages/react/generators/component-cypress-spec)\n\nIf you're wanting to create Storybook stories for a component, then check out the [stories generator docs](/packages/react/generators/stories) or [component-story generator docs](/packages/react/generators/component-cypress-spec)\n\n{% /callout %}\n\nThis generator is used to create a Cypress component test file for a given React component.\n\n```shell\nnx g @nrwl/react:component-test --project=my-cool-react-project --componentPath=src/my-fancy-button.tsx\n```\n\nTest file are generated with the `.cy.` suffix. this is to prevent colliding with any existing `.spec.` files contained in the project.\n\nIt's currently expected the generated `.cy.` file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the [cypress-component-project generator](/packages/react/generators/cypress-component-configuration) to set up the project for component testing.\n",
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you're wanting to create Cypress tests for a Storybook story, then check out the [component-cypress-spec generator docs](/packages/react/generators/component-cypress-spec)\n\nIf you're wanting to create Storybook stories for a component, then check out the [stories generator docs](/packages/react/generators/stories) or [component-story generator docs](/packages/react/generators/component-cypress-spec)\n\n{% /callout %}\n\nThis generator is used to create a Cypress component test file for a given React component.\n\n```shell\nnx g @nx/react:component-test --project=my-cool-react-project --componentPath=src/my-fancy-button.tsx\n```\n\nTest file are generated with the `.cy.` suffix. this is to prevent colliding with any existing `.spec.` files contained in the project.\n\nIt's currently expected the generated `.cy.` file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the [cypress-component-project generator](/packages/react/generators/cypress-component-configuration) to set up the project for component testing.\n",
"presets": []
},
"description": "Generate a Cypress component test for a React component",

2
docs/generated/packages/react/generators/cypress-component-configuration.json
View File

File diff suppressed because one or more lines are too long

2
docs/generated/packages/react/generators/stories.json
View File

@ -52,7 +52,7 @@
}
},
"required": ["project"],
"examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nrwl/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n",
"examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nx/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n",
"presets": []
},
"description": "Create stories/specs for all components declared in an app or library.",

2
docs/generated/packages/react/generators/storybook-configuration.json
View File

@ -96,7 +96,7 @@
}
},
"required": ["name"],
"examplesFile": "This generator will set up Storybook for your **React** project. You can also use this generator to generate Storybook configuration for your **Next.js** project.\n\n```bash\nnx g @nrwl/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#generate-storybook-configuration-for-an-react-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for React - Cypress section](/packages/storybook/documents/overview-react#cypress-tests-for-stories).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --storybook7Configuration=true\n```\n\n{% callout type=\"info\" title=\"For Nx versions <15.9\" %}\nThe flag is called `storybook7betaConfiguration` for Nx versions <15.9.\n{% /callout %}\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n",
"examplesFile": "This generator will set up Storybook for your **React** project. You can also use this generator to generate Storybook configuration for your **Next.js** project.\n\n```bash\nnx g @nx/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/packages/storybook/documents/overview-react#generate-storybook-configuration-for-an-react-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for React - Cypress section](/packages/storybook/documents/overview-react#cypress-tests-for-stories).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nx/react:storybook-configuration ui --storybook7Configuration=true\n```\n\n{% callout type=\"info\" title=\"For Nx versions <15.9\" %}\nThe flag is called `storybook7betaConfiguration` for Nx versions <15.9.\n{% /callout %}\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7. You can read more about Storybook 7 Nx support in the [Storybook 7 setup guide](/packages/storybook/documents/storybook-7-setup).\n",
"presets": []
},
"description": "Set up storybook for a React app or library.",

2
docs/generated/packages/rollup/executors/rollup.json
View File

@ -185,7 +185,7 @@
]
}
},
"examplesFile": "{% tabs %}\n{% tab label=\"Including Dependencies\" %}\nTo include dependencies in the output `package.json`, the dependencies must be installed as a **dependencies** in the root `package.json`\n\n```json {% fileName=\"package.json\" %}\n{\n \"dependencies\": {\n \"some-dependency\": \"^1.0.0\"\n }\n}\n```\n\nTo have dependencies in the be listed in the final `package.json` of your project, set the `updateBuildableProjectDepsInPackageJson` option to `true`. After than dependencies will be added to the `peerDependencies` field of the output `package.json`. You can use `buildableProjectDepsInPackageJsonType` option to change which field the dependencies are output to.\n\n```json {% fileName=\"project.json\" %}\n{\n \"targets\": {\n \"build\": {\n \"executor\": \"@nrwl/rollup:rollup\",\n \"options\": {\n \"buildableProjectDepsInPackageJsonType\": \"dependencies\",\n \"updateBuildableProjectDepsInPackageJson\": true\n }\n }\n }\n}\n```\n\n{% /tab}\n{% /tabs %}\n"
"examplesFile": "{% tabs %}\n{% tab label=\"Including Dependencies\" %}\nTo include dependencies in the output `package.json`, the dependencies must be installed as a **dependencies** in the root `package.json`\n\n```json {% fileName=\"package.json\" %}\n{\n \"dependencies\": {\n \"some-dependency\": \"^1.0.0\"\n }\n}\n```\n\nTo have dependencies in the be listed in the final `package.json` of your project, set the `updateBuildableProjectDepsInPackageJson` option to `true`. After than dependencies will be added to the `peerDependencies` field of the output `package.json`. You can use `buildableProjectDepsInPackageJsonType` option to change which field the dependencies are output to.\n\n```json {% fileName=\"project.json\" %}\n{\n \"targets\": {\n \"build\": {\n \"executor\": \"@nx/rollup:rollup\",\n \"options\": {\n \"buildableProjectDepsInPackageJsonType\": \"dependencies\",\n \"updateBuildableProjectDepsInPackageJson\": true\n }\n }\n }\n}\n```\n\n{% /tab}\n{% /tabs %}\n"
},
"description": "Bundle a package using Rollup.",
"aliases": [],

4
docs/generated/packages/storybook/documents/angular-browser-target.md
View File

@ -52,7 +52,7 @@ Your Storybook targets in your `project.json` will look like this:
```jsonc {% fileName="project.json" %}
"storybook": {
"executor": "@nrwl/storybook:storybook",
"executor": "@nx/storybook:storybook",
"options": {
...
"projectBuildConfig": "my-project:build-storybook"
@ -60,7 +60,7 @@ Your Storybook targets in your `project.json` will look like this:
...
},
"build-storybook": {
"executor": "@nrwl/storybook:build",
"executor": "@nx/storybook:build",
...
"options": {
...

2
docs/generated/packages/storybook/documents/angular-storybook-compodoc.md
View File

@ -141,7 +141,7 @@ Make sure you are on Nx version `>=14.1.8` and your `storybook` target is using
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** on Nx `>=14.1.8` and you are still using the old executor (`@nrwl/storybook:storybook`), you can read our documentation about the [Angular Storybook targets](/packages/storybook/documents/angular-storybook-targets) to help you change your `storybook` and `build-storybook` targets across your workspace for your Angular projects using Storybook.
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](/packages/storybook/documents/angular-storybook-targets) to help you change your `storybook` and `build-storybook` targets across your workspace for your Angular projects using Storybook.
{% /callout %}
### 4. Let Storybook know of the `documentation.json` file

4
docs/generated/packages/storybook/documents/angular-storybook-targets.md
View File

@ -20,9 +20,9 @@ If you are on Nx version `<14.1.8` and you want to move to the latest version (o
If you have already moved on a version of Nx `>=14.1.8` without using `nx migrate` and now you are having trouble with your Angular projects using Storybook (eg. `Property 'uiFramework' does not match the schema. '@storybook/angular' should be one of ...`), that means that your targets are still using the old schema and they should change. The way to fix that is to call `nx migrate` again like this:
```bash
nx migrate @nrwl/storybook@14.1.0 --to="@nrwl/storybook@14.2.0"
nx migrate @nx/storybook@14.1.0 --to="@nx/storybook@14.2.0"
```
and follow the instructions that will be printed in the console.
This command will generate a new `migrations.json` file which will contain the "change-storybook-targets" migration script. This script (when called with `yarn nx migrate --run-migrations`) will change the `storybook` and `build-storybook` targets in all your Angular projects that are configured to use Storybook. The new target configuration will use the native Storybook builders (`@storybook/angular:build-storybook` and `@storybook/angular:start-storybook`) instead of the Nx Storybook builders (`@nrwl/storybook:build-storybook` and `@nrwl/storybook:storybook`).
This command will generate a new `migrations.json` file which will contain the "change-storybook-targets" migration script. This script (when called with `yarn nx migrate --run-migrations`) will change the `storybook` and `build-storybook` targets in all your Angular projects that are configured to use Storybook. The new target configuration will use the native Storybook builders (`@storybook/angular:build-storybook` and `@storybook/angular:start-storybook`) instead of the Nx Storybook builders (`@nx/storybook:build-storybook` and `@nx/storybook:storybook`).

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

@ -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 [`@nrwl/storybook:configuration` generator](/packages/storybook/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nrwl/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](/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.
#### Stories generation

6
docs/generated/packages/storybook/documents/migrate-webpack-final-react.md
View File

@ -19,7 +19,7 @@ width="100%" /%}
Here are the main differences to the previous versions of Nx:
- there's no `webpack.config.js`; Custom webpack configurations can be added in the `webpackFinal` property of the `main.js` file
- the `main.js` file now contains a predefined Storybook addon exported by `@nrwl/react/plugins/storybook`.
- the `main.js` file now contains a predefined Storybook addon exported by `@nx/react/plugins/storybook`.
Here's an example of a newly generated `main.js` file:
@ -41,7 +41,7 @@ module.exports = {
'../src/lib/**/*.stories.mdx',
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
addons: [...rootMain.addons, '@nx/react/plugins/storybook'],
webpackFinal: async (config, { configType }) => {
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal) {
@ -193,7 +193,7 @@ module.exports = async ({ config, mode }) => {
};
```
Such webpack file is no more needed as the `@nrwl/react/plugins/storybook` now takes care of it.
Such webpack file is no more needed as the `@nx/react/plugins/storybook` now takes care of it.
In case you made custom modifications to the `webpack.config.js` file, you need to move them over to the `main.js` `webpackFinal` property and then delete the `webpack.config.js`.

16
docs/generated/packages/storybook/documents/overview-angular.md
View File

@ -13,15 +13,15 @@ You first need to set up Storybook for your Nx workspace, if you haven't already
## Generate Storybook Configuration for an Angular project
You can generate Storybook configuration for an individual Angular project by using the [`@nrwl/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](/packages/angular/generators/storybook-configuration), like this:
```shell
nx g @nrwl/angular:storybook-configuration project-name
nx g @nx/angular:storybook-configuration project-name
```
## Auto-generate Stories
The [`@nrwl/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](/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/).
```text
<some-folder>/
@ -29,10 +29,10 @@ The [`@nrwl/angular:storybook-configuration` generator](/packages/angular/genera
└── 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 [`@nrwl/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](/packages/angular/generators/stories):
```shell
nx g @nrwl/angular:stories --project=<project-name>
nx g @nx/angular:stories --project=<project-name>
```
{% callout type="note" title="Example" %}
@ -41,7 +41,7 @@ Let's take for a example a library in your workspace, under `libs/feature/ui`, c
The command to generate stories for that library would be:
```shell
nx g @nrwl/angular:stories --project=feature-ui
nx g @nx/angular:stories --project=feature-ui
```
and the result would be the following:
@ -75,7 +75,7 @@ and the result would be the following:
## Cypress tests for Stories
The [`@nrwl/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](/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.
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 [`@nrwl/angular:storybook-configuration` generator](/packages/angular/generators/storybook-configuration) would generate a Story file that looks like this:
The [`@nx/angular:storybook-configuration` generator](/packages/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';

20
docs/generated/packages/storybook/documents/overview-react.md
View File

@ -13,27 +13,27 @@ You first need to set up Storybook for your Nx workspace, if you haven't already
## Generate Storybook Configuration for a React project
You can generate Storybook configuration for an individual React project by using the [`@nrwl/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](/packages/react/generators/storybook-configuration), like this:
```shell
nx g @nrwl/react:storybook-configuration project-name
nx g @nx/react:storybook-configuration project-name
```
## Nx React Storybook Preset
The [`@nrwl/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`](/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.
```typescript
module.exports = {
...
addons: ['@storybook/addon-essentials', ..., '@nrwl/react/plugins/storybook'],
addons: ['@storybook/addon-essentials', ..., '@nx/react/plugins/storybook'],
...
};
```
## Auto-generate Stories
The [`@nrwl/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](/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/).
```text
<some-folder>/
@ -41,10 +41,10 @@ The [`@nrwl/react:storybook-configuration` generator](/packages/react/generators
└── 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 [`@nrwl/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](/packages/react/generators/stories):
```shell
nx g @nrwl/react:stories --project=<project-name>
nx g @nx/react:stories --project=<project-name>
```
{% callout type="note" title="Example" %}
@ -53,7 +53,7 @@ Let's take for a example a library in your workspace, under `libs/feature/ui`, c
The command to generate stories for that library would be:
```shell
nx g @nrwl/react:stories --project=feature-ui
nx g @nx/react:stories --project=feature-ui
```
and the result would be the following:
@ -87,7 +87,7 @@ and the result would be the following:
## Cypress tests for Stories
The [`@nrwl/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](/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.
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 [`@nrwl/react:storybook-configuration` generator](/packages/react/generators/storybook-configuration) would generate a Story file that looks like this:
The [`@nx/react:storybook-configuration` generator](/packages/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';

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

@ -19,14 +19,14 @@ Starting with Nx 16, Storybook 7 is going to be used by default to configure you
{% tab label="yarn" %}
```shell
yarn add -D @nrwl/storybook
yarn add -D @nx/storybook
```
{% /tab %}
{% tab label="npm" %}
```shell
npm install -D @nrwl/storybook
npm install -D @nx/storybook
```
{% /tab %}
@ -39,7 +39,7 @@ npm install -D @nrwl/storybook
You can generate Storybook configuration for an individual project with this command:
```shell
nx g @nrwl/storybook:configuration project-name
nx g @nx/storybook:configuration project-name
```
If you are NOT using a framework-specific generator, in the field `storybook7UiFramework` you must choose one of the following Storybook frameworks:
@ -84,7 +84,7 @@ These framework-specific generators will also **generate stories** for you.
You can choose to configure your project using TypeScript instead of JavaScript. To do that, just add the `--tsConfiguration=true` flag to the above command, like this:
```shell
nx g @nrwl/storybook:configuration project-name --tsConfiguration=true
nx g @nx/storybook:configuration project-name --tsConfiguration=true
```
[Here is the Storybook documentation](https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript) if you want to learn more.

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

@ -33,14 +33,14 @@ For migrating your existing Nx workspace with existing Storybook configuration t
{% tab label="yarn" %}
```shell
yarn add -D @nrwl/storybook
yarn add -D @nx/storybook
```
{% /tab %}
{% tab label="npm" %}
```shell
npm install -D @nrwl/storybook
npm install -D @nx/storybook
```
{% /tab %}
@ -53,13 +53,13 @@ npm install -D @nrwl/storybook
You can generate Storybook configuration for an individual project with this command:
```shell
nx g @nrwl/storybook:configuration project-name --storybook7Configuration --storybook7UiFramework=@storybook/react-webpack5
nx g @nx/storybook:configuration project-name --storybook7Configuration --storybook7UiFramework=@storybook/react-webpack5
```
Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nrwl/angular:storybook-configuration`](/packages/angular/generators/storybook-configuration), [`@nrwl/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nrwl/react-native:storybook-configuration`](/packages/react-native/generators/storybook-configuration), for example:
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), for example:
```shell
nx g @nrwl/angular:storybook-configuration my-angular-project --storybook7Configuration
nx g @nx/angular:storybook-configuration my-angular-project --storybook7Configuration
```
{% callout type="info" title="For Nx versions <15.9" %}
@ -114,7 +114,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 [`@nrwl/storybook:storybook`](/packages/storybook/executors/storybook) and [`@nrwl/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`](/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.
## Use Storybook 7

8
docs/generated/packages/storybook/documents/upgrade-storybook-v6-angular.md
View File

@ -33,7 +33,7 @@ In that case, when you run the Nx migration scripts, the scripts will ignore the
### Some info about the generator
The `@nrwl/angular:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions:
The `@nx/angular:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions:
- It will generate new Storybook configuration files using the new (`>6.x`) Storybook way. The way it will do that is, it will look in all the `project.json` files and it will find all the projects that have a `Storybook` configuration. Using the `configFolder` path provided there, it will go and generate new Storybook instances in all these paths. Finally, it will generate a new Storybook instance at the root directory.
@ -46,7 +46,7 @@ The `@nrwl/angular:storybook-migrate-defaults-5-to-6` generator will not exactly
That way, you can have working Storybook instances for all your projects just by running
```shell
nx g @nrwl/angular:storybook-migrate-defaults-5-to-6
nx g @nx/angular:storybook-migrate-defaults-5-to-6
```
### What if I had made changes to the defaults?
@ -59,7 +59,7 @@ Please check out this official [Storybook 6 Migration Guide](https://medium.com/
The generator gives you the option to migrate one project at a time. You can provide the `--name=PROJECT_NAME` flag, and then the generator will **only** generate new files for the specified project.
Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nrwl/angular:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory.
Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nx/angular:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory.
### General tip:
@ -67,7 +67,7 @@ Please note that this option will NOT update all the Storybook-related (`@storyb
## Upgrading to Storybook 6 manually
There is really no great reason for doing the migration completely manually. The `@nrwl/angular:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
There is really no great reason for doing the migration completely manually. The `@nx/angular:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
However, if you still want to do everything manually, these are the steps you should follow:

8
docs/generated/packages/storybook/documents/upgrade-storybook-v6-react.md
View File

@ -33,7 +33,7 @@ In that case, when you run the Nx migration scripts, the scripts will ignore the
### Some info about the generator
The `@nrwl/react:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions:
The `@nx/react:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions:
- It will generate new Storybook configuration files using the new (`>6.x`) Storybook way. The way it will do that is, it will look in all the `project.json` files and it will find all the projects that have a `Storybook` configuration. Using the `configFolder` path provided there, it will go and generate new Storybook instances in all these paths. Finally, it will generate a new Storybook instance at the root directory.
@ -46,7 +46,7 @@ The `@nrwl/react:storybook-migrate-defaults-5-to-6` generator will not exactly d
That way, you can have working Storybook instances for all your projects just by running
```shell
nx g @nrwl/react:storybook-migrate-defaults-5-to-6
nx g @nx/react:storybook-migrate-defaults-5-to-6
```
### What if I had made changes to the defaults?
@ -59,7 +59,7 @@ Please check out this official [Storybook 6 Migration Guide](https://medium.com/
The generator gives you the option to migrate one project at a time. You can provide the `--name=PROJECT_NAME` flag, and then the generator will **only** generate new files for the specified project.
Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nrwl/react:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory.
Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nx/react:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory.
### General tip:
@ -67,7 +67,7 @@ Please note that this option will NOT update all the Storybook-related (`@storyb
## Upgrading to Storybook 6 manually
There is really no great reason for doing the migration completely manually. The `@nrwl/react:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
There is really no great reason for doing the migration completely manually. The `@nx/react:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
However, if you still want to do everything manually, these are the steps you should follow:

2
docs/generated/packages/storybook/executors/build.json
View File

@ -138,7 +138,7 @@
},
"additionalProperties": true,
"required": ["uiFramework", "configDir"],
"examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nrwl/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:build\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
"examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Build Storybook.",
"aliases": [],

2
docs/generated/packages/storybook/executors/storybook.json
View File

@ -88,7 +88,7 @@
"additionalProperties": true,
"definitions": {},
"required": ["uiFramework", "configDir"],
"examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nrwl/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n },\n }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nrwl/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
"examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nx/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n },\n }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"docsMode\": true\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build-storybook\",\n \"compodoc\": false\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n \"executor\": \"@storybook/angular:start-storybook\",\n \"options\": {\n \"port\": 4400,\n \"configDir\": \"libs/ui/.storybook\",\n \"browserTarget\": \"ui:build\",\n \"compodoc\": false,\n \"styles\": [\"some-styles.css\"],\n \"stylePreprocessorOptions\": {\n \"includePaths\": [\"some-style-paths\"]\n }\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Serve Storybook.",
"aliases": [],

2
docs/generated/packages/storybook/generators/configuration.json
View File

@ -120,7 +120,7 @@
}
},
"required": ["name"],
"examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nrwl/storybook:configuration generator.\n---\n\nThis is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\n\nNx will understand if you're using Storybook v7 or Storybook v6 and configure your project accordingly. By default, it will try to use Storybook v7.\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `storybook7UiFramework` you want to use. Supported values are:\n - `@storybook/angular`\n - `@storybook/html-webpack5`\n - `@storybook/nextjs`\n - `@storybook/preact-webpack5`\n - `@storybook/react-webpack5`\n - `@storybook/react-vite`\n - `@storybook/server-webpack5`\n - `@storybook/svelte-webpack5`\n - `@storybook/svelte-vite`\n - `@storybook/sveltekit`\n - `@storybook/vue-webpack5`\n - `@storybook/vue-vite`\n - `@storybook/vue3-webpack5`\n - `@storybook/vue3-vite`\n - `@storybook/web-components-webpack5`\n - `@storybook/web-components-vite`\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` and a `storybook7UiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/web-components-vite --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Generate Storybook configuration for Storybook version 6\n\nIf, for somem reason, you want to force Nx to generate Storybook version 6 configuration, you can do so by passing false to the `storybook7Configuration` flag:\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7Configuration=false\n```\n\nHowever, this is **NOT recommended**.\n",
"examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nx/storybook:configuration generator.\n---\n\nThis is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nx/storybook:configuration\n```\n\nNx will understand if you're using Storybook v7 or Storybook v6 and configure your project accordingly. By default, it will try to use Storybook v7.\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `storybook7UiFramework` you want to use. Supported values are:\n - `@storybook/angular`\n - `@storybook/html-webpack5`\n - `@storybook/nextjs`\n - `@storybook/preact-webpack5`\n - `@storybook/react-webpack5`\n - `@storybook/react-vite`\n - `@storybook/server-webpack5`\n - `@storybook/svelte-webpack5`\n - `@storybook/svelte-vite`\n - `@storybook/sveltekit`\n - `@storybook/vue-webpack5`\n - `@storybook/vue-vite`\n - `@storybook/vue3-webpack5`\n - `@storybook/vue3-vite`\n - `@storybook/web-components-webpack5`\n - `@storybook/web-components-vite`\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` and a `storybook7UiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nx/storybook:configuration ui --storybook7UiFramework=@storybook/web-components-vite --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Generate Storybook configuration for Storybook version 6\n\nIf, for somem reason, you want to force Nx to generate Storybook version 6 configuration, you can do so by passing false to the `storybook7Configuration` flag:\n\n```bash\nnx g @nx/storybook:configuration ui --uiFramework=@storybook/react --storybook7Configuration=false\n```\n\nHowever, this is **NOT recommended**.\n",
"presets": []
},
"description": "Add Storybook configuration to a UI library or an application.",

2
docs/generated/packages/storybook/generators/migrate-7.json
View File

File diff suppressed because one or more lines are too long

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

@ -38,57 +38,57 @@ 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 [`@nrwl/react:app`](/packages/react/generators/application), [`@nrwl/react:lib`](/packages/react/generators/library) and [`@nrwl/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 `@nrwl/vite` plugin.
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.
To generate a React application using Vite.js, run the following:
```bash
nx g @nrwl/react:app my-app --bundler=vite
nx g @nx/react:app my-app --bundler=vite
```
To generate a React library using Vite.js, run the following:
```bash
nx g @nrwl/react:lib my-lib --bundler=vite
nx g @nx/react:lib my-lib --bundler=vite
```
To generate a Web application using Vite.js, run the following:
```bash
nx g @nrwl/web:app my-app --bundler=vite
nx g @nx/web:app my-app --bundler=vite
```
### Modify an existing React or Web project to use Vite.js
You can use the `@nrwl/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 `@nrwl/vite` plugin..
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 [`@nrwl/vite:configuration`](/packages/vite/generators/configuration) generator page.
You can read more about this generator on the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator page.
### Initialize Vite.js
If you do not want to create any new projects or convert any existing projects yet, you can still use Nx to install all the necessary dependencies for Vite.js. This, for example, could be useful if you want to set up Vite.js manually for a project.
#### Install the `@nrwl/vite` plugin
#### Install the `@nx/vite` plugin
{% tabs %}
{% tab label="npm" %}
```shell
npm install -D @nrwl/vite
npm install -D @nx/vite
```
{% /tab %}
{% tab label="yarn" %}
```shell
yarn add -D @nrwl/vite
yarn add -D @nx/vite
```
{% /tab %}
{% tab label="pnpm" %}
```shell
pnpm install -D @nrwl/vite
pnpm install -D @nx/vite
```
{% /tab %}
@ -99,7 +99,7 @@ pnpm install -D @nrwl/vite
After you install the plugin, you can initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.
```bash
nx g @nrwl/vite:init
nx g @nx/vite:init
```
{% callout type="note" title="Choosing a framework" %}

16
docs/generated/packages/vite/documents/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 [`@nrwl/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`](/packages/vite/generators/configuration) generator to do convert an existing project to use [Vite](https://vitejs.dev/).
{% /callout %}
You can use the `@nrwl/vite:dev-server`,`@nrwl/vite:build` and `@nrwl/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 [`@nrwl/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`](/packages/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 `@nrwl/vite` executors. However, if it's not supported by the [`@nrwl/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`](/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.
## 1. Change the executors in your `project.json`
@ -21,7 +21,7 @@ The list of steps below assumes that your project can be converted to use the `@
This applies to applications, not libraries.
In your app's `project.json` file, change the executor of your `serve` target to use `@nrwl/vite:dev-server` and set it up with the following options:
In your app's `project.json` file, change the executor of your `serve` target to use `@nx/vite:dev-server` and set it up with the following options:
```json
//...
@ -29,7 +29,7 @@ In your app's `project.json` file, change the executor of your `serve` target to
"targets": {
//...
"serve": {
"executor": "@nrwl/vite:dev-server",
"executor": "@nx/vite:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "my-app:build",
@ -43,12 +43,12 @@ 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 [`@nrwl/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`](/packages/vite/executors/dev-server#options) documentation.
{% /callout %}
### The `build` target
In your project's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:
In your project's `project.json` file, change the executor of your `build` target to use `@nx/vite:build` and set it up with the following options:
```json
//...
@ -56,7 +56,7 @@ In your project's `project.json` file, change the executor of your `build` targe
"targets": {
//...
"build": {
"executor": "@nrwl/vite:build",
"executor": "@nx/vite:build",
...
"options": {
"outputPath": "dist/apps/my-app"

2
docs/generated/packages/vite/executors/build.json
View File

@ -96,7 +96,7 @@
},
"definitions": {},
"required": [],
"examplesFile": "---\ntitle: Examples for the Vite builder executor\ndescription: This page contains examples for the Vite @nrwl/vite:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n //...\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\"\n },\n //...\n }\n },\n }\n}\n```\n\n```bash\nnx serve my-app\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Set a custom path for vite.config.ts\" %}\n\nNx will automatically look in the root of your application for a `vite.config.ts` (or a `vite.config.js`) file. If you want to use a different path, you can set it in your `project.json` file, in the `build` target options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\",\n \"configFile\": \"apps/my-app/vite.config.other-path.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\nor even\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nrwl/vite:build\",\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\",\n \"configFile\": \"vite.config.base.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
"examplesFile": "---\ntitle: Examples for the Vite builder executor\ndescription: This page contains examples for the Vite @nx/vite:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nx/vite:build\",\n //...\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\"\n },\n //...\n }\n },\n }\n}\n```\n\n```bash\nnx serve my-app\n```\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Set a custom path for vite.config.ts\" %}\n\nNx will automatically look in the root of your application for a `vite.config.ts` (or a `vite.config.js`) file. If you want to use a different path, you can set it in your `project.json` file, in the `build` target options:\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nx/vite:build\",\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\",\n \"configFile\": \"apps/my-app/vite.config.other-path.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\nor even\n\n```json\n//...\n\"my-app\": {\n \"targets\": {\n //...\n \"build\": {\n \"executor\": \"@nx/vite:build\",\n //...\n \"options\": {\n \"outputPath\": \"dist/apps/my-app\",\n \"configFile\": \"vite.config.base.ts\"\n },\n \"configurations\": {\n ...\n }\n },\n }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
},
"description": "Build with Vite.",
"aliases": [],

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