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

docs(core): move package recipes

Browse Source
This commit is contained in:
Isaac Mann 2023-08-22 11:47:09 -04:00 committed by Juri Strumpflohner
parent 577f820158
commit 1ac034ba60
49 changed files with 599 additions and 5285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1989,6 +1989,90 @@
], ],
"disableCollapsible": false "disableCollapsible": false
}, },
{
"name": "Cypress",
"path": "/recipes/cypress",
"id": "cypress",
"isExternal": false,
"children": [
{
"name": "Component Testing",
"path": "/recipes/cypress/cypress-component-testing",
"id": "cypress-component-testing",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Cypress v11 Migration Guide",
"path": "/recipes/cypress/cypress-v11-migration",
"id": "cypress-v11-migration",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "Next",
"path": "/recipes/next",
"id": "next",
"isExternal": false,
"children": [
{
"name": "How to configure Next.js plugins",
"path": "/recipes/next/next-config-setup",
"id": "next-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "Vite",
"path": "/recipes/vite",
"id": "vite",
"isExternal": false,
"children": [
{
"name": "Manually set up your project to use Vite.js",
"path": "/recipes/vite/set-up-vite-manually",
"id": "set-up-vite-manually",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "Webpack",
"path": "/recipes/webpack",
"id": "webpack",
"isExternal": false,
"children": [
{
"name": "How to configure webpack on your Nx workspace",
"path": "/recipes/webpack/webpack-config-setup",
"id": "webpack-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Webpack plugins",
"path": "/recipes/webpack/webpack-plugins",
"id": "webpack-plugins",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{ {
"name": "Enforce Module Boundaries", "name": "Enforce Module Boundaries",
"path": "/recipes/enforce-module-boundaries", "path": "/recipes/enforce-module-boundaries",
@ -3093,6 +3177,138 @@
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
}, },
{
"name": "Cypress",
"path": "/recipes/cypress",
"id": "cypress",
"isExternal": false,
"children": [
{
"name": "Component Testing",
"path": "/recipes/cypress/cypress-component-testing",
"id": "cypress-component-testing",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Cypress v11 Migration Guide",
"path": "/recipes/cypress/cypress-v11-migration",
"id": "cypress-v11-migration",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "Component Testing",
"path": "/recipes/cypress/cypress-component-testing",
"id": "cypress-component-testing",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Cypress v11 Migration Guide",
"path": "/recipes/cypress/cypress-v11-migration",
"id": "cypress-v11-migration",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Next",
"path": "/recipes/next",
"id": "next",
"isExternal": false,
"children": [
{
"name": "How to configure Next.js plugins",
"path": "/recipes/next/next-config-setup",
"id": "next-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "How to configure Next.js plugins",
"path": "/recipes/next/next-config-setup",
"id": "next-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Vite",
"path": "/recipes/vite",
"id": "vite",
"isExternal": false,
"children": [
{
"name": "Manually set up your project to use Vite.js",
"path": "/recipes/vite/set-up-vite-manually",
"id": "set-up-vite-manually",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "Manually set up your project to use Vite.js",
"path": "/recipes/vite/set-up-vite-manually",
"id": "set-up-vite-manually",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Webpack",
"path": "/recipes/webpack",
"id": "webpack",
"isExternal": false,
"children": [
{
"name": "How to configure webpack on your Nx workspace",
"path": "/recipes/webpack/webpack-config-setup",
"id": "webpack-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Webpack plugins",
"path": "/recipes/webpack/webpack-plugins",
"id": "webpack-plugins",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"disableCollapsible": false
},
{
"name": "How to configure webpack on your Nx workspace",
"path": "/recipes/webpack/webpack-config-setup",
"id": "webpack-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Webpack plugins",
"path": "/recipes/webpack/webpack-plugins",
"id": "webpack-plugins",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{ {
"name": "Enforce Module Boundaries", "name": "Enforce Module Boundaries",
"path": "/recipes/enforce-module-boundaries", "path": "/recipes/enforce-module-boundaries",
@ -6001,22 +6217,6 @@
"isExternal": false, "isExternal": false,
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
},
{
"name": "Component Testing",
"path": "/packages/cypress/documents/cypress-component-testing",
"id": "cypress-component-testing",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "v11 Migration Guide",
"path": "/packages/cypress/documents/v11-migration-guide",
"id": "v11-migration-guide",
"isExternal": false,
"children": [],
"disableCollapsible": false
} }
], ],
"isExternal": false, "isExternal": false,
@ -6999,14 +7199,6 @@
"isExternal": false, "isExternal": false,
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
},
{
"name": "How to configure Next.js plugins",
"path": "/packages/next/documents/next-config-setup",
"id": "next-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
} }
], ],
"isExternal": false, "isExternal": false,
@ -8168,14 +8360,6 @@
"isExternal": false, "isExternal": false,
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
},
{
"name": "Manually set up your project to use Vite.js",
"path": "/packages/vite/documents/set-up-vite-manually",
"id": "set-up-vite-manually",
"isExternal": false,
"children": [],
"disableCollapsible": false
} }
], ],
"isExternal": false, "isExternal": false,
@ -8352,22 +8536,6 @@
"isExternal": false, "isExternal": false,
"children": [], "children": [],
"disableCollapsible": false "disableCollapsible": false
},
{
"name": "How to configure webpack on your Nx workspace",
"path": "/packages/webpack/documents/webpack-config-setup",
"id": "webpack-config-setup",
"isExternal": false,
"children": [],
"disableCollapsible": false
},
{
"name": "Webpack plugins",
"path": "/packages/webpack/documents/webpack-plugins",
"id": "webpack-plugins",
"isExternal": false,
"children": [],
"disableCollapsible": false
} }
], ],
"isExternal": false, "isExternal": false,

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

@ -2481,6 +2481,110 @@
"path": "/recipes/storybook", "path": "/recipes/storybook",
"tags": [] "tags": []
}, },
{
"id": "cypress",
"name": "Cypress",
"description": "Cypress related recipes",
"file": "",
"itemList": [
{
"id": "cypress-component-testing",
"name": "Component Testing",
"description": "Component Testing",
"file": "shared/packages/cypress/cypress-component-testing",
"itemList": [],
"isExternal": false,
"path": "/recipes/cypress/cypress-component-testing",
"tags": []
},
{
"id": "cypress-v11-migration",
"name": "Cypress v11 Migration Guide",
"description": "Cypress v11 Migration Guide",
"file": "shared/packages/cypress/cypress-v11-migration",
"itemList": [],
"isExternal": false,
"path": "/recipes/cypress/cypress-v11-migration",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/cypress",
"tags": []
},
{
"id": "next",
"name": "Next",
"description": "Next related recipes",
"file": "",
"itemList": [
{
"id": "next-config-setup",
"name": "How to configure Next.js plugins",
"description": "How to configure Next.js plugins",
"file": "shared/packages/next/next-config-setup",
"itemList": [],
"isExternal": false,
"path": "/recipes/next/next-config-setup",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/next",
"tags": []
},
{
"id": "vite",
"name": "Vite",
"description": "Vite related recipes",
"file": "",
"itemList": [
{
"id": "set-up-vite-manually",
"name": "Manually set up your project to use Vite.js",
"description": "Manually set up your project to use Vite.js",
"file": "shared/packages/vite/set-up-vite-manually",
"itemList": [],
"isExternal": false,
"path": "/recipes/vite/set-up-vite-manually",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/vite",
"tags": []
},
{
"id": "webpack",
"name": "Webpack",
"description": "Webpack related recipes",
"file": "",
"itemList": [
{
"id": "webpack-config-setup",
"name": "How to configure webpack on your Nx workspace",
"description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
"file": "shared/packages/webpack/webpack-config-setup",
"itemList": [],
"isExternal": false,
"path": "/recipes/webpack/webpack-config-setup",
"tags": []
},
{
"id": "webpack-plugins",
"name": "Webpack plugins",
"description": "Webpack plugins",
"file": "shared/packages/webpack/webpack-plugins",
"itemList": [],
"isExternal": false,
"path": "/recipes/webpack/webpack-plugins",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/webpack",
"tags": []
},
{ {
"id": "enforce-module-boundaries", "id": "enforce-module-boundaries",
"name": "Enforce Module Boundaries", "name": "Enforce Module Boundaries",
@ -3859,6 +3963,170 @@
"path": "/recipes/storybook/angular-configuring-styles", "path": "/recipes/storybook/angular-configuring-styles",
"tags": ["storybook"] "tags": ["storybook"]
}, },
"/recipes/cypress": {
"id": "cypress",
"name": "Cypress",
"description": "Cypress related recipes",
"file": "",
"itemList": [
{
"id": "cypress-component-testing",
"name": "Component Testing",
"description": "Component Testing",
"file": "shared/packages/cypress/cypress-component-testing",
"itemList": [],
"isExternal": false,
"path": "/recipes/cypress/cypress-component-testing",
"tags": []
},
{
"id": "cypress-v11-migration",
"name": "Cypress v11 Migration Guide",
"description": "Cypress v11 Migration Guide",
"file": "shared/packages/cypress/cypress-v11-migration",
"itemList": [],
"isExternal": false,
"path": "/recipes/cypress/cypress-v11-migration",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/cypress",
"tags": []
},
"/recipes/cypress/cypress-component-testing": {
"id": "cypress-component-testing",
"name": "Component Testing",
"description": "Component Testing",
"file": "shared/packages/cypress/cypress-component-testing",
"itemList": [],
"isExternal": false,
"path": "/recipes/cypress/cypress-component-testing",
"tags": []
},
"/recipes/cypress/cypress-v11-migration": {
"id": "cypress-v11-migration",
"name": "Cypress v11 Migration Guide",
"description": "Cypress v11 Migration Guide",
"file": "shared/packages/cypress/cypress-v11-migration",
"itemList": [],
"isExternal": false,
"path": "/recipes/cypress/cypress-v11-migration",
"tags": []
},
"/recipes/next": {
"id": "next",
"name": "Next",
"description": "Next related recipes",
"file": "",
"itemList": [
{
"id": "next-config-setup",
"name": "How to configure Next.js plugins",
"description": "How to configure Next.js plugins",
"file": "shared/packages/next/next-config-setup",
"itemList": [],
"isExternal": false,
"path": "/recipes/next/next-config-setup",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/next",
"tags": []
},
"/recipes/next/next-config-setup": {
"id": "next-config-setup",
"name": "How to configure Next.js plugins",
"description": "How to configure Next.js plugins",
"file": "shared/packages/next/next-config-setup",
"itemList": [],
"isExternal": false,
"path": "/recipes/next/next-config-setup",
"tags": []
},
"/recipes/vite": {
"id": "vite",
"name": "Vite",
"description": "Vite related recipes",
"file": "",
"itemList": [
{
"id": "set-up-vite-manually",
"name": "Manually set up your project to use Vite.js",
"description": "Manually set up your project to use Vite.js",
"file": "shared/packages/vite/set-up-vite-manually",
"itemList": [],
"isExternal": false,
"path": "/recipes/vite/set-up-vite-manually",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/vite",
"tags": []
},
"/recipes/vite/set-up-vite-manually": {
"id": "set-up-vite-manually",
"name": "Manually set up your project to use Vite.js",
"description": "Manually set up your project to use Vite.js",
"file": "shared/packages/vite/set-up-vite-manually",
"itemList": [],
"isExternal": false,
"path": "/recipes/vite/set-up-vite-manually",
"tags": []
},
"/recipes/webpack": {
"id": "webpack",
"name": "Webpack",
"description": "Webpack related recipes",
"file": "",
"itemList": [
{
"id": "webpack-config-setup",
"name": "How to configure webpack on your Nx workspace",
"description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
"file": "shared/packages/webpack/webpack-config-setup",
"itemList": [],
"isExternal": false,
"path": "/recipes/webpack/webpack-config-setup",
"tags": []
},
{
"id": "webpack-plugins",
"name": "Webpack plugins",
"description": "Webpack plugins",
"file": "shared/packages/webpack/webpack-plugins",
"itemList": [],
"isExternal": false,
"path": "/recipes/webpack/webpack-plugins",
"tags": []
}
],
"isExternal": false,
"path": "/recipes/webpack",
"tags": []
},
"/recipes/webpack/webpack-config-setup": {
"id": "webpack-config-setup",
"name": "How to configure webpack on your Nx workspace",
"description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
"file": "shared/packages/webpack/webpack-config-setup",
"itemList": [],
"isExternal": false,
"path": "/recipes/webpack/webpack-config-setup",
"tags": []
},
"/recipes/webpack/webpack-plugins": {
"id": "webpack-plugins",
"name": "Webpack plugins",
"description": "Webpack plugins",
"file": "shared/packages/webpack/webpack-plugins",
"itemList": [],
"isExternal": false,
"path": "/recipes/webpack/webpack-plugins",
"tags": []
},
"/recipes/enforce-module-boundaries": { "/recipes/enforce-module-boundaries": {
"id": "enforce-module-boundaries", "id": "enforce-module-boundaries",
"name": "Enforce Module Boundaries", "name": "Enforce Module Boundaries",

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

@ -436,28 +436,6 @@
"path": "/packages/cypress/documents/overview", "path": "/packages/cypress/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/cypress/cypress-plugin" "originalFilePath": "shared/packages/cypress/cypress-plugin"
},
"/packages/cypress/documents/cypress-component-testing": {
"id": "cypress-component-testing",
"name": "Component Testing",
"description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
"file": "generated/packages/cypress/documents/cypress-component-testing",
"itemList": [],
"isExternal": false,
"path": "/packages/cypress/documents/cypress-component-testing",
"tags": [],
"originalFilePath": "shared/packages/cypress/cypress-component-testing"
},
"/packages/cypress/documents/v11-migration-guide": {
"id": "v11-migration-guide",
"name": "v11 Migration Guide",
"description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
"file": "generated/packages/cypress/documents/v11-migration-guide",
"itemList": [],
"isExternal": false,
"path": "/packages/cypress/documents/v11-migration-guide",
"tags": [],
"originalFilePath": "shared/packages/cypress/cypress-v11-migration"
} }
}, },
"root": "/packages/cypress", "root": "/packages/cypress",
@ -1365,17 +1343,6 @@
"path": "/packages/next/documents/overview", "path": "/packages/next/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/next/plugin-overview" "originalFilePath": "shared/packages/next/plugin-overview"
},
"/packages/next/documents/next-config-setup": {
"id": "next-config-setup",
"name": "How to configure Next.js plugins",
"description": "A guide for configuring Next.js plugins with Nx",
"file": "generated/packages/next/documents/next-config-setup",
"itemList": [],
"isExternal": false,
"path": "/packages/next/documents/next-config-setup",
"tags": [],
"originalFilePath": "shared/packages/next/next-config-setup"
} }
}, },
"root": "/packages/next", "root": "/packages/next",
@ -2549,17 +2516,6 @@
"path": "/packages/vite/documents/overview", "path": "/packages/vite/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/vite/vite-plugin" "originalFilePath": "shared/packages/vite/vite-plugin"
},
"/packages/vite/documents/set-up-vite-manually": {
"id": "set-up-vite-manually",
"name": "Manually set up your project to use Vite.js",
"description": "This guide explains how you can manually set up your project to use Vite.js in your Nx workspace.",
"file": "generated/packages/vite/documents/set-up-vite-manually",
"itemList": [],
"isExternal": false,
"path": "/packages/vite/documents/set-up-vite-manually",
"tags": [],
"originalFilePath": "shared/packages/vite/set-up-vite-manually"
} }
}, },
"root": "/packages/vite", "root": "/packages/vite",
@ -2711,28 +2667,6 @@
"path": "/packages/webpack/documents/overview", "path": "/packages/webpack/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/webpack/plugin-overview" "originalFilePath": "shared/packages/webpack/plugin-overview"
},
"/packages/webpack/documents/webpack-config-setup": {
"id": "webpack-config-setup",
"name": "How to configure webpack on your Nx workspace",
"description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
"file": "generated/packages/webpack/documents/webpack-config-setup",
"itemList": [],
"isExternal": false,
"path": "/packages/webpack/documents/webpack-config-setup",
"tags": [],
"originalFilePath": "shared/packages/webpack/webpack-config-setup"
},
"/packages/webpack/documents/webpack-plugins": {
"id": "webpack-plugins",
"name": "Webpack plugins",
"description": "Webpack plugins",
"file": "generated/packages/webpack/documents/webpack-plugins",
"itemList": [],
"isExternal": false,
"path": "/packages/webpack/documents/webpack-plugins",
"tags": [],
"originalFilePath": "shared/packages/webpack/webpack-plugins"
} }
}, },
"root": "/packages/webpack", "root": "/packages/webpack",

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

File diff suppressed because it is too large Load Diff

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

@ -430,28 +430,6 @@
"path": "cypress/documents/overview", "path": "cypress/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/cypress/cypress-plugin" "originalFilePath": "shared/packages/cypress/cypress-plugin"
},
{
"id": "cypress-component-testing",
"name": "Component Testing",
"description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
"file": "generated/packages/cypress/documents/cypress-component-testing",
"itemList": [],
"isExternal": false,
"path": "cypress/documents/cypress-component-testing",
"tags": [],
"originalFilePath": "shared/packages/cypress/cypress-component-testing"
},
{
"id": "v11-migration-guide",
"name": "v11 Migration Guide",
"description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
"file": "generated/packages/cypress/documents/v11-migration-guide",
"itemList": [],
"isExternal": false,
"path": "cypress/documents/v11-migration-guide",
"tags": [],
"originalFilePath": "shared/packages/cypress/cypress-v11-migration"
} }
], ],
"executors": [ "executors": [
@ -1348,17 +1326,6 @@
"path": "next/documents/overview", "path": "next/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/next/plugin-overview" "originalFilePath": "shared/packages/next/plugin-overview"
},
{
"id": "next-config-setup",
"name": "How to configure Next.js plugins",
"description": "A guide for configuring Next.js plugins with Nx",
"file": "generated/packages/next/documents/next-config-setup",
"itemList": [],
"isExternal": false,
"path": "next/documents/next-config-setup",
"tags": [],
"originalFilePath": "shared/packages/next/next-config-setup"
} }
], ],
"executors": [ "executors": [
@ -2522,17 +2489,6 @@
"path": "vite/documents/overview", "path": "vite/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/vite/vite-plugin" "originalFilePath": "shared/packages/vite/vite-plugin"
},
{
"id": "set-up-vite-manually",
"name": "Manually set up your project to use Vite.js",
"description": "This guide explains how you can manually set up your project to use Vite.js in your Nx workspace.",
"file": "generated/packages/vite/documents/set-up-vite-manually",
"itemList": [],
"isExternal": false,
"path": "vite/documents/set-up-vite-manually",
"tags": [],
"originalFilePath": "shared/packages/vite/set-up-vite-manually"
} }
], ],
"executors": [ "executors": [
@ -2682,28 +2638,6 @@
"path": "webpack/documents/overview", "path": "webpack/documents/overview",
"tags": [], "tags": [],
"originalFilePath": "shared/packages/webpack/plugin-overview" "originalFilePath": "shared/packages/webpack/plugin-overview"
},
{
"id": "webpack-config-setup",
"name": "How to configure webpack on your Nx workspace",
"description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
"file": "generated/packages/webpack/documents/webpack-config-setup",
"itemList": [],
"isExternal": false,
"path": "webpack/documents/webpack-config-setup",
"tags": [],
"originalFilePath": "shared/packages/webpack/webpack-config-setup"
},
{
"id": "webpack-plugins",
"name": "Webpack plugins",
"description": "Webpack plugins",
"file": "generated/packages/webpack/documents/webpack-plugins",
"itemList": [],
"isExternal": false,
"path": "webpack/documents/webpack-plugins",
"tags": [],
"originalFilePath": "shared/packages/webpack/webpack-plugins"
} }
], ],
"executors": [ "executors": [

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

@ -1,71 +0,0 @@
# Cypress Component Testing
> Component testing requires Cypress v10 and above.
> See our [guide for more information](/packages/cypress/documents/v11-migration-guide) to migrate to Cypress v10.
Unlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added
directly to a project, like [Jest](/packages/jest)
## Add Component Testing to a Project
> Currently only [@nx/react](/packages/react/generators/cypress-component-configuration), [@nx/angular](/packages/angular/generators/cypress-component-configuration), and [@nx/next](/packages/next/generators/cypress-component-configuration) plugins support component testing
Use the `cypress-component-configuration` generator from the respective plugin to add component testing to a project.
```shell
nx g @nx/react:cypress-component-configuration --project=your-project
nx g @nx/angular:cypress-component-configuration --project=your-project
nx g @nx/next:cypress-component-configuration --project=your-project
```
You can optionally pass in `--generate-tests` to create component tests for all components within the library.
Component testing supports both applications and libraries. By default, the generator attempts to find the build target for you based on the project's dependent apps. But you can manually specify the build target to use via the `--build-target` option. Note, in most cases, the build target will be from a different project than the one being configured. The only case where the build targets are from the same project is when the component tests are being added to an application.
> Note: The [@nx/next:cypress-component-configuration generator](/packages/next/generators/cypress-component-configuration) doesn't require a build target
```shell
nx g @nx/react:cypress-component-configuration --project=your-project --build-target=my-react-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 `@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 %}
## Configuration
When using the `cypress-component-configuration` generator, a helper function is used in the `cypress.config.ts` to setup the ideal settings for your project.
If you need to add additional configuration properties, you can spread the returned object from the helper function.
```ts {%filename="cypress.config.ts"}
export default defineConfig({
component: {
...nxComponentTestingPreset(__filename),
// add your own config here
},
});
```
## Testing Projects
Run `nx component-test your-lib` to execute the component tests with Cypress.
By default, Cypress will run in headless mode. You will have the result of all the tests and errors (if any) in your
terminal. Screenshots and videos will be accessible in `dist/cypress/libs/your-lib/screenshots` and `dist/cypress/libs/your-lib/videos`.
## Watching for Changes (Headed Mode)
With, `nx component-test your-lib --watch` Cypress will start in headed mode. Where you can see your component being tested.
Running Cypress with `--watch` is a great way to iterate on your components since cypress will rerun your tests as you make those changes validating the new behavior.
## More Information
You can read more on component testing in the [Cypress documentation](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test).

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

@ -9,7 +9,7 @@ Cypress is a test runner built for the modern web. It has a lot of great feature
## Setting Up Cypress ## Setting Up Cypress
> Info about [Cypress Component Testing can be found here](/packages/cypress/documents/cypress-component-testing) > Info about [Cypress Component Testing can be found here](/recipes/cypress/cypress-component-testing)
> >
> Info about [using Cypress and Storybook can be found here](/recipes/storybook/overview-react#cypress-tests-for-storiesbook) > Info about [using Cypress and Storybook can be found here](/recipes/storybook/overview-react#cypress-tests-for-storiesbook)

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

@ -1,37 +0,0 @@
# Migrating to Cypress V11
Cypress v10 introduce new features, like component testing, along with some breaking changes. Nx can help you migrate from v8 or v9 of Cypress to v10 and then to v11.
Before continuing, make sure you have all your changes committed and have a clean working tree.
You can migrate an E2E project to v11 by running the following command:
{% callout type="note" title="Generator Naming Changes" %}
If your nx version is below v15.3.0, this migration is called `migrate-to-cypress-10`.
From v15.3.0+ this generator is called `migrate-to-cypress-11`.
As of nx v15.1.0, if your project was already using Cypress v10, then your project will be migrated to Cypress v11 via the [standard nx migration process](/core-features/automate-updating-dependencies)
{% /callout %}
```shell
nx g @nx/cypress:migrate-to-cypress-11
```
In general, these are the steps taken to migrate your project:
1. Migrates your existing `cypress.json` configuration to a new `cypress.config.ts` configuration file.
- The `pluginsFile` option has been replaced for `setupNodeEvents`. We will import the file and add it to
the `setupNodeEvents` config option. Double-check your plugins are working correctly.
2. Rename all test files from `.spec.ts` to `.cy.ts`
3. Rename the `support/index.ts` to `support/e2e.ts` and update any associated imports
4. Rename the `integrations` folder to the `e2e` folder
{% callout type="caution" title="Root cypress.json" %}
Keeping a root `cypress.json` file, will cause issues with [Cypress trying to load the project](https://github.com/nrwl/nx/issues/11512).
Instead, you can create a [root ts file and import it into each project's cypress config file](https://github.com/nrwl/nx/issues/11512#issuecomment-1213420638) to share values across projects.
{% /callout %}
We take the best effort to make this migration seamless, but there can be edge cases we didn't anticipate. So feel free to [open an issue](https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+bug&template=1-bug.md) if you come across any problems.
You can also consult the [official Cypress migration guide](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-version-10-0) if you get stuck and want to manually migrate your projects.

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

@ -1,47 +0,0 @@
{
"name": "cypress-component-configuration",
"factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfiguration",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxCypressComponentConfiguration",
"cli": "nx",
"title": "Set up Cypress component testing for a project",
"description": "Set up Cypress component test for a project.",
"type": "object",
"examples": [
{
"command": "nx g @nx/cypress:cypress-component-configuration --project=my-cool-lib ",
"description": "Add cypress component testing to an existing project named my-cool-lib"
}
],
"properties": {
"project": {
"type": "string",
"description": "The name of the project to add cypress component testing to",
"$default": { "$source": "projectName" },
"x-prompt": "What project should we add Cypress component testing to?"
},
"bundler": {
"description": "The Cypress bundler to use.",
"type": "string",
"enum": ["vite", "webpack"],
"x-prompt": "Which Cypress bundler do you want to use for the dev-server?",
"default": "webpack"
},
"directory": {
"type": "string",
"description": "A directory where the project is placed relative from the project root",
"default": "cypress"
}
},
"required": ["project"],
"examplesFile": "This is a framework-agnostic generator for adding component testing to a project.\n\n```bash\nnx g cypress-component-configuration --project=my-cool-project\n```\n\nRunning this generator, adds the required files to the specified project without any configurations for Cypress. It's best to use the framework specific generator, instead `cypress-component-configuration` directly\n\n- [React component testing](/packages/react/generators/cypress-component-configuration)\n- [Angular component testing](/packages/angular/generators/cypress-component-configuration)\n\nA new `component-test` target will be added to the specified project.\n\n```bash\nnx g component-test my-cool-project\n```\n\nRead more about [Cypress Component Testing](/cypress/cypress-component-testing)\n",
"presets": []
},
"description": "Set up Cypress Component Test for a project",
"hidden": true,
"implementation": "/packages/cypress/src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfiguration.ts",
"aliases": [],
"path": "/packages/cypress/src/generators/cypress-component-configuration/schema.json",
"type": "generator"
}

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

@ -1,42 +0,0 @@
{
"name": "cypress-component-project",
"factory": "./src/generators/cypress-component-project/cypress-component-project#cypressComponentProject",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxCypressComponentProject",
"cli": "nx",
"title": "Set up Cypress component testing for a project",
"description": "Set up Cypress component test for a project.",
"type": "object",
"examples": [
{
"command": "nx g @nrwl/cypress:cypress-component-project --project=my-cool-lib ",
"description": "Add cypress component testing to an existing project named my-cool-lib"
}
],
"properties": {
"project": {
"type": "string",
"description": "The name of the project to add cypress component testing to",
"$default": { "$source": "projectName" },
"x-prompt": "What project should we add Cypress component testing to?"
},
"bundler": {
"description": "The Cypress bundler to use.",
"type": "string",
"enum": ["vite", "webpack"],
"x-prompt": "Which Cypress bundler do you want to use for the dev-server?",
"default": "webpack"
}
},
"required": ["project"],
"examplesFile": "This is a framework-agnostic generator for adding component testing to a project.\n\n```bash\nnx g cypress-component-project --project=my-cool-project\n```\n\nRunning this generator, adds the required files to the specified project without any configurations for Cypress. 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\nA new `component-test` target will be added to the specified project.\n\n```bash\nnx g component-test my-cool-project\n```\n\nRead more about [Cypress Component Testing](/cypress/cypress-component-testing)\n",
"presets": []
},
"description": "Set up Cypress Component Test for a project",
"hidden": true,
"implementation": "/packages/cypress/src/generators/cypress-component-project/cypress-component-project#cypressComponentProject.ts",
"aliases": [],
"path": "/packages/cypress/src/generators/cypress-component-project/schema.json",
"type": "generator"
}

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

@ -1,95 +0,0 @@
{
"name": "cypress-e2e-configuration",
"aliases": ["e2e", "e2e-config"],
"factory": "./src/generators/cypress-e2e-configuration/cypress-e2e-configuration",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxCypressE2EConfigGenerator",
"cli": "nx",
"title": "Add a Cypress Configuration.",
"description": "Add a Cypress configuration to an existing project.",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The project to add a Cypress configuration to",
"$default": { "$source": "projectName" },
"x-priority": "important",
"x-prompt": "What project do you want to add Cypress to?"
},
"devServerTarget": {
"type": "string",
"description": "A devServerTarget,'<projectName>:<targetName>[:<configName>], that will be used to run tests against. This is usually the app this project will be used in. Pass --baseUrl if you wish to not use a devServerTarget.",
"x-priority": "important"
},
"port": {
"oneOf": [
{ "type": "string", "enum": ["cypress-auto"] },
{ "type": "number" }
],
"description": "Set the 'port' option on the e2e target. It's recommend to set a different port so you can run tests e2e targets in parallel. Most dev servers support using '0' to automatically find a free port. The value 'cypress-auto' can be used if the underlying dev server does not support automatically finding a free port.",
"x-priority": "important"
},
"baseUrl": {
"type": "string",
"description": "The address (with the port) which your application is running on. If you wish to start your application when running the e2e target, then use --devServerTarget instead."
},
"directory": {
"type": "string",
"description": "A directory where the project is placed relative from the project root",
"x-priority": "important",
"default": "cypress"
},
"linter": {
"description": "The tool to use for running lint checks.",
"type": "string",
"enum": ["eslint", "none"],
"default": "eslint"
},
"js": {
"description": "Generate JavaScript files rather than TypeScript files.",
"type": "boolean",
"default": false
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"setParserOptionsProject": {
"type": "boolean",
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
"default": false
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`.",
"x-priority": "internal"
},
"rootProject": {
"description": "Create a application at the root of the workspace",
"type": "boolean",
"default": false,
"hidden": true,
"x-priority": "internal"
},
"bundler": {
"description": "The Cypress bundler to use.",
"type": "string",
"enum": ["vite", "webpack", "none"],
"x-prompt": "Which Cypress bundler do you want to use?",
"default": "webpack"
}
},
"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 `@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.",
"implementation": "/packages/cypress/src/generators/cypress-e2e-configuration/cypress-e2e-configuration.ts",
"hidden": false,
"path": "/packages/cypress/src/generators/cypress-e2e-configuration/schema.json",
"type": "generator"
}

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

@ -1,75 +0,0 @@
{
"name": "esbuild-project",
"factory": "./src/generators/esbuild-project/esbuild-project#esbuildProjectGenerator",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxEsBuildProject",
"cli": "nx",
"title": "Add esbuild configuration to a project",
"description": "Add esbuild configuration to a project.",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"$default": { "$source": "argv", "index": 0 },
"x-dropdown": "project",
"x-prompt": "What is the name of the project to set up a esbuild for?",
"x-priority": "important"
},
"main": {
"type": "string",
"description": "Path relative to the workspace root for the main entry file. Defaults to `<project-root>/src/main.ts` or `<project-root>src/index.ts`, whichever is found.",
"alias": "entryFile",
"x-priority": "important"
},
"tsConfig": {
"type": "string",
"description": "Path relative to the workspace root for the tsconfig file to build with. Defaults to `<project-root>/tsconfig.app.json` or `<project-root>/tsconfig.lib.json`, whichever is found.",
"x-priority": "important"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`.",
"x-priority": "internal"
},
"skipValidation": {
"type": "boolean",
"default": false,
"description": "Do not perform any validation on existing project.",
"x-priority": "internal"
},
"importPath": {
"type": "string",
"description": "The library name used to import it, like `@myorg/my-awesome-lib`."
},
"platform": {
"type": "string",
"description": "Platform target for outputs.",
"enum": ["browser", "node", "neutral"],
"default": "node"
},
"buildTarget": {
"description": "The build target to add.",
"type": "string",
"default": "build"
}
},
"required": [],
"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.",
"hidden": true,
"implementation": "/packages/esbuild/src/generators/esbuild-project/esbuild-project#esbuildProjectGenerator.ts",
"aliases": [],
"path": "/packages/esbuild/src/generators/esbuild-project/schema.json",
"type": "generator"
}

65
docs/generated/packages/expo/executors/build-android.json
View File

@ -1,65 +0,0 @@
{
"name": "build-android",
"implementation": "/packages/expo/src/executors/build-android/build-android.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"$schema": "http://json-schema.org/schema",
"$id": "NxExpoBuildAndroid",
"cli": "nx",
"title": "Expo Android Build executor",
"description": "Build and sign a standalone APK or App Bundle for the Google Play Store.",
"type": "object",
"properties": {
"clearCredentials": {
"type": "boolean",
"description": "Clear all credentials stored on Expo servers.",
"alias": "c"
},
"type": {
"enum": ["app-bundle", "apk"],
"description": "Type of build: [app-bundle⎮apk].",
"alias": "t",
"x-priority": "important"
},
"releaseChannel": {
"type": "string",
"description": "Pull from specified release channel."
},
"noPublish": {
"type": "boolean",
"description": "Disable automatic publishing before building."
},
"noWait": {
"type": "boolean",
"description": "Exit immediately after scheduling build."
},
"keystorePath": {
"type": "string",
"description": "Path to your Keystore: *.jks."
},
"keystoreAlias": { "type": "string", "description": "Keystore Alias" },
"publicUrl": {
"type": "string",
"description": "The URL of an externally hosted manifest (for self-hosted apps)."
},
"skipWorkflowCheck": {
"type": "boolean",
"description": "Skip warning about build service bare workflow limitations."
},
"sync": {
"type": "boolean",
"description": "Syncs npm dependencies to package.json (for React Native autolink).",
"default": true,
"x-priority": "internal"
}
},
"required": [],
"presets": []
},
"description": "Build and sign a standalone APK or App Bundle for the Google Play Store",
"aliases": [],
"hidden": false,
"path": "/packages/expo/src/executors/build-android/schema.json",
"type": "executor"
}

102
docs/generated/packages/expo/executors/build-ios.json
View File

@ -1,102 +0,0 @@
{
"name": "build-ios",
"implementation": "/packages/expo/src/executors/build-ios/build-ios.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"$schema": "http://json-schema.org/schema",
"$id": "NxExpoBuildIOS",
"cli": "nx",
"title": "Expo iOS Build executor",
"description": "Build and sign a standalone IPA for the Apple App Store.",
"type": "object",
"properties": {
"clearCredentials": {
"type": "boolean",
"description": "Clear all credentials stored on Expo servers.",
"alias": "c"
},
"clearDistCert": {
"type": "boolean",
"description": "Remove Distribution Certificate stored on Expo servers."
},
"clearPushKey": {
"type": "boolean",
"description": "Remove Push Notifications Key stored on Expo servers."
},
"clearPushCert": {
"type": "boolean",
"description": "Remove Push Notifications Certificate stored on Expo servers. Use of Push Notifications Certificates is deprecated."
},
"clearProvisioningProfile": {
"type": "boolean",
"description": "Remove Provisioning Profile stored on Expo servers."
},
"revokeCredentials": {
"type": "boolean",
"description": "Revoke credentials on developer.apple.com, select appropriate using --clear-* options.",
"alias": "r"
},
"appleId": {
"type": "string",
"description": "Apple ID username (please also set the Apple ID password as EXPO_APPLE_PASSWORD environment variable)."
},
"type": {
"enum": ["archive", "simulator"],
"description": "Type of build: [archive⎮simulator].",
"alias": "t",
"x-priority": "important"
},
"releaseChannel": {
"type": "string",
"description": "Pull from specified release channel."
},
"noPublish": {
"type": "boolean",
"description": "Disable automatic publishing before building."
},
"noWait": {
"type": "boolean",
"description": "Exit immediately after scheduling build."
},
"teamId": { "type": "string", "description": "Apple Team ID." },
"distP12Path": {
"type": "string",
"description": "Path to your Distribution Certificate P12 (set password as EXPO_IOS_DIST_P12_PASSWORD environment variable)."
},
"pushP8Path": {
"type": "string",
"description": "Path to your Push Key .p8 file."
},
"provisioningProfilePath": {
"type": "string",
"description": "Path to your Provisioning Profile."
},
"publicUrl": {
"type": "string",
"description": "The URL of an externally hosted manifest (for self-hosted apps)."
},
"skipCredentialsCheck": {
"type": "boolean",
"description": "Skip checking credentials."
},
"skipWorkflowCheck": {
"type": "boolean",
"description": "Skip warning about build service bare workflow limitations."
},
"sync": {
"type": "boolean",
"description": "Syncs npm dependencies to package.json (for React Native autolink).",
"default": true,
"x-priority": "internal"
}
},
"required": [],
"presets": []
},
"description": "Build and sign a standalone IPA for the Apple App Store",
"aliases": [],
"hidden": false,
"path": "/packages/expo/src/executors/build-ios/schema.json",
"type": "executor"
}

27
docs/generated/packages/expo/executors/build-status.json
View File

@ -1,27 +0,0 @@
{
"name": "build-status",
"implementation": "/packages/expo/src/executors/build-status/build-status.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"$schema": "http://json-schema.org/schema",
"$id": "NxExpoBuildStatus",
"cli": "nx",
"title": "Expo web Build executor",
"description": "Get the status of the latest build for the project.",
"type": "object",
"properties": {
"publicUrl": {
"type": "string",
"description": "The URL of an externally hosted manifest (for self-hosted apps)."
}
},
"required": [],
"presets": []
},
"description": "Get the status of the latest build for the project",
"aliases": [],
"hidden": false,
"path": "/packages/expo/src/executors/build-status/schema.json",
"type": "executor"
}

36
docs/generated/packages/expo/executors/build-web.json
View File

@ -1,36 +0,0 @@
{
"name": "build-web",
"implementation": "/packages/expo/src/executors/build-web/build-web.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"$schema": "http://json-schema.org/schema",
"$id": "NxExpoBuildWeb",
"cli": "nx",
"title": "Expo web Build executor",
"description": "Build the web app for production.",
"type": "object",
"properties": {
"clear": {
"type": "boolean",
"description": "Clear all cached build files and assets.",
"alias": "c"
},
"noPwa": {
"type": "boolean",
"description": "Prevent webpack from generating the manifest.json and injecting meta into the index.html head."
},
"dev": {
"type": "boolean",
"description": "Turns dev flag on before bundling"
}
},
"required": [],
"presets": []
},
"description": "Build the web app for production",
"aliases": [],
"hidden": false,
"path": "/packages/expo/src/executors/build-web/schema.json",
"type": "executor"
}

31
docs/generated/packages/expo/executors/publish-set.json
View File

@ -1,31 +0,0 @@
{
"name": "publish-set",
"implementation": "/packages/expo/src/executors/publish-set/publish-set.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"cli": "nx",
"$id": "NxExpoPublishSet",
"$schema": "http://json-schema.org/schema",
"title": "Set Publish Channel for Expo",
"description": "Specify the channel to serve a published release.",
"type": "object",
"properties": {
"releaseChannel": {
"type": "string",
"description": "The release channel to publish to."
},
"publishId": {
"type": "string",
"description": "The id of the published release to serve from the channel."
}
},
"required": ["releaseChannel", "publishId"],
"presets": []
},
"description": "Specify the channel to serve a published release",
"aliases": [],
"hidden": false,
"path": "/packages/expo/src/executors/publish-set/schema.json",
"type": "executor"
}

55
docs/generated/packages/expo/executors/publish.json
View File

@ -1,55 +0,0 @@
{
"name": "publish",
"implementation": "/packages/expo/src/executors/publish/publish.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"cli": "nx",
"$id": "NxExpoPublish",
"$schema": "http://json-schema.org/schema",
"title": "Publish for Expo",
"description": "Deploy a project to Expo hosting.",
"type": "object",
"properties": {
"quiet": {
"type": "boolean",
"description": "Suppress verbose output from the Metro bundler",
"default": false,
"alias": "q"
},
"sendTo": {
"type": "string",
"description": "A phone number or email address to send a link to",
"alias": "s"
},
"clear": {
"type": "boolean",
"description": "Clear the Metro bundler cache",
"default": false,
"alias": "c"
},
"target": {
"enum": ["managed", "bare"],
"default": "managed",
"description": "Target environment for which this publish is intended. Options are managed or bare.",
"alias": "t",
"x-priority": "important"
},
"maxWorkers": {
"type": "number",
"description": "Maximum number of tasks to allow Metro to spawn"
},
"releaseChannel": {
"type": "string",
"description": "The release channel to publish to. Default is 'default'.",
"default": "default"
}
},
"presets": []
},
"description": "Deploy a project to Expo hosting",
"aliases": [],
"hidden": false,
"path": "/packages/expo/src/executors/publish/schema.json",
"type": "executor"
}

35
docs/generated/packages/expo/executors/rollback.json
View File

@ -1,35 +0,0 @@
{
"name": "rollback",
"implementation": "/packages/expo/src/executors/rollback/rollback.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"cli": "nx",
"$id": "NxExpoRollback",
"$schema": "http://json-schema.org/schema",
"title": "Rollback Publish Command for Expo",
"description": "Undo an update to a channel.",
"type": "object",
"properties": {
"releaseChannel": {
"type": "string",
"description": "The release channel to publish to."
},
"sdkVersion": {
"type": "string",
"description": "The sdk version to rollback."
},
"platform": {
"enum": ["ios", "android"],
"description": "The platform to rollback."
}
},
"required": ["releaseChannel", "sdkVersion"],
"presets": []
},
"description": "Undo an update to a channel",
"aliases": [],
"hidden": false,
"path": "/packages/expo/src/executors/rollback/schema.json",
"type": "executor"
}

89
docs/generated/packages/jest/generators/jest-project.json
View File

@ -1,89 +0,0 @@
{
"name": "jest-project",
"factory": "./src/generators/jest-project/jest-project#jestProjectGenerator",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxJestProject",
"cli": "nx",
"title": "Add Jest Configuration to a project",
"description": "Add Jest Configuration to a project.",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"$default": { "$source": "projectName" },
"x-priority": "important"
},
"skipSetupFile": {
"type": "boolean",
"description": "Skips the setup file required for angular.",
"default": false,
"x-deprecated": "Use `--setup-file` instead."
},
"setupFile": {
"type": "string",
"enum": ["none", "angular", "web-components"],
"description": "The setup file to be generated.",
"default": "none",
"x-priority": "important"
},
"skipSerializers": {
"type": "boolean",
"description": "Skips the serializers required to snapshot angular templates.",
"default": false
},
"supportTsx": {
"type": "boolean",
"description": "Setup `tsx` support.",
"default": false,
"x-priority": "important"
},
"testEnvironment": {
"type": "string",
"enum": ["jsdom", "node", "none"],
"description": "The test environment for jest.",
"default": "jsdom",
"x-priority": "important"
},
"compiler": {
"type": "string",
"enum": ["tsc", "babel", "swc"],
"description": "The compiler to use for source and tests.",
"default": "tsc"
},
"babelJest": {
"type": "boolean",
"alias": "babel-jest",
"description": "Use `babel-jest` instead of `ts-jest`.",
"x-deprecated": "Use `--compiler=babel` instead.",
"default": false
},
"skipFormat": {
"description": "Skip formatting files",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`.",
"x-priority": "internal"
},
"js": {
"type": "boolean",
"default": false,
"description": "Use JavaScript instead of TypeScript for config files"
}
},
"required": [],
"presets": []
},
"description": "Add Jest configuration to a project.",
"hidden": true,
"implementation": "/packages/jest/src/generators/jest-project/jest-project#jestProjectGenerator.ts",
"aliases": [],
"path": "/packages/jest/src/generators/jest-project/schema.json",
"type": "generator"
}

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

@ -1,132 +0,0 @@
---
title: How to configure Next.js plugins
description: A guide for configuring Next.js plugins with Nx
---
# Configuring Next.js plugins
Next.js plugins are configured in the project's `next.config.js` file. Nx adds a its own plugin (`withNx`) to help the Next.js application
understand workspace libraries, and other Nx-specific features. See below for an example of the `withNx` plugin that Nx adds by default.
```js
// next.config.js
// ...
module.exports = withNx({
// Nx configuration goes here
nx: {
svgr: false,
},
// Add Next.js configuration goes here
});
```
This guide contains information on how to configure and 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).
{% /callout %}
## `withNx` plugin
The `withNx` Next.js plugin provides integration with Nx, including support for [workspace libraries](/packages/next/generators/library), SVGR, and more. It is included by default when you generate a Next.js [application](/packages/next/generators/application) with Nx. When you customize your `next.config.js` file, make sure to include the `withNx` plugin.
### Options
#### svgr
Type: `boolean`
Set this to true if you would like to to use SVGR. See: https://react-svgr.com/
#### babelUpwardRootMode
Type: `boolean`
For a monorepo, set to `true` to incorporate `.babelrc` files from individual libraries into the build. Note, however, that doing so will prevent the application's `.babelrc` settings from being applied to its libraries. It is generally recommended not to enable this option, as it can lead to a lack of consistency throughout the workspace. Instead, the application's `.babelrc` file should include the presets and plugins needed by its libraries directly. For more information on babel root-mode, see here: https://babeljs.io/docs/en/options#rootmode
Set this to `true` if you want `.babelrc` from libraries to be used in a monorepo. Note that setting this to `true` means the application's `.babelrc` will not apply to libraries, and it is recommended not to use this option as it may lead to inconsistency in the workspace. Instead, add babel presets/plugins required by libraries directly to the application's `.babelrc` file. See: https://babeljs.io/docs/en/options#rootmode
## Composing plugins using `composePlugins` utility (Nx 16 and later)
Since Nx 16, we provide a `composePlugins` utility function that helps users combine multiple Next.js plugins together.
```js
// next.config.js
const { composePlugins, withNx } = require('@nx/next');
/**
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
// Add Next.js configuration here
};
const plugins = [
// Add more Next.js plugins to this list if needed.
withNx,
];
module.exports = composePlugins(...plugins)(nextConfig);
```
If you want to add additional plugins, say [`@next/mdx`](https://www.npmjs.com/package/@next/mdx), you can add it to the plugins list.
```js
const plugins = [
// Add more Next.js plugins to this list if needed.
require('@next/mdx')(),
withNx,
];
module.exports = composePlugins(...plugins)(nextConfig);
```
This the exported configuration will correctly call each plugin in order and apply their configuration changes to the final object. Note that `composePlugins` function will return an async function, so if you need to debug the configuration you can add a debug plugin as follows.
```js
module.exports = composePlugins(...plugins, function debug(config) {
// The debug plugin will be called last
console.log({ config });
return config;
})(nextConfig);
```
## Manually composing plugins (Nx 15 and prior)
If you are not on Nx 16 and later versions, the `composePlugins` utility is not available. However, you can use the workaround below to use multiple plugins.
```js
// next.config.js
// ...
/**
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
const nextConfig = {
// ...
};
const plugins = [
// Your plugins exlcuding withNx
];
module.exports = async (phase, context) => {
let updatedConfig = plugins.reduce((acc, fn) => fn(acc), nextConfig);
// Apply the async function that `withNx` returns.
updatedConfig = await withNx(updatedConfig)(phase, context);
// If you have plugins that has to be added after Nx you can do that here.
// For example, Sentry needs to be added last.
updatedConfig = require('@sentry/nextjs')(updatedConfig, { silent: true });
return updatedConfig;
};
```

73
docs/generated/packages/node/executors/node.json
View File

@ -1,73 +0,0 @@
{
"name": "node",
"implementation": "/packages/node/src/executors/node/node.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"title": "Node executor",
"description": "Execute Nodejs applications.",
"type": "object",
"properties": {
"buildTarget": {
"type": "string",
"description": "The target to run to build you the app."
},
"buildTargetOptions": {
"type": "object",
"description": "Additional options to pass into the build target.",
"default": {}
},
"waitUntilTargets": {
"type": "array",
"description": "The targets to run before starting the node app.",
"default": [],
"items": { "type": "string" }
},
"host": {
"type": "string",
"default": "localhost",
"description": "The host to inspect the process on."
},
"port": {
"type": "number",
"default": 9229,
"description": "The port to inspect the process on. Setting port to 0 will assign random free ports to all forked processes."
},
"inspect": {
"oneOf": [
{ "type": "string", "enum": ["inspect", "inspect-brk"] },
{ "type": "boolean" }
],
"description": "Ensures the app is starting with debugging.",
"default": "inspect"
},
"runtimeArgs": {
"type": "array",
"description": "Extra args passed to the node process.",
"default": [],
"items": { "type": "string" }
},
"args": {
"type": "array",
"description": "Extra args when starting the app.",
"default": [],
"items": { "type": "string" }
},
"watch": {
"type": "boolean",
"description": "Enable re-building when files change.",
"default": true
}
},
"additionalProperties": false,
"required": ["buildTarget"],
"presets": []
},
"description": "Execute a Node application.",
"aliases": [],
"hidden": false,
"path": "/packages/node/src/executors/node/schema.json",
"type": "executor"
}

288
docs/generated/packages/node/executors/webpack.json
View File

@ -1,288 +0,0 @@
{
"name": "webpack",
"implementation": "/packages/node/src/executors/webpack/webpack.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"title": "Node Application Build Target",
"description": "Node application build target options for Build Facade.",
"cli": "nx",
"type": "object",
"properties": {
"main": {
"type": "string",
"description": "The name of the main entry-point file.",
"x-completion-type": "file",
"x-completion-glob": "main@(.js|.ts)"
},
"tsConfig": {
"type": "string",
"description": "The name of the Typescript configuration file.",
"x-completion-type": "file",
"x-completion-glob": "tsconfig.*.json"
},
"outputPath": {
"type": "string",
"description": "The output path of the generated files.",
"x-completion-type": "directory",
"x-priority": "important"
},
"deleteOutputPath": {
"type": "boolean",
"description": "Delete the output path before building.",
"default": true
},
"watch": {
"type": "boolean",
"description": "Run build when files change.",
"default": false
},
"watchOptions": {
"type": "object",
"description": "A set of options used to customize watch mode.",
"properties": {
"aggregateTimeout": { "type": "integer" },
"ignored": {
"oneOf": [
{ "type": "array", "items": { "type": "string" } },
{ "type": "string" }
]
},
"poll": { "type": "integer" },
"followSymlinks": { "type": "boolean" },
"stdin": { "type": "boolean" }
}
},
"poll": {
"type": "number",
"description": "Frequency of file watcher in ms."
},
"sourceMap": {
"type": "boolean",
"description": "Produce source maps.",
"default": true
},
"progress": {
"type": "boolean",
"description": "Log progress to the console while building.",
"default": false
},
"assets": {
"type": "array",
"description": "List of static application assets.",
"default": [],
"items": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply `glob`. Defaults to the project root."
},
"ignore": {
"description": "An array of globs to ignore.",
"type": "array",
"items": { "type": "string" }
},
"output": {
"type": "string",
"description": "Absolute path within the output."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{ "type": "string" }
]
}
},
"externalDependencies": {
"oneOf": [
{ "type": "string", "enum": ["none", "all"] },
{ "type": "array", "items": { "type": "string" } }
],
"description": "Dependencies to keep external to the bundle. (`all` (default), `none`, or an array of module names)",
"default": "all"
},
"statsJson": {
"type": "boolean",
"description": "Generates a `stats.json` file which can be analyzed using tools such as: `webpack-bundle-analyzer` or `<https://webpack.github.io/analyse>`.",
"default": false
},
"verbose": {
"type": "boolean",
"description": "Emits verbose output",
"default": false
},
"extractLicenses": {
"type": "boolean",
"description": "Extract all licenses in a separate file, in the case of production builds only.",
"default": false
},
"optimization": {
"type": "boolean",
"description": "Defines the optimization level of the build.",
"default": false
},
"maxWorkers": {
"type": "number",
"description": "Number of workers to use for type checking. (defaults to # of CPUS)"
},
"memoryLimit": {
"type": "number",
"description": "Memory limit for type checking service process in MB. (defaults to `2048`)",
"default": 2048
},
"fileReplacements": {
"description": "Replace files with other files in the build.",
"type": "array",
"items": {
"type": "object",
"properties": {
"replace": {
"type": "string",
"description": "The file to be replaced.",
"x-completion-type": "file"
},
"with": {
"type": "string",
"description": "The file to replace with.",
"x-completion-type": "file"
}
},
"additionalProperties": false,
"required": ["replace", "with"]
},
"default": []
},
"webpackConfig": {
"oneOf": [
{
"type": "array",
"items": {
"type": "string",
"x-completion-type": "file",
"x-completion-glob": "webpack?(*)@(.js|.ts)"
}
},
{
"type": "string",
"x-completion-type": "file",
"x-completion-glob": "webpack?(*)@(.js|.ts)"
}
],
"description": "Path to a function which takes a webpack config, context and returns the resulting webpack config. See https://nx.dev/guides/customize-webpack"
},
"buildLibsFromSource": {
"type": "boolean",
"description": "Read buildable libraries from source instead of building them separately.",
"default": true
},
"generatePackageJson": {
"type": "boolean",
"description": "Generates a `package.json` and pruned lock file with the project's `node_module` dependencies populated for installing in a container. If a `package.json` exists in the project's directory, it will be reused with dependencies populated.",
"default": false
},
"transformers": {
"type": "array",
"description": "List of TypeScript Compiler Transfomers Plugins.",
"default": [],
"aliases": ["tsPlugins"],
"items": {
"oneOf": [
{ "type": "string" },
{
"type": "object",
"properties": {
"name": { "type": "string" },
"options": { "type": "object", "additionalProperties": true }
},
"additionalProperties": false,
"required": ["name"]
}
]
}
},
"additionalEntryPoints": {
"type": "array",
"items": {
"type": "object",
"properties": {
"entryName": {
"type": "string",
"description": "Name of the additional entry file."
},
"entryPath": {
"type": "string",
"description": "Path to the additional entry file.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.js|.ts)"
}
}
}
},
"outputFileName": {
"type": "string",
"description": "Name of the main output file. (defaults to `main.js`)",
"default": "main.js"
}
},
"required": ["tsConfig", "main"],
"definitions": {
"assetPattern": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply `glob`. Defaults to the project root."
},
"ignore": {
"description": "An array of globs to ignore.",
"type": "array",
"items": { "type": "string" }
},
"output": {
"type": "string",
"description": "Absolute path within the output."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{ "type": "string" }
]
},
"transformerPattern": {
"oneOf": [
{ "type": "string" },
{
"type": "object",
"properties": {
"name": { "type": "string" },
"options": { "type": "object", "additionalProperties": true }
},
"additionalProperties": false,
"required": ["name"]
}
]
}
},
"presets": []
},
"description": "Build a Node application using Webpack.",
"aliases": [],
"hidden": false,
"path": "/packages/node/src/executors/webpack/schema.json",
"type": "executor"
}

83
docs/generated/packages/rollup/generators/rollup-project.json
View File

@ -1,83 +0,0 @@
{
"name": "rollup-project",
"factory": "./src/generators/rollup-project/rollup-project#rollupProjectGenerator",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxRollupProject",
"cli": "nx",
"title": "Add Rollup Configuration to a project",
"description": "Add Rollup Configuration to a project.",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"$default": { "$source": "argv", "index": 0 },
"x-dropdown": "project",
"x-prompt": "What is the name of the project to set up a rollup for?",
"x-priority": "important"
},
"compiler": {
"type": "string",
"enum": ["babel", "swc", "tsc"],
"description": "The compiler to use to build source.",
"default": "babel"
},
"main": {
"type": "string",
"description": "Path relative to the workspace root for the main entry file. Defaults to '<projectRoot>/src/main.ts'.",
"alias": "entryFile",
"x-priority": "important"
},
"tsConfig": {
"type": "string",
"description": "Path relative to the workspace root for the tsconfig file to build with. Defaults to '<projectRoot>/tsconfig.app.json'.",
"x-priority": "important"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`.",
"x-priority": "internal"
},
"skipValidation": {
"type": "boolean",
"default": false,
"description": "Do not perform any validation on existing project.",
"x-priority": "internal"
},
"importPath": {
"type": "string",
"description": "The library name used to import it, like `@myorg/my-awesome-lib`."
},
"external": {
"type": "array",
"description": "A list of external modules that will not be bundled (`react`, `react-dom`, etc.).",
"items": { "type": "string" }
},
"rollupConfig": {
"type": "string",
"description": "Path relative to workspace root to a custom rollup file that takes a config object and returns an updated config."
},
"buildTarget": {
"description": "The build target to add.",
"type": "string",
"default": "build"
}
},
"required": [],
"presets": []
},
"description": "Add rollup configuration to a project.",
"hidden": true,
"implementation": "/packages/rollup/src/generators/rollup-project/rollup-project#rollupProjectGenerator.ts",
"aliases": [],
"path": "/packages/rollup/src/generators/rollup-project/schema.json",
"type": "generator"
}

336
docs/generated/packages/vite/documents/set-up-vite-manually.md
View File

@ -1,336 +0,0 @@
---
title: Manually set up your project to use Vite.js
description: This guide explains how you can manually set up your project to use Vite.js in your Nx workspace.
---
# Manually set up your project to use Vite.js
{% callout type="note" title="Use our generator!" %}
It is recommended that you use the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator to do convert an existing project to use [Vite](https://vitejs.dev/).
{% /callout %}
You can use the `@nx/vite:dev-server`,`@nx/vite:build` and `@nx/vite:test` executors to serve, build and test your project using [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/). To do this, you need to make a few adjustments to your project. It is recommended that you use the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator to do this, but you can also do it manually.
A reason you may need to do this manually, is if our generator does not support conversion for your project, or if you want to experiment with custom options.
The list of steps below assumes that your project can be converted to use the `@nx/vite` executors. However, if it's not supported by the [`@nx/vite:configuration`](/packages/vite/generators/configuration) generator, it's likely that your project will not work as expected when converted. So, proceed with caution and always commit your code before making any changes.
## 1. Change the executors in your `project.json`
### The `serve` target
This applies to applications, not libraries.
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
//...
"my-app": {
"targets": {
//...
"serve": {
"executor": "@nx/vite:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "my-app:build",
},
"configurations": {
...
}
},
}
}
```
{% callout type="note" title="Other options" %}
Any extra options that you may need to add to your server's configuration can be added in your project's `vite.config.ts` file. You can find all the options that are supported in the [Vite.js documentation](https://vitejs.dev/config/). You can see which of these options you can add in your `project.json` in the [`@nx/vite:dev-server`](/packages/vite/executors/dev-server#options) documentation.
{% /callout %}
### The `build` target
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
//...
"my-app": {
"targets": {
//...
"build": {
"executor": "@nx/vite:build",
...
"options": {
"outputPath": "dist/apps/my-app"
},
"configurations": {
...
}
},
}
}
```
{% callout type="note" title="Other options" %}
You can specify more options in the `vite.config.ts` file (see **Step 2** below).
{% /callout %}
## 2. Configure Vite.js
### TypeScript paths
You need to use the [`vite-tsconfig-paths` plugin](https://www.npmjs.com/package/vite-tsconfig-paths) to make sure that your TypeScript paths are resolved correctly in your monorepo.
### React plugin
If you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).
### DTS plugin
If you are building a library, you need to use the [`vite-plugin-dts` plugin](https://www.npmjs.com/package/vite-plugin-dts) to generate the `.d.ts` files for your library.
#### Skip diagnostics
If you are building a library, you can set the `skipDiagnostics` option to `true` to speed up the build. This means that type diagnostic will be skipped during the build process. However, if there are some files with type errors which interrupt the build process, these files will not be emitted and `.d.ts` declaration files will not be generated.
If you choose to skip diagnostics, here is what your `'vite-plugin-dts'` plugin setup will look like:
```ts {% fileName="libs/my-lib/vite.config.ts" %}
...
import dts from 'vite-plugin-dts';
import { join } from 'path';
...
...
export default defineConfig({
plugins: [
...,
dts({
entryRoot: 'src',
tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
skipDiagnostics: true,
}),
```
#### Do not skip diagnostics
If you are building a library, and you want to make sure that all the files are type checked, you can set the `skipDiagnostics` option to `false` to make sure that all the files are type checked. This means that type diagnostic will be run during the build process.
If you choose to enable diagnostics, here is what your `'vite-plugin-dts'` plugin setup will look like:
```ts {% fileName="libs/my-lib/vite.config.ts" %}
...
import dts from 'vite-plugin-dts';
...
...
export default defineConfig({
plugins: [
...,
dts({
root: '../../',
entryRoot: 'libs/my-lib/src',
tsConfigFilePath: 'libs/my-lib/tsconfig.lib.json',
include: ['libs/my-lib/src/**/*.ts'],
outputDir: 'dist/libs/my-lib',
skipDiagnostics: false,
}),
```
You can read more about the configuration options in the [`vite-plugin-dts` plugin documentation](https://www.npmjs.com/package/vite-plugin-dts)).
### How your `vite.config.ts` looks like
#### For applications
Add a `vite.config.ts` file to the root of your project. If you are not using React, you can skip adding the `react` plugin, of course.
```ts {% fileName="apps/my-app/vite.config.ts" %}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [
react(),
ViteTsConfigPathsPlugin({
root: '../../',
}),
],
});
```
#### For libraries
If you are setting up a library (rather than an application) to use vite, your `vite.config.ts` file should look like this:
```ts {% fileName="libs/my-lib/vite.config.ts" %}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsConfigPaths from 'vite-tsconfig-paths';
import dts from 'vite-plugin-dts';
import { join } from 'path';
export default defineConfig({
plugins: [
dts({
entryRoot: 'src',
tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
skipDiagnostics: true,
}),
react(),
viteTsConfigPaths({
root: '../../',
}),
],
// Configuration for building your library.
// See: https://vitejs.dev/guide/build.html#library-mode
build: {
lib: {
// Could also be a dictionary or array of multiple entry points.
entry: 'src/index.ts',
name: 'pure-libs-rlv1',
fileName: 'index',
// Change this to the formats you want to support.
// Don't forget to update your package.json as well.
formats: ['es', 'cjs'],
},
rollupOptions: {
// External packages that should not be bundled into your library.
external: ['react', 'react-dom', 'react/jsx-runtime'],
},
},
});
```
{% callout type="note" title="The `root` path" %}
Make sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.
{% /callout %}
In that config file, you can configure Vite.js as you would normally do. For more information, see the [Vite.js documentation](https://vitejs.dev/config/).
## 3. Move `index.html` and point it to your app's entrypoint
This applies to applications, not libraries.
First of all, move your `index.html` file to the root of your app (e.g. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).
Then, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:
```html {% fileName="apps/my-app/index.html" %}
...
<body>
<div id="root"></div>
<script type="module" src="src/main.tsx"></script>
</body>
</html>
```
## 4. Add a `public` folder
You can add a `public` folder to the root of your project. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory).
```treeview
myorg/
├── apps/
│ ├── my-app/
│ │ ├── src/
│ │ │ ├── app/
│ │ │ ├── assets/
│ │ │ ├── ...
│ │ │ └── main.tsx
│ │ ├── index.html
│ │ ├── public/
| . | . | ├── favicon.ico
│ │ │ └── my-page.md
│ │ ├── project.json
│ │ ├── ...
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.json
│ │ └── tsconfig.spec.json
```
You can use the `public` folder to store static **assets**, such as images, fonts, and so on. You can also use it to store Markdown files, which you can then import in your app and use as a source of content.
## 5. Adjust your project's tsconfig.json
Change your app's `tsconfig.json` (e.g. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:
### For React apps
```json {% fileName="apps/my-app/tsconfig.json" %}
...
"compilerOptions": {
"jsx": "react-jsx",
"allowJs": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"moduleResolution": "Node",
"noEmit": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "ESNext",
"types": ["vite/client"],
"useDefineForClassFields": true
},
...
```
### For Web apps
```json {% fileName="apps/my-app/tsconfig.json" %}
...
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true,
"types": ["vite/client"]
},
"include": ["src"],
...
```
You can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).
## 6. Use Vite.js
Now you can finally serve and build your app using Vite.js:
### Serve the app
```bash
nx serve my-app
```
or
```bash
nx run my-app:serve
```
Now, visit [http://localhost:4200](http://localhost:4200) to see your app running!
### Build the app
```bash
nx build my-app
```
or
```bash
nx run my-app:build
```

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

File diff suppressed because one or more lines are too long

91
docs/generated/packages/web/executors/dev-server.json
View File

@ -1,91 +0,0 @@
{
"name": "dev-server",
"implementation": "/packages/web/src/executors/dev-server/dev-server.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"title": "Web Dev Server",
"description": "Serve a web application.",
"cli": "nx",
"type": "object",
"properties": {
"buildTarget": {
"type": "string",
"description": "Target which builds the application."
},
"port": {
"type": "number",
"description": "Port to listen on.",
"default": 4200
},
"host": {
"type": "string",
"description": "Host to listen on.",
"default": "localhost"
},
"ssl": {
"type": "boolean",
"description": "Serve using `HTTPS`.",
"default": false
},
"sslKey": {
"type": "string",
"description": "SSL key to use for serving `HTTPS`."
},
"sslCert": {
"type": "string",
"description": "SSL certificate to use for serving `HTTPS`."
},
"watch": {
"type": "boolean",
"description": "Watches for changes and rebuilds application.",
"default": true
},
"liveReload": {
"type": "boolean",
"description": "Whether to reload the page on change, using live-reload.",
"default": true
},
"hmr": {
"type": "boolean",
"description": "Enable hot module replacement.",
"default": false
},
"publicHost": {
"type": "string",
"description": "Public URL where the application will be served.",
"x-priority": "important"
},
"open": {
"type": "boolean",
"description": "Open the application in the browser.",
"default": false
},
"allowedHosts": {
"type": "string",
"description": "This option allows you to whitelist services that are allowed to access the dev server."
},
"memoryLimit": {
"type": "number",
"description": "Memory limit for type checking service process in `MB`."
},
"maxWorkers": {
"type": "number",
"description": "Number of workers to use for type checking."
},
"baseHref": {
"type": "string",
"description": "Base url for the application being built.",
"x-priority": "important"
}
},
"additionalProperties": false,
"required": ["buildTarget"],
"presets": []
},
"description": "Serve a web application.",
"aliases": [],
"hidden": false,
"path": "/packages/web/src/executors/dev-server/schema.json",
"type": "executor"
}

177
docs/generated/packages/web/executors/rollup.json
View File

@ -1,177 +0,0 @@
{
"name": "rollup",
"implementation": "/packages/web/src/executors/rollup/rollup.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"title": "Web Library Rollup Target (Experimental)",
"description": "Packages a library for different web usages (`UMD`, `ESM`, `CJS`).",
"cli": "nx",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The path to package.json file."
},
"entryFile": {
"type": "string",
"description": "The path to the entry file, relative to project.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.js|.ts)"
},
"outputPath": {
"type": "string",
"description": "The output path of the generated files.",
"x-completion-type": "directory"
},
"deleteOutputPath": {
"type": "boolean",
"description": "Delete the output path before building.",
"default": true
},
"tsConfig": {
"type": "string",
"description": "The path to tsconfig file.",
"x-completion-type": "file",
"x-completion-glob": "tsconfig.*.json"
},
"format": {
"type": "array",
"description": "Only build the specified comma-separated formats (`esm,umd,cjs`)",
"alias": "f",
"items": { "type": "string", "enum": ["esm", "umd", "cjs"] },
"default": ["esm"],
"x-priority": "important"
},
"external": {
"type": "array",
"description": "A list of external modules that will not be bundled (`react`, `react-dom`, etc.).",
"items": { "type": "string" }
},
"watch": {
"type": "boolean",
"description": "Enable re-building when files change.",
"default": false
},
"updateBuildableProjectDepsInPackageJson": {
"type": "boolean",
"description": "Update buildable project dependencies in `package.json`.",
"default": true
},
"buildableProjectDepsInPackageJsonType": {
"type": "string",
"description": "When `updateBuildableProjectDepsInPackageJson` is `true`, this adds dependencies to either `peerDependencies` or `dependencies`.",
"enum": ["dependencies", "peerDependencies"],
"default": "peerDependencies"
},
"rollupConfig": {
"oneOf": [
{
"type": "array",
"items": {
"type": "string",
"x-completion-type": "file",
"x-completion-glob": "rollup?(*)@(.js|.ts)"
}
},
{
"type": "string",
"x-completion-type": "file",
"x-completion-glob": "rollup?(*)@(.js|.ts)"
}
],
"description": "Path to a function which takes a rollup config and returns an updated rollup config.",
"x-priority": "important"
},
"extractCss": {
"type": ["boolean", "string"],
"description": "CSS files will be extracted to the output folder. Alternatively custom filename can be provided (e.g. styles.css)",
"default": true
},
"assets": {
"type": "array",
"description": "List of static assets.",
"default": [],
"items": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply `glob`. Defaults to the project root."
},
"output": {
"type": "string",
"description": "Relative path within the output folder."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{ "type": "string" }
]
}
},
"compiler": {
"type": "string",
"enum": ["babel", "swc"],
"default": "babel",
"description": "Which compiler to use.",
"x-priority": "important"
},
"javascriptEnabled": {
"type": "boolean",
"description": "Sets `javascriptEnabled` option for less loader",
"default": false
},
"generateExportsField": {
"type": "boolean",
"description": "Generate package.json with 'exports' field. This field defines entry points in the package and is used by Node and the TypeScript compiler.",
"default": false
},
"skipTypeField": {
"type": "boolean",
"description": "Prevents 'type' field from being added to compiled package.json file. Only use this if you are having an issue with this field.",
"default": false
}
},
"required": ["tsConfig", "entryFile", "outputPath"],
"definitions": {
"assetPattern": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply `glob`. Defaults to the project root."
},
"output": {
"type": "string",
"description": "Relative path within the output folder."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{ "type": "string" }
]
}
},
"presets": []
},
"description": "Package a library using Rollup.",
"aliases": [],
"hidden": false,
"path": "/packages/web/src/executors/rollup/schema.json",
"type": "executor"
}

508
docs/generated/packages/web/executors/webpack.json
View File

@ -1,508 +0,0 @@
{
"name": "webpack",
"implementation": "/packages/web/src/executors/webpack/webpack.impl.ts",
"schema": {
"version": 2,
"outputCapture": "direct-nodejs",
"title": "Webpack Executor",
"description": "Builds web applications using webpack.",
"cli": "nx",
"type": "object",
"properties": {
"crossOrigin": {
"type": "string",
"description": "The `crossorigin` attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials'."
},
"main": {
"type": "string",
"description": "The name of the main entry-point file.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.js|.ts|.tsx)"
},
"tsConfig": {
"type": "string",
"description": "The name of the Typescript configuration file.",
"x-completion-type": "file",
"x-completion-glob": "tsconfig.*.json"
},
"compiler": {
"type": "string",
"description": "The compiler to use.",
"enum": ["babel", "swc"],
"default": "babel",
"x-priority": "important"
},
"outputPath": {
"type": "string",
"description": "The output path of the generated files.",
"x-completion-type": "directory"
},
"deleteOutputPath": {
"type": "boolean",
"description": "Delete the output path before building.",
"default": true
},
"watch": {
"type": "boolean",
"description": "Enable re-building when files change.",
"default": false
},
"baseHref": {
"type": "string",
"description": "Base url for the application being built.",
"x-priority": "important"
},
"deployUrl": {
"type": "string",
"description": "URL where the application will be deployed.",
"x-priority": "important"
},
"vendorChunk": {
"type": "boolean",
"description": "Use a separate bundle containing only vendor libraries.",
"default": true
},
"commonChunk": {
"type": "boolean",
"description": "Use a separate bundle containing code used across multiple bundles.",
"default": true
},
"runtimeChunk": {
"type": "boolean",
"description": "Use a separate bundle containing the runtime.",
"default": true
},
"sourceMap": {
"description": "Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.",
"default": true,
"oneOf": [{ "type": "boolean" }, { "type": "string" }]
},
"progress": {
"type": "boolean",
"description": "Log progress to the console while building.",
"default": false
},
"assets": {
"type": "array",
"description": "List of static application assets.",
"default": [],
"items": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply 'glob'. Defaults to the project root."
},
"ignore": {
"description": "An array of globs to ignore.",
"type": "array",
"items": { "type": "string" }
},
"output": {
"type": "string",
"description": "Absolute path within the output."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{ "type": "string" }
]
}
},
"index": {
"type": "string",
"description": "HTML File which will be contain the application.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.html|.htm)"
},
"scripts": {
"type": "array",
"description": "External Scripts which will be included before the main application entry.",
"items": {
"oneOf": [
{
"type": "object",
"properties": {
"input": {
"type": "string",
"description": "The file to include.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
},
"bundleName": {
"type": "string",
"description": "The bundle name for this extra entry point."
},
"inject": {
"type": "boolean",
"description": "If the bundle will be referenced in the HTML file.",
"default": true
}
},
"additionalProperties": false,
"required": ["input"]
},
{
"type": "string",
"description": "The file to include.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
}
]
},
"default": []
},
"styles": {
"type": "array",
"description": "External Styles which will be included with the application",
"items": {
"oneOf": [
{
"type": "object",
"properties": {
"input": {
"type": "string",
"description": "The file to include.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
},
"bundleName": {
"type": "string",
"description": "The bundle name for this extra entry point."
},
"inject": {
"type": "boolean",
"description": "If the bundle will be referenced in the HTML file.",
"default": true
}
},
"additionalProperties": false,
"required": ["input"]
},
{
"type": "string",
"description": "The file to include.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
}
]
},
"default": []
},
"budgets": {
"description": "Budget thresholds to ensure parts of your application stay within boundaries which you set.",
"type": "array",
"items": {
"type": "object",
"properties": {
"type": {
"type": "string",
"description": "The type of budget.",
"enum": [
"all",
"allScript",
"any",
"anyScript",
"bundle",
"initial"
]
},
"name": {
"type": "string",
"description": "The name of the bundle."
},
"baseline": {
"type": "string",
"description": "The baseline size for comparison."
},
"maximumWarning": {
"type": "string",
"description": "The maximum threshold for warning relative to the baseline."
},
"maximumError": {
"type": "string",
"description": "The maximum threshold for error relative to the baseline."
},
"minimumWarning": {
"type": "string",
"description": "The minimum threshold for warning relative to the baseline."
},
"minimumError": {
"type": "string",
"description": "The minimum threshold for error relative to the baseline."
},
"warning": {
"type": "string",
"description": "The threshold for warning relative to the baseline (min & max)."
},
"error": {
"type": "string",
"description": "The threshold for error relative to the baseline (min & max)."
}
},
"additionalProperties": false,
"required": ["type"]
},
"default": []
},
"namedChunks": {
"type": "boolean",
"description": "Names the produced bundles according to their entry file.",
"default": true
},
"outputHashing": {
"type": "string",
"description": "Define the output filename cache-busting hashing mode.",
"default": "none",
"enum": ["none", "all", "media", "bundles"]
},
"stylePreprocessorOptions": {
"description": "Options to pass to style preprocessors.",
"type": "object",
"properties": {
"includePaths": {
"description": "Paths to include. Paths will be resolved to project root.",
"type": "array",
"items": { "type": "string" },
"default": []
}
},
"additionalProperties": false
},
"optimization": {
"description": "Enables optimization of the build output.",
"oneOf": [
{
"type": "object",
"properties": {
"scripts": {
"type": "boolean",
"description": "Enables optimization of the scripts output.",
"default": true
},
"styles": {
"type": "boolean",
"description": "Enables optimization of the styles output.",
"default": true
}
},
"additionalProperties": false
},
{ "type": "boolean" }
]
},
"extractCss": {
"type": "boolean",
"description": "Extract CSS into a `.css` file.",
"default": true
},
"subresourceIntegrity": {
"type": "boolean",
"description": "Enables the use of subresource integrity validation.",
"default": false
},
"polyfills": {
"type": "string",
"description": "Polyfills to load before application",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.js|.ts|.tsx)"
},
"verbose": {
"type": "boolean",
"description": "Emits verbose output",
"default": false
},
"statsJson": {
"type": "boolean",
"description": "Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`.",
"default": false
},
"extractLicenses": {
"type": "boolean",
"description": "Extract all licenses in a separate file, in the case of production builds only.",
"default": false
},
"memoryLimit": {
"type": "number",
"description": "Memory limit for type checking service process in `MB`.",
"default": 2048
},
"maxWorkers": {
"type": "number",
"description": "Number of workers to use for type checking.",
"default": 2
},
"fileReplacements": {
"description": "Replace files with other files in the build.",
"type": "array",
"items": {
"type": "object",
"properties": {
"replace": {
"type": "string",
"description": "The file to be replaced.",
"x-completion-type": "file"
},
"with": {
"type": "string",
"description": "The file to replace with.",
"x-completion-type": "file"
}
},
"additionalProperties": false,
"required": ["replace", "with"]
},
"default": []
},
"buildLibsFromSource": {
"type": "boolean",
"description": "Read buildable libraries from source instead of building them separately.",
"default": true
},
"generateIndexHtml": {
"type": "boolean",
"description": "Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`.",
"default": true
},
"postcssConfig": {
"type": "string",
"description": "Set a path to PostCSS config that applies to the app and all libs. Defaults to `undefined`, which auto-detects postcss.config.js files in each `app`/`lib` directory."
},
"webpackConfig": {
"type": "string",
"description": "Path to a function which takes a webpack config, some context and returns the resulting webpack config. See https://nx.dev/guides/customize-webpack",
"x-completion-type": "file",
"x-completion-glob": "webpack?(*)@(.js|.ts)",
"x-priority": "important"
}
},
"required": ["tsConfig", "main", "index"],
"definitions": {
"assetPattern": {
"oneOf": [
{
"type": "object",
"properties": {
"glob": {
"type": "string",
"description": "The pattern to match."
},
"input": {
"type": "string",
"description": "The input directory path in which to apply 'glob'. Defaults to the project root."
},
"ignore": {
"description": "An array of globs to ignore.",
"type": "array",
"items": { "type": "string" }
},
"output": {
"type": "string",
"description": "Absolute path within the output."
}
},
"additionalProperties": false,
"required": ["glob", "input", "output"]
},
{ "type": "string" }
]
},
"budget": {
"type": "object",
"properties": {
"type": {
"type": "string",
"description": "The type of budget.",
"enum": [
"all",
"allScript",
"any",
"anyScript",
"bundle",
"initial"
]
},
"name": {
"type": "string",
"description": "The name of the bundle."
},
"baseline": {
"type": "string",
"description": "The baseline size for comparison."
},
"maximumWarning": {
"type": "string",
"description": "The maximum threshold for warning relative to the baseline."
},
"maximumError": {
"type": "string",
"description": "The maximum threshold for error relative to the baseline."
},
"minimumWarning": {
"type": "string",
"description": "The minimum threshold for warning relative to the baseline."
},
"minimumError": {
"type": "string",
"description": "The minimum threshold for error relative to the baseline."
},
"warning": {
"type": "string",
"description": "The threshold for warning relative to the baseline (min & max)."
},
"error": {
"type": "string",
"description": "The threshold for error relative to the baseline (min & max)."
}
},
"additionalProperties": false,
"required": ["type"]
},
"extraEntryPoint": {
"oneOf": [
{
"type": "object",
"properties": {
"input": {
"type": "string",
"description": "The file to include.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
},
"bundleName": {
"type": "string",
"description": "The bundle name for this extra entry point."
},
"inject": {
"type": "boolean",
"description": "If the bundle will be referenced in the HTML file.",
"default": true
}
},
"additionalProperties": false,
"required": ["input"]
},
{
"type": "string",
"description": "The file to include.",
"x-completion-type": "file",
"x-completion-glob": "**/*@(.css|.scss|.less|.sass|.styl|.stylus)"
}
]
}
},
"presets": []
},
"description": "Build an application using Webpack.",
"aliases": [],
"hidden": false,
"path": "/packages/web/src/executors/webpack/schema.json",
"type": "executor"
}

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

@ -7,7 +7,7 @@ The Nx plugin for [webpack](https://webpack.js.org/).
[Webpack](https://webpack.js.org/) is a static module bundler for modern JavaScript applications. The `@nx/webpack` plugin provides executors that allow you to build and serve your projects using webpack, plus an executor for SSR. [Webpack](https://webpack.js.org/) is a static module bundler for modern JavaScript applications. The `@nx/webpack` plugin provides executors that allow you to build and serve your projects using webpack, plus an executor for SSR.
Nx now allows you to [customize your webpack configuration](/packages/webpack/documents/webpack-config-setup) for your projects. And we also offer [a number of webpack plugins](/packages/webpack/documents/webpack-plugins) for supporting Nx and other frameworks. Nx now allows you to [customize your webpack configuration](/recipes/webpack/webpack-config-setup) for your projects. And we also offer [a number of webpack plugins](/recipes/webpack/webpack-plugins) for supporting Nx and other frameworks.
## Setting up a new Nx workspace with Webpack ## Setting up a new Nx workspace with Webpack

206
docs/generated/packages/webpack/documents/webpack-config-setup.md
View File

@ -1,206 +0,0 @@
---
title: How to configure webpack on your Nx workspace
description: A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration
---
# Configure webpack on your Nx workspace
You can configure Webpack using a `webpack.config.js` file in your project. You can set the path to this file in your `project.json` file, in the `build` target options:
```json
//...
"my-app": {
"targets": {
//...
"build": {
"executor": "@nx/webpack:webpack",
//...
"options": {
//...
"webpackConfig": "apps/my-app/webpack.config.js"
},
"configurations": {
...
}
},
}
}
```
In that file, you can add the necessary configuration for Webpack. You can read more on how to configure webpack in the [Webpack documentation](https://webpack.js.org/concepts/configuration/).
## Using webpack with `isolatedConfig`
Setting `isolatedConfig` to `true` in your `project.json` file means that Nx will not apply the Nx webpack plugins automatically. In that case, the Nx plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.). So don't forget to also specify the path to your webpack config file (using the `webpackConfig` option).
Note that this is the new default setup for webpack in the latest version of Nx.
Set `isolatedConfig` to `true` in your `project.json` file in the `build` target options like this:
```json
//...
"my-app": {
"targets": {
//...
"build": {
"executor": "@nx/webpack:webpack",
//...
"options": {
//...
"webpackConfig": "apps/my-app/webpack.config.js",
"isolatedConfig": true
},
"configurations": {
...
}
},
}
}
```
Now, you need to manually add the Nx webpack plugins in your `webpack.config.js` file for Nx to work properly. Let's see how to do that.
### Basic configuration for Nx
You should start with a basic webpack configuration for Nx in your project, that looks like this:
```js {% fileName="apps/my-app/webpack.config.js" %}
const { composePlugins, withNx } = require('@nx/webpack');
module.exports = composePlugins(withNx(), (config, { options, context }) => {
// customize webpack config here
return config;
});
```
The `withNx()` plugin adds the necessary configuration for Nx to work with Webpack. The `composePlugins` function allows you to add other plugins to the configuration.
#### The `composePlugins` function
The `composePlugins` function takes a list of plugins and a function, and returns a webpack `Configuration` object. The `composePlugins` function is an enhanced version of the [webpack configuration function](https://webpack.js.org/configuration/configuration-types/#exporting-a-function), which allows you to add plugins to the configuration, and provides you with a function which accepts two arguments:
1. `config`: The webpack configuration object.
2. An object with the following properties:
- `options`: The options passed to the `@nx/webpack:webpack` executor.
- `context`: The context passed of the `@nx/webpack:webpack` executor.
This gives you the ability to customize the webpack configuration as needed, and make use of the options and context passed to the executor, as well.
### Add configurations for other functionalities
In addition to the basic configuration, you can add configurations for other frameworks or features. The `@nx/webpack` package provides plugins such as `withWeb` and `withReact`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins).
You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project.
## Customize your Webpack config
For most apps, the default configuration of webpack is sufficient, but sometimes you need to tweak a setting in your webpack config. This guide explains how to make a small change without taking on the maintenance burden of the entire webpack config.
### Configure webpack for React projects
React projects use the `@nx/react` package to build their apps. This package provides a `withReact` plugin that adds the necessary configuration for React to work with webpack. You can use this plugin to add the necessary configuration to your webpack config.
```js {% fileName="apps/my-app/webpack.config.js" %}
const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
// Nx plugins for webpack.
module.exports = composePlugins(
withNx(),
withReact(),
(config, { options, context }) => {
// Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin())
return config;
}
);
```
### Add a CSS loader to your webpack config
To add the `css-loader` to your config, install it and add the rule.
{% tabs %}
{% tab label="yarn" %}
```shell
yarn add -D css-loader
```
{% /tab %}
{% tab label="npm" %}
```shell
npm install -D css-loader
```
{% /tab %}
{% /tabs %}
```js {% fileName="apps/my-app/webpack.config.js" %}
const { composePlugins, withNx } = require('@nx/webpack');
const { merge } = require('webpack-merge');
module.exports = composePlugins(withNx(), (config, { options, context }) => {
return merge(config, {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
});
});
```
### Configure webpack for Module Federation
If you use the [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support from `@nx/angular` or `@nx/react` then
you can customize your webpack configuration as follows.
```js {% fileName="apps/my-app/webpack.config.js" %}
const { composePlugins, withNx } = require('@nx/webpack');
const { merge } = require('webpack-merge');
const withModuleFederation = require('@nx/react/module-federation');
// or `const withModuleFederation = require('@nx/angular/module-federation');`
module.exports = composePlugins(
withNx(),
async (config, { options, context }) => {
const federatedModules = await withModuleFederation({
// your options here
});
return merge(federatedModules(config, { options, context }), {
// overwrite values here
});
}
);
```
Reference the [webpack documentation](https://webpack.js.org/configuration/) for details on the structure of the webpack
config object.
### Configure webpack for Next.js Applications
Next.js supports webpack customization in the `next.config.js` file.
```js {% fileName="next.config.js" %}
const { withNx } = require('@nx/next/plugins/with-nx');
const nextConfig = {
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
// Important: return the modified config
return config;
},
};
return withNx(nextConfig);
```
Read the [official documentation](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) for more details.

311
docs/generated/packages/webpack/documents/webpack-plugins.md
View File

@ -1,311 +0,0 @@
---
title: Webpack plugins
description: A guide for webpack plugins that are provided by Nx.
---
# Webpack plugins
Nx uses enhanced webpack configuration files (e.g. `webpack.config.js`). These configuration files export a _plugin_ that takes in a webpack
[configuration](https://webpack.js.org/configuration/) object and returns an updated configuration object. Plugins are used by Nx to add
functionality to the webpack build.
This guide contains information on the plugins provided by Nx. For more information on customizing webpack configuration, refer to the
[Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup).
## withNx
The `withNx` plugin provides common configuration for the build, including TypeScript support and linking workspace libraries (via tsconfig paths).
### Options
#### skipTypeChecking
Type: `boolean`
Disable type checks (useful to speed up builds).
### Example
```js
const { composePlugins, withNx } = require('@nx/webpack');
module.exports = composePlugins(withNx(), (config) => {
// Further customize webpack config
return config;
});
```
## withWeb
The `withWeb` plugin adds support for CSS/SASS/Less stylesheets, assets (such as images and fonts), and `index.html` processing.
### Options
#### baseHref
Type: `string`
Base URL for the application being built.
#### crossOrigin
Type: `'none' | 'anonymous' | 'use-credentials'`
"The `crossorigin` attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials'."
#### deployUrl
Type: `string`
URL where the application will be deployed.
#### extractCss
Type: `boolean`
Extract CSS into a `.css` file.
#### generateIndexHtml
Type: `boolean`
Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`.
#### index
Type: `string`
HTML File which will be contain the application.
#### postcssConfig
Type: `string`
Set a path (relative to workspace root) to a PostCSS config that applies to the app and all libs. Defaults to `undefined`, which auto-detects postcss.config.js files in each `app`.
#### scripts
Type: `string[]`
Paths to scripts (relative to workspace root) which will be included before the main application entry.
#### stylePreprocessorOptions
Type: `{ includePaths: string[] }`
Options to pass to style preprocessors. `includePaths` is a list of paths that are included (e.g. workspace libs with stylesheets).
#### styles
Type: `string[]`
Paths to stylesheets (relative to workspace root) which will be included with the application.
#### subresourceIntegrity
Type: `boolean`
Enables the use of subresource integrity validation.
### Example
```js
const { composePlugins, withNx, withWeb } = require('@nx/webpack');
module.exports = composePlugins(
// always pass withNx() first
withNx(),
// add web functionality
withWeb({
styles: ['my-app/src/styles.css'],
}),
(config) => {
// Further customize webpack config
return config;
}
);
```
## withReact
The `withReact` plugin adds support for React JSX, [SVGR](https://react-svgr.com/), and [Fast Refresh](https://github.com/pmmmwh/react-refresh-webpack-plugin)
### Options
The options are the same as [`withWeb`](#withweb) plus the following.
#### svgr
Type: `undefined|false`
SVGR allows SVG files to be imported as React components. Set this to `false` to disable this behavior.
### Example
```js
const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
module.exports = composePlugins(
withNx(), // always pass withNx() first
withReact({
styles: ['my-app/src/styles.css'],
svgr: true,
postcssConfig: 'my-app/postcss',
}),
(config) => {
// Further customize webpack config
return config;
}
);
```
## withModuleFederation and withModuleFederationForSSR
The `withModuleFederation` and `withModuleFederationForSSR` plugins add module federation support to the webpack build. These plugins use
[`ModuleFederationPlugin`](https://webpack.js.org/concepts/module-federation/) and provide a simpler API through Nx.
For more information, refer to the [Module Federation recipe](/concepts/more-concepts/faster-builds-with-module-federation).
### Options
Both `withModuleFederation` and `withModuleFederationForSSR` share the same options. The `withModuleFederation` plugin is for the browser, and the `withModuleFederationForSSR` plugin is used on the server-side (Node).
#### name
Type: `string`
The name of the host/remote application.
#### remotes
Type: `Aray<string[] | [remoteName: string, remoteUrl: string]>`
For _host_ to specify all _remote_ applications. If a string is used, Nx will match it with a matching remote in the workspace.
Use `[<name>, <url>]` to specify the exact URL of the remote, rather than what's in the remote's `project.json` file.
#### library
Type: `{ type: string; name: string }`
#### exposes
Type: `Record<string, string>`
Entry points that are exposed from a _remote_ application.
e.g.
```js
exposes: {
'./Module': '<app-root>/src/remote-entry.ts',
},
```
#### shared
Type: `Function`
Takes a library name and the current [share configuration](https://webpack.js.org/plugins/module-federation-plugin/#sharing-hints), and returns one of
- `false` - Exclude this library from shared.
- `undefined` - Keep Nx sharing defaults.
- `SharedLibraryConfig` - Override Nx sharing defaults with [custom configuration](https://webpack.js.org/plugins/module-federation-plugin/#sharing-hints).
#### additionalShared
Type: `Array<string |{ libraryName: string; sharedConfig: SharedLibraryConfig }>`
Shared libraries in addition to the ones that Nx detects automatically. Items match [`ModuleFederationPlugin`'s sharing configuration](https://webpack.js.org/plugins/module-federation-plugin/#sharing-hints).
{% tabs %}
{% tab label="React Module Federation" %}
```js
const { composePlugins, withNx } = require('@nx/webpack');
const { withReact, withModuleFederation } = require('@nx/react');
// Host config
// e.g. { remotes: ['about', 'dashboard'] }
const moduleFederationConfig = require('./module-federation.config');
module.exports = composePlugins(
withNx(),
withReact(),
withModuleFederation(moduleFederationConfig),
(config) => {
// Further customize webpack config
return config;
}
);
```
{% /tab %}
{% tab label="Angular Module Federation" %}
```js
const {
composePlugins,
withModuleFederation,
} = require('@nx/angular/module-federation');
// Host config
// e.g. { remotes: ['about', 'dashboard'] }
const moduleFederationConfig = require('./module-federation.config');
module.exports = composePlugins(
withModuleFederation(moduleFederationConfig),
(config) => {
// Further customize webpack config
return config;
}
);
```
{% /tab %}
{% tab label="React Module Federation for SSR " %}
```js
const { composePlugins, withNx } = require('@nx/webpack');
const { withReact, withModuleFederatioForSSRn } = require('@nx/react');
// Host config
// e.g. { remotes: ['about', 'dashboard'] }
const moduleFederationConfig = require('./module-federation.config');
module.exports = composePlugins(
withNx(),
withReact(),
withModuleFederationForSSR(moduleFederationConfig),
(config) => {
// Further customize webpack config
return config;
}
);
```
{% /tab %}
{% tab label="Angular Module Federation for SSR" %}
```js
const {
composePlugins,
withModuleFederationForSSR,
} = require('@nx/angular/module-federation');
// Host config
// e.g. { remotes: ['about', 'dashboard'] }
const moduleFederationConfig = require('./module-federation.config');
module.exports = composePlugins(
withModuleFederationForSSR(moduleFederationConfig),
(config) => {
// Further customize webpack config
return config;
}
);
```
{% /tab %}
{% /tabs %}

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

File diff suppressed because one or more lines are too long

85
docs/generated/packages/webpack/generators/webpack-project.json
View File

@ -1,85 +0,0 @@
{
"name": "webpack-project",
"factory": "./src/generators/webpack-project/webpack-project#webpackProjectGenerator",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxWebpackProject",
"cli": "nx",
"title": "Add Webpack Configuration to a project",
"description": "Add Webpack Configuration to a project.",
"type": "object",
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"$default": { "$source": "argv", "index": 0 },
"x-dropdown": "project",
"x-prompt": "What is the name of the project to set up a webpack for?",
"x-priority": "important"
},
"compiler": {
"type": "string",
"enum": ["babel", "swc", "tsc"],
"description": "The compiler to use to build source.",
"default": "swc"
},
"main": {
"type": "string",
"description": "Path relative to the workspace root for the main entry file. Defaults to '<projectRoot>/src/main.ts'.",
"x-priority": "important"
},
"tsConfig": {
"type": "string",
"description": "Path relative to the workspace root for the tsconfig file to build with. Defaults to '<projectRoot>/tsconfig.app.json'.",
"x-priority": "important"
},
"target": {
"type": "string",
"description": "Target platform for the build, same as the Webpack config option.",
"enum": ["node", "web", "webworker"],
"default": "web"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`.",
"x-priority": "internal"
},
"skipValidation": {
"type": "boolean",
"default": false,
"description": "Do not perform any validation on existing project.",
"x-priority": "internal"
},
"devServer": {
"type": "boolean",
"description": "Add a serve target to run a local webpack dev-server",
"default": false
},
"webpackConfig": {
"type": "string",
"description": "Path relative to workspace root to a custom webpack file that takes a config object and returns an updated config.",
"x-priority": "internal"
},
"babelConfig": {
"type": "string",
"description": "Optionally specify a path relative to workspace root to the babel configuration file of your project.",
"x-completion-type": "file"
}
},
"required": [],
"presets": []
},
"description": "Add webpack configuration to a project.",
"hidden": true,
"implementation": "/packages/webpack/src/generators/webpack-project/webpack-project#webpackProjectGenerator.ts",
"aliases": [],
"path": "/packages/webpack/src/generators/webpack-project/schema.json",
"type": "generator"
}

98
docs/map.json
View File

@ -797,6 +797,70 @@
} }
] ]
}, },
{
"name": "Cypress",
"id": "cypress",
"description": "Cypress related recipes",
"itemList": [
{
"id": "cypress-component-testing",
"name": "Component Testing",
"description": "Component Testing",
"file": "shared/packages/cypress/cypress-component-testing"
},
{
"id": "cypress-v11-migration",
"name": "Cypress v11 Migration Guide",
"description": "Cypress v11 Migration Guide",
"file": "shared/packages/cypress/cypress-v11-migration"
}
]
},
{
"name": "Next",
"id": "next",
"description": "Next related recipes",
"itemList": [
{
"id": "next-config-setup",
"name": "How to configure Next.js plugins",
"description": "How to configure Next.js plugins",
"file": "shared/packages/next/next-config-setup"
}
]
},
{
"name": "Vite",
"id": "vite",
"description": "Vite related recipes",
"itemList": [
{
"id": "set-up-vite-manually",
"name": "Manually set up your project to use Vite.js",
"description": "Manually set up your project to use Vite.js",
"file": "shared/packages/vite/set-up-vite-manually"
}
]
},
{
"name": "Webpack",
"id": "webpack",
"description": "Webpack related recipes",
"itemList": [
{
"id": "webpack-config-setup",
"name": "How to configure webpack on your Nx workspace",
"description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
"file": "shared/packages/webpack/webpack-config-setup"
},
{
"id": "webpack-plugins",
"name": "Webpack plugins",
"description": "Webpack plugins",
"file": "shared/packages/webpack/webpack-plugins"
}
]
},
{ {
"name": "Enforce Module Boundaries", "name": "Enforce Module Boundaries",
"id": "enforce-module-boundaries", "id": "enforce-module-boundaries",
@ -1959,12 +2023,6 @@
"name": "Overview of the Nx Vite Plugin", "name": "Overview of the Nx Vite Plugin",
"description": "The Nx Plugin for Vite contains executors and generators that support building applications using Vite. This page also explains how to configure Vite on your Nx workspace.", "description": "The Nx Plugin for Vite contains executors and generators that support building applications using Vite. This page also explains how to configure Vite on your Nx workspace.",
"file": "shared/packages/vite/vite-plugin" "file": "shared/packages/vite/vite-plugin"
},
{
"id": "set-up-vite-manually",
"name": "Manually set up your project to use Vite.js",
"description": "This guide explains how you can manually set up your project to use Vite.js in your Nx workspace.",
"file": "shared/packages/vite/set-up-vite-manually"
} }
] ]
}, },
@ -1979,18 +2037,6 @@
"name": "Overview of the Nx Webpack Plugin", "name": "Overview of the Nx Webpack Plugin",
"description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.", "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
"file": "shared/packages/webpack/plugin-overview" "file": "shared/packages/webpack/plugin-overview"
},
{
"id": "webpack-config-setup",
"name": "How to configure webpack on your Nx workspace",
"description": "A guide on how to configure webpack on your Nx workspace, and instructions on how to customize your webpack configuration",
"file": "shared/packages/webpack/webpack-config-setup"
},
{
"id": "webpack-plugins",
"name": "Webpack plugins",
"description": "Webpack plugins",
"file": "shared/packages/webpack/webpack-plugins"
} }
] ]
}, },
@ -2049,16 +2095,6 @@
"id": "overview", "id": "overview",
"path": "/packages/cypress", "path": "/packages/cypress",
"file": "shared/packages/cypress/cypress-plugin" "file": "shared/packages/cypress/cypress-plugin"
},
{
"name": "Component Testing",
"id": "cypress-component-testing",
"file": "shared/packages/cypress/cypress-component-testing"
},
{
"name": "v11 Migration Guide",
"id": "v11-migration-guide",
"file": "shared/packages/cypress/cypress-v11-migration"
} }
] ]
}, },
@ -2188,12 +2224,6 @@
"name": "Overview", "name": "Overview",
"path": "/packages/next", "path": "/packages/next",
"file": "shared/packages/next/plugin-overview" "file": "shared/packages/next/plugin-overview"
},
{
"id": "next-config-setup",
"name": "How to configure Next.js plugins",
"description": "A guide for configuring Next.js plugins with Nx",
"file": "shared/packages/next/next-config-setup"
} }
] ]
}, },

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

@ -1,7 +1,7 @@
# Cypress Component Testing # Cypress Component Testing
> Component testing requires Cypress v10 and above. > Component testing requires Cypress v10 and above.
> See our [guide for more information](/packages/cypress/documents/v11-migration-guide) to migrate to Cypress v10. > See our [guide for more information](/recipes/cypress/cypress-v11-migration) to migrate to Cypress v10.
Unlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added Unlike [E2E testing](/packages/cypress), component testing does not create a new project. Instead, Cypress component testing is added
directly to a project, like [Jest](/packages/jest) directly to a project, like [Jest](/packages/jest)

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

@ -9,7 +9,7 @@ Cypress is a test runner built for the modern web. It has a lot of great feature
## Setting Up Cypress ## Setting Up Cypress
> Info about [Cypress Component Testing can be found here](/packages/cypress/documents/cypress-component-testing) > Info about [Cypress Component Testing can be found here](/recipes/cypress/cypress-component-testing)
> >
> Info about [using Cypress and Storybook can be found here](/recipes/storybook/overview-react#cypress-tests-for-storiesbook) > Info about [using Cypress and Storybook can be found here](/recipes/storybook/overview-react#cypress-tests-for-storiesbook)

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

@ -7,7 +7,7 @@ The Nx plugin for [webpack](https://webpack.js.org/).
[Webpack](https://webpack.js.org/) is a static module bundler for modern JavaScript applications. The `@nx/webpack` plugin provides executors that allow you to build and serve your projects using webpack, plus an executor for SSR. [Webpack](https://webpack.js.org/) is a static module bundler for modern JavaScript applications. The `@nx/webpack` plugin provides executors that allow you to build and serve your projects using webpack, plus an executor for SSR.
Nx now allows you to [customize your webpack configuration](/packages/webpack/documents/webpack-config-setup) for your projects. And we also offer [a number of webpack plugins](/packages/webpack/documents/webpack-plugins) for supporting Nx and other frameworks. Nx now allows you to [customize your webpack configuration](/recipes/webpack/webpack-config-setup) for your projects. And we also offer [a number of webpack plugins](/recipes/webpack/webpack-plugins) for supporting Nx and other frameworks.
## Setting up a new Nx workspace with Webpack ## Setting up a new Nx workspace with Webpack

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

@ -88,7 +88,7 @@ This gives you the ability to customize the webpack configuration as needed, and
### Add configurations for other functionalities ### Add configurations for other functionalities
In addition to the basic configuration, you can add configurations for other frameworks or features. The `@nx/webpack` package provides plugins such as `withWeb` and `withReact`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins). In addition to the basic configuration, you can add configurations for other frameworks or features. The `@nx/webpack` package provides plugins such as `withWeb` and `withReact`. This plugins provide features such as TS support, CSS support, JSX support, etc. You can read more about how these plugins work and how to use them in our [Webpack Plugins guide](/recipes/webpack/webpack-plugins).
You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project. You may still reconfigure everything manually, without using the Nx plugins. However, these plugins ensure that you have the necessary configuration for Nx to work with your project.

2
docs/shared/packages/webpack/webpack-plugins.md
View File

@ -10,7 +10,7 @@ Nx uses enhanced webpack configuration files (e.g. `webpack.config.js`). These c
functionality to the webpack build. functionality to the webpack build.
This guide contains information on the plugins provided by Nx. For more information on customizing webpack configuration, refer to the This guide contains information on the plugins provided by Nx. For more information on customizing webpack configuration, refer to the
[Nx Webpack configuration guide](/packages/webpack/documents/webpack-config-setup). [Nx Webpack configuration guide](/recipes/webpack/webpack-config-setup).
## withNx ## withNx

16
docs/shared/reference/sitemap.md
View File

@ -135,6 +135,16 @@
- [Setting up Storybook Composition with Nx](/recipes/storybook/storybook-composition-setup) - [Setting up Storybook Composition with Nx](/recipes/storybook/storybook-composition-setup)
- [Angular: Set up Compodoc for Storybook on Nx](/recipes/storybook/angular-storybook-compodoc) - [Angular: Set up Compodoc for Storybook on Nx](/recipes/storybook/angular-storybook-compodoc)
- [Angular: Configuring styles and preprocessor options](/recipes/storybook/angular-configuring-styles) - [Angular: Configuring styles and preprocessor options](/recipes/storybook/angular-configuring-styles)
- [Cypress](/recipes/cypress)
- [Component Testing](/recipes/cypress/cypress-component-testing)
- [Cypress v11 Migration Guide](/recipes/cypress/cypress-v11-migration)
- [Next](/recipes/next)
- [How to configure Next.js plugins](/recipes/next/next-config-setup)
- [Vite](/recipes/vite)
- [Manually set up your project to use Vite.js](/recipes/vite/set-up-vite-manually)
- [Webpack](/recipes/webpack)
- [How to configure webpack on your Nx workspace](/recipes/webpack/webpack-config-setup)
- [Webpack plugins](/recipes/webpack/webpack-plugins)
- [Enforce Module Boundaries](/recipes/enforce-module-boundaries) - [Enforce Module Boundaries](/recipes/enforce-module-boundaries)
- [Ban Dependencies with Certain Tags](/recipes/enforce-module-boundaries/ban-dependencies-with-tags) - [Ban Dependencies with Certain Tags](/recipes/enforce-module-boundaries/ban-dependencies-with-tags)
- [Tag in Multiple Dimensions](/recipes/enforce-module-boundaries/tag-multiple-dimensions) - [Tag in Multiple Dimensions](/recipes/enforce-module-boundaries/tag-multiple-dimensions)
@ -337,8 +347,6 @@
- [cypress](/packages/cypress) - [cypress](/packages/cypress)
- [documents](/packages/cypress/documents) - [documents](/packages/cypress/documents)
- [Overview](/packages/cypress/documents/overview) - [Overview](/packages/cypress/documents/overview)
- [Component Testing](/packages/cypress/documents/cypress-component-testing)
- [v11 Migration Guide](/packages/cypress/documents/v11-migration-guide)
- [executors](/packages/cypress/executors) - [executors](/packages/cypress/executors)
- [cypress](/packages/cypress/executors/cypress) - [cypress](/packages/cypress/executors/cypress)
- [generators](/packages/cypress/generators) - [generators](/packages/cypress/generators)
@ -457,7 +465,6 @@
- [next](/packages/next) - [next](/packages/next)
- [documents](/packages/next/documents) - [documents](/packages/next/documents)
- [Overview](/packages/next/documents/overview) - [Overview](/packages/next/documents/overview)
- [How to configure Next.js plugins](/packages/next/documents/next-config-setup)
- [executors](/packages/next/executors) - [executors](/packages/next/executors)
- [build](/packages/next/executors/build) - [build](/packages/next/executors/build)
- [server](/packages/next/executors/server) - [server](/packages/next/executors/server)
@ -599,7 +606,6 @@
- [vite](/packages/vite) - [vite](/packages/vite)
- [documents](/packages/vite/documents) - [documents](/packages/vite/documents)
- [Overview of the Nx Vite Plugin](/packages/vite/documents/overview) - [Overview of the Nx Vite Plugin](/packages/vite/documents/overview)
- [Manually set up your project to use Vite.js](/packages/vite/documents/set-up-vite-manually)
- [executors](/packages/vite/executors) - [executors](/packages/vite/executors)
- [dev-server](/packages/vite/executors/dev-server) - [dev-server](/packages/vite/executors/dev-server)
- [build](/packages/vite/executors/build) - [build](/packages/vite/executors/build)
@ -621,8 +627,6 @@
- [webpack](/packages/webpack) - [webpack](/packages/webpack)
- [documents](/packages/webpack/documents) - [documents](/packages/webpack/documents)
- [Overview of the Nx Webpack Plugin](/packages/webpack/documents/overview) - [Overview of the Nx Webpack Plugin](/packages/webpack/documents/overview)
- [How to configure webpack on your Nx workspace](/packages/webpack/documents/webpack-config-setup)
- [Webpack plugins](/packages/webpack/documents/webpack-plugins)
- [executors](/packages/webpack/executors) - [executors](/packages/webpack/executors)
- [webpack](/packages/webpack/executors/webpack) - [webpack](/packages/webpack/executors/webpack)
- [dev-server](/packages/webpack/executors/dev-server) - [dev-server](/packages/webpack/executors/dev-server)

18
nx-dev/nx-dev/redirect-rules.js
View File

@ -272,8 +272,7 @@ const diataxis = {
'/concepts/more-concepts/monorepo-nx-enterprise', '/concepts/more-concepts/monorepo-nx-enterprise',
'/guides/performance-profiling': '/recipes/other/performance-profiling', '/guides/performance-profiling': '/recipes/other/performance-profiling',
'/guides/eslint': '/recipes/other/eslint', '/guides/eslint': '/recipes/other/eslint',
'/guides/customize-webpack': '/guides/customize-webpack': '/recipes/webpack/webpack-config-setup',
'/packages/webpack/documents/webpack-config-setup',
'/guides/nx-daemon': '/concepts/more-concepts/nx-daemon', '/guides/nx-daemon': '/concepts/more-concepts/nx-daemon',
'/guides/js-and-ts': '/recipes/other/js-and-ts', '/guides/js-and-ts': '/recipes/other/js-and-ts',
'/guides/browser-support': '/recipes/other/browser-support', '/guides/browser-support': '/recipes/other/browser-support',
@ -300,8 +299,7 @@ const diataxis = {
'/examples/caching': '/recipes/other/caching', '/examples/caching': '/recipes/other/caching',
'/examples/dte': '/recipes/other/dte', '/examples/dte': '/recipes/other/dte',
'/recipe/workspace-generators': '/recipes/generators/local-generators', '/recipe/workspace-generators': '/recipes/generators/local-generators',
'/recipes/other/customize-webpack': '/recipes/other/customize-webpack': '/recipes/webpack/webpack-config-setup',
'/packages/webpack/documents/webpack-config-setup',
}; };
/** /**
@ -378,6 +376,18 @@ const recipesUrls = {
'/recipes/other/advanced-update': '/recipes/other/advanced-update':
'/recipes/managing-repository/advanced-update', '/recipes/managing-repository/advanced-update',
'/recipes/other/js-and-ts': '/recipes/managing-repository/js-and-ts', '/recipes/other/js-and-ts': '/recipes/managing-repository/js-and-ts',
'/packages/cypress/documents/cypress-component-testing':
'/recipes/cypress/cypress-component-testing',
'/packages/cypress/documents/cypress-v11-migration':
'/recipes/cypress/cypress-v11-migration',
'/packages/next/documents/next-config-setup':
'/recipes/next/next-config-setup',
'/packages/vite/documents/set-up-vite-manually':
'/recipes/vite/set-up-vite-manually',
'/packages/webpack/documents/webpack-plugins':
'/recipes/webpack/webpack-plugins',
'/packages/webpack/documents/webpack-config-setup':
'/recipes/webpack/webpack-config-setup',
}; };
/** /**

8
packages/react/src/migrations/update-15-6-3/__snapshots__/webpack-config-setup.spec.ts.snap
View File

@ -12,7 +12,7 @@ module.exports = composePlugins(
// Update the webpack config as needed here. // Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin()) // e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return config; return config;
} }
); );
@ -31,7 +31,7 @@ module.exports = composePlugins(
// Update the webpack config as needed here. // Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin()) // e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return config; return config;
} }
); );
@ -50,7 +50,7 @@ module.exports = composePlugins(
// Update the webpack config as needed here. // Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin()) // e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return config; return config;
} }
); );
@ -69,7 +69,7 @@ module.exports = composePlugins(
// Note: This was added by an Nx migration. // Note: This was added by an Nx migration.
// You should consider inlining the logic into this file. // You should consider inlining the logic into this file.
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return require('./webpack.something.old.ts')(config, context); return require('./webpack.something.old.ts')(config, context);
} }
); );

6
packages/react/src/migrations/update-15-6-3/webpack-config-setup.ts
View File

@ -73,7 +73,7 @@ export default async function (tree: Tree) {
// Note: This was added by an Nx migration. // Note: This was added by an Nx migration.
// You should consider inlining the logic into this file. // You should consider inlining the logic into this file.
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return require('./${justTheFileName}')(config, context); return require('./${justTheFileName}')(config, context);
}); });
` `
@ -93,7 +93,7 @@ export default async function (tree: Tree) {
You should consider inlining the logic from ${oldName} into ${options['webpackConfig']}. You should consider inlining the logic from ${oldName} into ${options['webpackConfig']}.
You can read our guide on how to do this here: You can read our guide on how to do this here:
https://nx.dev/packages/webpack/documents/webpack-config-setup https://nx.dev/recipes/webpack/webpack-config-setup
` `
); );
} else { } else {
@ -122,7 +122,7 @@ export default async function (tree: Tree) {
// Update the webpack config as needed here. // Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin()) // e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return config; return config;
}); });
` `

2
packages/vite/docs/configuration-examples.md
View File

@ -74,7 +74,7 @@ The list of executors for building, testing and serving that can be converted to
We **cannot** guarantee that projects using unsupported executors - _or any executor that is NOT listed in the list of "supported executors"_ - for either building, testing or serving will work correctly when converted to use the `@nx/vite` executors. We **cannot** guarantee that projects using unsupported executors - _or any executor that is NOT listed in the list of "supported executors"_ - for either building, testing or serving will work correctly when converted to use the `@nx/vite` executors.
If you have a project that does _not_ use one of the supported executors you can try to [configure it to use the `@nx/vite` executors manually](/packages/vite/documents/set-up-vite-manually), but it may not work properly. If you have a project that does _not_ use one of the supported executors you can try to [configure it to use the `@nx/vite` executors manually](/recipes/vite/set-up-vite-manually), but it may not work properly.
You can read more in the [Vite package overview page](/packages/vite). You can read more in the [Vite package overview page](/packages/vite).

2
packages/webpack/docs/webpack-build-executor-examples.md
View File

@ -124,7 +124,7 @@ Note that this option does not work if `babelUpwardRootMode` is set to `true`.
Setting `isolatedConfig` to `true` in your `project.json` file means that Nx will not apply the Nx webpack plugins automatically. In that case, the Nx plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.). So don't forget to also specify the path to your webpack config file (using the `webpackConfig` option). Setting `isolatedConfig` to `true` in your `project.json` file means that Nx will not apply the Nx webpack plugins automatically. In that case, the Nx plugins need to be applied in the project's `webpack.config.js` file (e.g. `withNx`, `withReact`, etc.). So don't forget to also specify the path to your webpack config file (using the `webpackConfig` option).
Read more on how to configure Webpack in our [Nx Webpack config guide](/packages/webpack/documents/webpack-config-setup) an in our [Webpack Plugins guide](/packages/webpack/documents/webpack-plugins). Read more on how to configure Webpack in our [Nx Webpack config guide](/recipes/webpack/webpack-config-setup) an in our [Webpack Plugins guide](/recipes/webpack/webpack-plugins).
Note that this is the new default setup for webpack in the latest version of Nx. Note that this is the new default setup for webpack in the latest version of Nx.

8
packages/webpack/src/migrations/update-15-6-3/__snapshots__/webpack-config-setup.spec.ts.snap
View File

@ -8,7 +8,7 @@ module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here. // Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin()) // e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return config; return config;
}); });
" "
@ -22,7 +22,7 @@ module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here. // Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin()) // e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return config; return config;
}); });
" "
@ -36,7 +36,7 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
// Note: This was added by an Nx migration. // Note: This was added by an Nx migration.
// You should consider inlining the logic into this file. // You should consider inlining the logic into this file.
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return require('./webpack.config.old.js')(config, context); return require('./webpack.config.old.js')(config, context);
}); });
" "
@ -50,7 +50,7 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
// Note: This was added by an Nx migration. // Note: This was added by an Nx migration.
// You should consider inlining the logic into this file. // You should consider inlining the logic into this file.
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return require('./webpack.something.old.ts')(config, context); return require('./webpack.something.old.ts')(config, context);
}); });
" "

6
packages/webpack/src/migrations/update-15-6-3/webpack-config-setup.ts
View File

@ -72,7 +72,7 @@ export default async function (tree: Tree) {
// Note: This was added by an Nx migration. // Note: This was added by an Nx migration.
// You should consider inlining the logic into this file. // You should consider inlining the logic into this file.
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return require('./${justTheFileName}')(config, context); return require('./${justTheFileName}')(config, context);
}); });
` `
@ -92,7 +92,7 @@ export default async function (tree: Tree) {
You should consider inlining the logic from ${oldName} into ${options.webpackConfig}. You should consider inlining the logic from ${oldName} into ${options.webpackConfig}.
You can read our guide on how to do this here: You can read our guide on how to do this here:
https://nx.dev/packages/webpack/documents/webpack-config-setup https://nx.dev/recipes/webpack/webpack-config-setup
` `
); );
} else { } else {
@ -118,7 +118,7 @@ export default async function (tree: Tree) {
// Update the webpack config as needed here. // Update the webpack config as needed here.
// e.g. config.plugins.push(new MyPlugin()) // e.g. config.plugins.push(new MyPlugin())
// For more information on webpack config and Nx see: // For more information on webpack config and Nx see:
// https://nx.dev/packages/webpack/documents/webpack-config-setup // https://nx.dev/recipes/webpack/webpack-config-setup
return config; return config;
}); });
` `

3
scripts/documentation/generators/main.ts
View File

@ -14,13 +14,14 @@ async function generate() {
try { try {
console.log(`${chalk.blue('i')} Generating Documentation`); console.log(`${chalk.blue('i')} Generating Documentation`);
const generatedOutputDirectory = join(workspaceRoot, 'docs', 'generated');
removeSync(generatedOutputDirectory);
const commandsOutputDirectory = join( const commandsOutputDirectory = join(
workspaceRoot, workspaceRoot,
'docs', 'docs',
'generated', 'generated',
'cli' 'cli'
); );
removeSync(commandsOutputDirectory);
await generateCnwDocumentation(commandsOutputDirectory); await generateCnwDocumentation(commandsOutputDirectory);
await generateCliDocumentation(commandsOutputDirectory); await generateCliDocumentation(commandsOutputDirectory);