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

feat(nx-dev): restructure recipes

Browse Source
This commit is contained in:
Miroslav Jonas 2023-07-20 16:37:34 +02:00 committed by Juri Strumpflohner
parent f8068b7cf6
commit 42a06b67d2
54 changed files with 3732 additions and 4322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

@ -26,7 +26,7 @@
"file": "shared/recipes/root-level-scripts",
"id": "root-level-scripts",
"name": "Run Root-Level NPM Scripts with Nx",
"path": "/recipes/managing-repository/root-level-scripts"
"path": "/recipes/tips-n-tricks/root-level-scripts"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
@ -119,7 +119,7 @@
"file": "shared/recipes/troubleshoot-cache-misses",
"id": "troubleshoot-cache-misses",
"name": "Troubleshoot Cache Misses",
"path": "/recipes/other/troubleshoot-cache-misses"
"path": "/recipes/troubleshooting/troubleshoot-cache-misses"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
@ -160,26 +160,19 @@
"name": "How the Project Graph is Built",
"path": "/concepts/more-concepts/how-project-graph-is-built"
},
{
"description": "",
"file": "shared/recipes/analyze-source-files",
"id": "analyze-source-files",
"name": "Disable Graph Links Created from Analyzing Source Files",
"path": "/recipes/managing-repository/analyze-source-files"
},
{
"description": "",
"file": "shared/recipes/export-project-graph",
"id": "export-project-graph",
"name": "Export Project Graph",
"path": "/recipes/other/export-project-graph"
},
{
"description": "",
"file": "shared/recipes/resolve-circular-dependencies",
"id": "resolve-circular-dependencies",
"name": "Resolve Circular Dependencies",
"path": "/recipes/other/resolve-circular-dependencies"
"path": "/recipes/troubleshooting/resolve-circular-dependencies"
},
{
"description": "",
"file": "shared/recipes/analyze-source-files",
"id": "analyze-source-files",
"name": "Disable Graph Links Created from Analyzing Source Files",
"path": "/recipes/tips-n-tricks/analyze-source-files"
},
{
"description": "",
@ -252,42 +245,42 @@
"description": "",
"file": "shared/recipes/console-telemetry",
"id": "console-telemetry",
"name": "Nx Console Telemetry",
"name": "Telemetry",
"path": "/recipes/nx-console/console-telemetry"
},
{
"description": "",
"file": "shared/recipes/console-generate-command",
"id": "console-generate-command",
"name": "Nx Console Generate Command",
"name": "Generate Command",
"path": "/recipes/nx-console/console-generate-command"
},
{
"description": "",
"file": "shared/recipes/console-run-command",
"id": "console-run-command",
"name": "Nx Console Run Command",
"name": "Run Command",
"path": "/recipes/nx-console/console-run-command"
},
{
"description": "",
"file": "shared/recipes/console-add-dependency-command",
"id": "console-add-dependency-command",
"name": "Nx Console Add Dependency Command",
"name": "Add Dependency Command",
"path": "/recipes/nx-console/console-add-dependency-command"
},
{
"description": "",
"file": "shared/recipes/console-project-pane",
"id": "console-project-pane",
"name": "Nx Console Project Pane",
"name": "Project Pane",
"path": "/recipes/nx-console/console-project-pane"
},
{
"description": "",
"file": "shared/recipes/console-shortcuts",
"id": "console-shortcuts",
"name": "Nx Console Keyboard Shortcuts",
"name": "Keyboard Shortcuts",
"path": "/recipes/nx-console/console-shortcuts"
}
],
@ -303,8 +296,8 @@
"description": "",
"file": "shared/recipes/advanced-update",
"id": "advanced-update",
"name": "Advanced Update Process",
"path": "/recipes/managing-repository/advanced-update"
"name": "Altering Migration Process",
"path": "/recipes/tips-n-tricks/advanced-update"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
@ -399,13 +392,6 @@
"name": "Tags Allow List",
"path": "/recipes/enforce-module-boundaries/tags-allow-list"
},
{
"description": "",
"file": "shared/eslint",
"id": "eslint",
"name": "Using ESLint in Nx Workspaces",
"path": "/recipes/other/eslint"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
"file": "generated/packages/generated/packages/nx/documents/format-check",
@ -457,47 +443,40 @@
"name": "Project Configuration",
"path": "/reference/project-configuration"
},
{
"description": "",
"file": "shared/recipes/use-executor-configurations",
"id": "use-executor-configurations",
"name": "Use Executor Configurations",
"path": "/recipes/executors/use-executor-configurations"
},
{
"description": "",
"file": "shared/running-custom-commands",
"id": "run-commands-executor",
"name": "Running Custom Commands",
"path": "/recipes/executors/run-commands-executor"
},
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds",
"name": "Faster Builds with Module Federation",
"path": "/recipes/module-federation/faster-builds"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular and React",
"path": "/recipes/module-federation/module-federation-with-ssr"
"name": "Setup Module Federation with SSR for Angular",
"path": "/recipes/angular/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/module-federation/dynamic-module-federation-with-angular"
"path": "/recipes/angular/dynamic-module-federation-with-angular"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for React",
"path": "/recipes/react/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/performance-profiling",
"id": "performance-profiling",
"name": "Profiling Build Performance",
"path": "/recipes/other/performance-profiling"
"path": "/recipes/troubleshooting/performance-profiling"
},
{
"description": "",
"file": "shared/running-custom-commands",
"id": "run-commands-executor",
"name": "Running Custom Commands",
"path": "/recipes/tips-n-tricks/run-commands-executor"
},
{
"description": "",
@ -629,7 +608,7 @@
"file": "shared/recipes/repo-types/standalone-to-integrated",
"id": "standalone-to-integrated",
"name": "Convert from a Standalone Repository to an Integrated Repository",
"path": "/recipes/managing-repository/standalone-to-integrated"
"path": "/recipes/tips-n-tricks/standalone-to-integrated"
}
],
"create-your-own-plugin": [
@ -679,31 +658,197 @@
},
{
"description": "",
"file": "shared/guides/define-environment-variables",
"id": "define-environment-variables",
"name": "Define Environment Variables",
"path": "/recipes/environment-variables/define-environment-variables"
"file": "shared/guides/use-environment-variables-in-angular",
"id": "use-environment-variables-in-angular",
"name": "Use Environment Variables in Angular",
"path": "/recipes/angular/use-environment-variables-in-angular"
},
{
"description": "",
"file": "shared/guides/use-environment-variables-in-react",
"id": "use-environment-variables-in-react",
"name": "Use Environment Variables in React",
"path": "/recipes/environment-variables/use-environment-variables-in-react"
},
{
"description": "",
"file": "shared/guides/use-environment-variables-in-angular",
"id": "use-environment-variables-in-angular",
"name": "Use Environment Variables in Angular",
"path": "/recipes/environment-variables/use-environment-variables-in-angular"
"path": "/recipes/react/use-environment-variables-in-react"
},
{
"description": "",
"file": "shared/guides/performance-profiling",
"id": "performance-profiling",
"name": "Profiling Build Performance",
"path": "/recipes/other/performance-profiling"
"path": "/recipes/troubleshooting/performance-profiling"
},
{
"description": "",
"file": "shared/guides/define-environment-variables",
"id": "define-environment-variables",
"name": "Define Environment Variables",
"path": "/recipes/tips-n-tricks/define-environment-variables"
}
],
"module-federation": [
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular",
"path": "/recipes/angular/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/angular/dynamic-module-federation-with-angular"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for React",
"path": "/recipes/react/module-federation-with-ssr"
}
],
"angular": [
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular",
"path": "/recipes/angular/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/angular/dynamic-module-federation-with-angular"
}
],
"react": [
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for React",
"path": "/recipes/react/module-federation-with-ssr"
}
],
"deployment": [
{
"description": "",
"file": "shared/recipes/deployment/node-server-fly-io",
"id": "node-server-fly-io",
"name": "Deploying a Node App to Fly.io",
"path": "/recipes/node/node-server-fly-io"
},
{
"description": "",
"file": "shared/recipes/deployment/node-serverless-functions-netlify",
"id": "node-serverless-functions-netlify",
"name": "Add and Deploy Netlify Edge Functions with Node",
"path": "/recipes/node/node-serverless-functions-netlify"
},
{
"description": "",
"file": "shared/recipes/deployment/node-aws-lambda",
"id": "node-aws-lambda",
"name": "Deploying AWS lambda in Node.js",
"path": "/recipes/node/node-aws-lambda"
},
{
"description": "",
"file": "shared/recipes/deployment/deno-deploy",
"id": "deno-deploy",
"name": "Serverless deployment with Deno Deploy",
"path": "/recipes/other/deno-deploy"
},
{
"description": "",
"file": "shared/recipes/deployment/deno-netlify-edge-functions",
"id": "deno-netlify-functions",
"name": "Add and Deploy Netlify Edge Functions with Deno",
"path": "/recipes/other/deno-netlify-functions"
}
],
"node": [
{
"description": "",
"file": "shared/recipes/deployment/node-server-fly-io",
"id": "node-server-fly-io",
"name": "Deploying a Node App to Fly.io",
"path": "/recipes/node/node-server-fly-io"
},
{
"description": "",
"file": "shared/recipes/deployment/node-serverless-functions-netlify",
"id": "node-serverless-functions-netlify",
"name": "Add and Deploy Netlify Edge Functions with Node",
"path": "/recipes/node/node-serverless-functions-netlify"
},
{
"description": "",
"file": "shared/recipes/deployment/node-aws-lambda",
"id": "node-aws-lambda",
"name": "Deploying AWS lambda in Node.js",
"path": "/recipes/node/node-aws-lambda"
},
{
"description": "",
"file": "shared/recipes/database/nestjs-prisma",
"id": "nestjs-prisma",
"name": "Using Prisma with NestJS",
"path": "/recipes/example-repos/nestjs-prisma"
},
{
"description": "",
"file": "shared/recipes/database/mongo-fastify",
"id": "mongo-fastify",
"name": "Using Mongo with Fastify",
"path": "/recipes/example-repos/mongo-fastify"
},
{
"description": "",
"file": "shared/recipes/database/redis-fastify",
"id": "redis-fastify",
"name": "Using Redis with Fastify",
"path": "/recipes/example-repos/redis-fastify"
},
{
"description": "",
"file": "shared/recipes/database/postgres-fastify",
"id": "postgres-fastify",
"name": "Using Postgres with Fastify",
"path": "/recipes/example-repos/postgres-fastify"
},
{
"description": "",
"file": "shared/recipes/database/serverless-fastify-planetscale",
"id": "serverless-fastify-planetscale",
"name": "Using PlanetScale with Serverless Fastify",
"path": "/recipes/example-repos/serverless-fastify-planetscale"
}
],
"storybook": [
{
"description": "",
"file": "shared/recipes/one-storybook-for-all",
"id": "one-storybook-for-all",
"name": "One main Storybook instance for all projects",
"path": "/recipes/storybook/one-storybook-for-all"
},
{
"description": "",
"file": "shared/recipes/one-storybook-per-scope",
"id": "one-storybook-per-scope",
"name": "One Storybook instance per scope",
"path": "/recipes/storybook/one-storybook-per-scope"
},
{
"description": "",
"file": "shared/recipes/one-storybook-with-composition",
"id": "one-storybook-with-composition",
"name": "One main Storybook instance using Storybook Composition",
"path": "/recipes/storybook/one-storybook-with-composition"
}
],
"docker": [
@ -724,255 +869,13 @@
"path": "/recipes/ci/ci-deployment"
}
],
"module-federation": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds",
"name": "Faster Builds with Module Federation",
"path": "/recipes/module-federation/faster-builds"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular and React",
"path": "/recipes/module-federation/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/module-federation/dynamic-module-federation-with-angular"
}
],
"angular": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds",
"name": "Faster Builds with Module Federation",
"path": "/recipes/module-federation/faster-builds"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular and React",
"path": "/recipes/module-federation/module-federation-with-ssr"
},
{
"description": "",
"file": "shared/guides/module-federation/dynamic-mfe-angular",
"id": "dynamic-module-federation-with-angular",
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
"path": "/recipes/module-federation/dynamic-module-federation-with-angular"
}
],
"react": [
{
"description": "",
"file": "shared/guides/module-federation/faster-builds",
"id": "faster-builds",
"name": "Faster Builds with Module Federation",
"path": "/recipes/module-federation/faster-builds"
},
{
"description": "",
"file": "shared/recipes/module-federation-with-ssr",
"id": "module-federation-with-ssr",
"name": "Setup Module Federation with SSR for Angular and React",
"path": "/recipes/module-federation/module-federation-with-ssr"
}
],
"storybook": [
{
"description": "",
"file": "shared/recipes/one-storybook-for-all",
"id": "one-storybook-for-all",
"name": "Publishing Storybook: One main Storybook instance for all projects",
"path": "/recipes/storybook/one-storybook-for-all"
},
{
"description": "",
"file": "shared/recipes/one-storybook-per-scope",
"id": "one-storybook-per-scope",
"name": "Publishing Storybook: One Storybook instance per scope",
"path": "/recipes/storybook/one-storybook-per-scope"
},
{
"description": "",
"file": "shared/recipes/one-storybook-with-composition",
"id": "one-storybook-with-composition",
"name": "Publishing Storybook: One main Storybook instance using Storybook Composition",
"path": "/recipes/storybook/one-storybook-with-composition"
}
],
"deployment": [
{
"description": "",
"file": "shared/recipes/deployment/node-server-fly-io",
"id": "node-server-fly-io",
"name": "Deploying a Node App to Fly.io",
"path": "/recipes/deployment/node-server-fly-io"
},
{
"description": "",
"file": "shared/recipes/deployment/node-serverless-functions-netlify",
"id": "node-serverless-functions-netlify",
"name": "Add and Deploy Netlify Edge Functions with Node",
"path": "/recipes/deployment/node-serverless-functions-netlify"
},
{
"description": "",
"file": "shared/recipes/deployment/node-aws-lambda",
"id": "node-aws-lambda",
"name": "Deploying AWS lambda in Node.js",
"path": "/recipes/deployment/node-aws-lambda"
},
{
"description": "",
"file": "shared/recipes/deployment/deno-deploy",
"id": "deno-deploy",
"name": "Serverless deployment with Deno Deploy",
"path": "/recipes/deployment/deno-deploy"
},
{
"description": "",
"file": "shared/recipes/deployment/deno-netlify-edge-functions",
"id": "deno-netlify-functions",
"name": "Add and Deploy Netlify Edge Functions with Deno",
"path": "/recipes/deployment/deno-netlify-functions"
}
],
"node": [
{
"description": "",
"file": "shared/recipes/deployment/node-server-fly-io",
"id": "node-server-fly-io",
"name": "Deploying a Node App to Fly.io",
"path": "/recipes/deployment/node-server-fly-io"
},
{
"description": "",
"file": "shared/recipes/deployment/node-serverless-functions-netlify",
"id": "node-serverless-functions-netlify",
"name": "Add and Deploy Netlify Edge Functions with Node",
"path": "/recipes/deployment/node-serverless-functions-netlify"
},
{
"description": "",
"file": "shared/recipes/deployment/node-aws-lambda",
"id": "node-aws-lambda",
"name": "Deploying AWS lambda in Node.js",
"path": "/recipes/deployment/node-aws-lambda"
},
{
"description": "",
"file": "shared/recipes/database/nestjs-prisma",
"id": "nestjs-prisma",
"name": "Using Prisma with NestJS",
"path": "/recipes/database/nestjs-prisma"
},
{
"description": "",
"file": "shared/recipes/database/mongo-fastify",
"id": "mongo-fastify",
"name": "Using Mongo with Fastify",
"path": "/recipes/database/mongo-fastify"
},
{
"description": "",
"file": "shared/recipes/database/redis-fastify",
"id": "redis-fastify",
"name": "Using Redis with Fastify",
"path": "/recipes/database/redis-fastify"
},
{
"description": "",
"file": "shared/recipes/database/postgres-fastify",
"id": "postgres-fastify",
"name": "Using Postgres with Fastify",
"path": "/recipes/database/postgres-fastify"
},
{
"description": "",
"file": "shared/recipes/database/serverless-fastify-planetscale",
"id": "serverless-fastify-planetscale",
"name": "Using PlanetScale with Serverless Fastify",
"path": "/recipes/database/serverless-fastify-planetscale"
}
],
"deno": [
{
"description": "",
"file": "shared/recipes/deployment/deno-deploy",
"id": "deno-deploy",
"name": "Serverless deployment with Deno Deploy",
"path": "/recipes/deployment/deno-deploy"
},
{
"description": "",
"file": "shared/recipes/deployment/deno-netlify-edge-functions",
"id": "deno-netlify-functions",
"name": "Add and Deploy Netlify Edge Functions with Deno",
"path": "/recipes/deployment/deno-netlify-functions"
}
],
"database": [
{
"description": "",
"file": "shared/recipes/database/nestjs-prisma",
"id": "nestjs-prisma",
"name": "Using Prisma with NestJS",
"path": "/recipes/database/nestjs-prisma"
},
{
"description": "",
"file": "shared/recipes/database/mongo-fastify",
"id": "mongo-fastify",
"name": "Using Mongo with Fastify",
"path": "/recipes/database/mongo-fastify"
},
{
"description": "",
"file": "shared/recipes/database/redis-fastify",
"id": "redis-fastify",
"name": "Using Redis with Fastify",
"path": "/recipes/database/redis-fastify"
},
{
"description": "",
"file": "shared/recipes/database/postgres-fastify",
"id": "postgres-fastify",
"name": "Using Postgres with Fastify",
"path": "/recipes/database/postgres-fastify"
},
{
"description": "",
"file": "shared/recipes/database/serverless-fastify-planetscale",
"id": "serverless-fastify-planetscale",
"name": "Using PlanetScale with Serverless Fastify",
"path": "/recipes/database/serverless-fastify-planetscale"
}
],
"serverless": [
{
"description": "",
"file": "shared/recipes/database/serverless-fastify-planetscale",
"id": "serverless-fastify-planetscale",
"name": "Using PlanetScale with Serverless Fastify",
"path": "/recipes/database/serverless-fastify-planetscale"
}
],
"workspace-watching": [
{
"description": "",
"file": "shared/recipes/workspace-watching",
"id": "workspace-watching",
"name": "Workspace Watching",
"path": "/recipes/managing-repository/workspace-watching"
"path": "/recipes/tips-n-tricks/workspace-watching"
},
{
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
@ -981,5 +884,67 @@
"name": "watch",
"path": "/packages/nx/documents/watch"
}
],
"deno": [
{
"description": "",
"file": "shared/recipes/deployment/deno-deploy",
"id": "deno-deploy",
"name": "Serverless deployment with Deno Deploy",
"path": "/recipes/other/deno-deploy"
},
{
"description": "",
"file": "shared/recipes/deployment/deno-netlify-edge-functions",
"id": "deno-netlify-functions",
"name": "Add and Deploy Netlify Edge Functions with Deno",
"path": "/recipes/other/deno-netlify-functions"
}
],
"database": [
{
"description": "",
"file": "shared/recipes/database/nestjs-prisma",
"id": "nestjs-prisma",
"name": "Using Prisma with NestJS",
"path": "/recipes/example-repos/nestjs-prisma"
},
{
"description": "",
"file": "shared/recipes/database/mongo-fastify",
"id": "mongo-fastify",
"name": "Using Mongo with Fastify",
"path": "/recipes/example-repos/mongo-fastify"
},
{
"description": "",
"file": "shared/recipes/database/redis-fastify",
"id": "redis-fastify",
"name": "Using Redis with Fastify",
"path": "/recipes/example-repos/redis-fastify"
},
{
"description": "",
"file": "shared/recipes/database/postgres-fastify",
"id": "postgres-fastify",
"name": "Using Postgres with Fastify",
"path": "/recipes/example-repos/postgres-fastify"
},
{
"description": "",
"file": "shared/recipes/database/serverless-fastify-planetscale",
"id": "serverless-fastify-planetscale",
"name": "Using PlanetScale with Serverless Fastify",
"path": "/recipes/example-repos/serverless-fastify-planetscale"
}
],
"serverless": [
{
"description": "",
"file": "shared/recipes/database/serverless-fastify-planetscale",
"id": "serverless-fastify-planetscale",
"name": "Using PlanetScale with Serverless Fastify",
"path": "/recipes/example-repos/serverless-fastify-planetscale"
}
]
}

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

@ -12,7 +12,7 @@ within an Nx workspace. It provides:
{% callout type="note" title="Currently using the Angular CLI?" %}
You can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn
more [here](/recipes/adopting-nx/migration-angular).
more [here](/recipes/angular/migration/angular).
{% /callout %}
## Setting up the Angular plugin
@ -92,9 +92,7 @@ nx g @nx/angular:service my-service
## More Documentation
- [Angular Nx Tutorial](/angular-tutorial/1-code-generation)
- [Migrating from the Angular CLI](/recipes/adopting-nx/migration-angular)
- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)
- [Using NgRx](/recipes/other/misc-ngrx)
- [Using Data Persistence operators](/recipes/other/misc-data-persistence)
- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)
- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
- [Setup Module Federation with Angular and Nx](/more-concepts/faster-builds-with-module-federation)
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)

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

@ -51,7 +51,7 @@ Replace `your-app-name` with the app's name as defined in your `tsconfig.base.js
Run `nx e2e frontend-e2e` to execute e2e tests with Cypress.
You can run your e2e test against a production build by using the `production` [configuration](https://nx.dev/recipes/executors/use-executor-configurations#use-executor-configurations)
You can run your e2e test against a production build by using the `production` [configuration](https://nx.dev/plugin-features/use-task-executors#use-executor-configurations)
```shell
nx e2e frontend-e2e --configuration=production

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

@ -161,7 +161,7 @@ nx export my-new-app
Once you are ready to deploy your Next.js application, you have absolute freedom to choose any hosting provider that fits your needs.
You may know that the company behind Next.js, Vercel, has a great hosting platform offering that is developed in tandem with Next.js itself to offer a great overall developer and user experience. We have detailed [how to deploy your Next.js application to Vercel in a separate guide](/recipes/deployment/deploy-nextjs-to-vercel).
You may know that the company behind Next.js, Vercel, has a great hosting platform offering that is developed in tandem with Next.js itself to offer a great overall developer and user experience. We have detailed [how to deploy your Next.js application to Vercel in a separate guide](/recipes/react/deploy-nextjs-to-vercel).
## More Documentation

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

@ -157,7 +157,7 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
### Configure webpack for Module Federation
If you use the [Module Federation](/recipes/module-federation/faster-builds) support from `@nx/angular` or `@nx/react` then
If you use the [Module Federation](/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" %}

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

@ -165,7 +165,7 @@ module.exports = composePlugins(
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](/recipes/module-federation/faster-builds).
For more information, refer to the [Module Federation recipe](/more-concepts/faster-builds-with-module-federation).
### Options

722
docs/map.json
View File

@ -4,7 +4,7 @@
"description": "This is used to create documentation routing and hierarchy on the nx.dev website.",
"content": [
{
"name": "Nx docs",
"name": "Nx",
"id": "nx-documentation",
"description": "Nx documentation for you to discover!",
"itemList": [
@ -503,7 +503,6 @@
}
]
},
{
"name": "Recipes",
"id": "recipes",
@ -850,127 +849,12 @@
]
},
{
"name": "Nx Recipes",
"name": "Recipes",
"id": "nx-recipes",
"description": "Learn quickly how to do things with Nx.",
"description": "In depth recipes for common tasks",
"itemList": [
{
"name": "Getting Started",
"id": "getting-started",
"description": "Basic information to get you started.",
"itemList": [
{
"name": "Set up a new workspace",
"id": "set-up-a-new-workspace",
"description": "How to setup quickly a new Nx workspace.",
"file": "shared/recipes/set-up-a-new-workspace"
}
]
},
{
"name": "Nx Console",
"id": "nx-console",
"description": "Checkout all the recipes related to Nx Console.",
"itemList": [
{
"name": "Nx Console Telemetry",
"id": "console-telemetry",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-telemetry"
},
{
"name": "Nx Console Generate Command",
"id": "console-generate-command",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-generate-command"
},
{
"name": "Nx Console Run Command",
"id": "console-run-command",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-run-command"
},
{
"name": "Nx Console Add Dependency Command",
"id": "console-add-dependency-command",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-add-dependency-command"
},
{
"name": "Nx Console Project Pane",
"id": "console-project-pane",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-project-pane"
},
{
"name": "Nx Console Keyboard Shortcuts",
"id": "console-shortcuts",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-shortcuts"
}
]
},
{
"name": "CI",
"id": "ci",
"description": "All recipes about how to use Nx to make your CI faster.",
"itemList": [
{
"name": "CI Setup",
"id": "ci-setup",
"tags": ["distribute-task-execution"],
"file": "shared/ci-overview"
},
{
"name": "Prepare applications for deployment via CI",
"id": "ci-deployment",
"tags": ["docker", "deploy"],
"file": "shared/recipes/ci-deployment"
},
{
"name": "Setting up Azure Pipelines",
"id": "monorepo-ci-azure",
"file": "shared/monorepo-ci-azure"
},
{
"name": "Find the Last Successful Commit in Azure Pipelines",
"id": "azure-last-successful-commit",
"file": "shared/recipes/azure-last-successful-commit"
},
{
"name": "Setting up CircleCI",
"id": "monorepo-ci-circle-ci",
"file": "shared/monorepo-ci-circle-ci"
},
{
"name": "Setting up GitHub Actions",
"id": "monorepo-ci-github-actions",
"file": "shared/monorepo-ci-github-actions"
},
{
"name": "Setting up Jenkins",
"id": "monorepo-ci-jenkins",
"file": "shared/monorepo-ci-jenkins"
},
{
"name": "Setting up GitLab",
"id": "monorepo-ci-gitlab",
"file": "shared/monorepo-ci-gitlab"
},
{
"name": "Setting up Bitbucket",
"id": "monorepo-ci-bitbucket-pipelines",
"file": "shared/monorepo-ci-bitbucket-pipelines"
},
{
"name": "Troubleshooting Nx Install Issues",
"id": "troubleshoot-nx-install-issues",
"file": "shared/installation/troubleshoot-installation"
}
]
},
{
"name": "Adopting Nx",
"name": "Migrating to Nx",
"id": "adopting-nx",
"description": "Adopting Nx incrementally, on existing project or from scratch.",
"itemList": [
@ -984,26 +868,11 @@
"id": "adding-to-existing-project",
"file": "shared/migration/adding-to-existing-project"
},
{
"name": "From CRA",
"id": "migration-cra",
"file": "shared/migration/migration-cra"
},
{
"name": "From Angular CLI",
"id": "migration-angular",
"file": "shared/migration/migration-angular"
},
{
"name": "Nx and Lerna",
"id": "lerna-and-nx",
"file": "shared/migration/lerna-and-nx"
},
{
"name": "From AngularJS",
"id": "migration-angularjs",
"file": "shared/migration/migration-angularjs"
},
{
"name": "Preserving Git Histories",
"id": "preserving-git-histories",
@ -1017,101 +886,51 @@
]
},
{
"name": "Adopting Nx From Angular CLI",
"id": "adopting-nx-angular",
"description": "Advanced guides to adopt Nx coming from the Angular CLI",
"name": "Angular",
"id": "angular",
"description": "Advanced guides to adopt Nx in Angular.",
"itemList": [
{
"name": "From Angular CLI",
"id": "migration-angular",
"name": "Migration",
"id": "migration",
"itemList": [
{
"name": "Migrating from Angular CLI",
"id": "angular",
"file": "shared/migration/migration-angular"
},
{
"name": "From Angular CLI to Integrated",
"id": "angular-integrated",
"file": "shared/migration/angular-integrated"
"name": "Migrating From Multiple Angular CLI Repos",
"id": "angular-multiple",
"file": "shared/migration/angular-multiple"
},
{
"name": "From Angular CLI Manually",
"name": "Migrating Angular Application manually",
"id": "angular-manual",
"file": "shared/migration/angular-manual"
},
{
"name": "From Multiple Angular CLI Repos",
"id": "angular-multiple",
"file": "shared/migration/angular-multiple"
"name": "Migrating from AngularJS",
"id": "angularjs",
"file": "shared/migration/migration-angularjs"
}
]
},
{
"name": "Executors",
"id": "executors",
"description": "Use, extend and compose executors.",
"itemList": [
{
"name": "Use Executor Configurations",
"id": "use-executor-configurations",
"tags": ["use-task-executors"],
"file": "shared/recipes/use-executor-configurations"
},
{
"name": "Running Custom Commands",
"id": "run-commands-executor",
"tags": ["use-task-executors"],
"file": "shared/running-custom-commands"
}
]
},
{
"name": "Environment Variables",
"id": "environment-variables",
"description": "Using environment variables in an Nx workspace.",
"itemList": [
{
"name": "Define Environment Variables",
"id": "define-environment-variables",
"tags": ["environment-variables"],
"file": "shared/guides/define-environment-variables"
},
{
"name": "Use Environment Variables in React",
"id": "use-environment-variables-in-react",
"tags": ["environment-variables"],
"file": "shared/guides/use-environment-variables-in-react"
},
{
"name": "Use Environment Variables in Angular",
"id": "use-environment-variables-in-angular",
"tags": ["environment-variables"],
"file": "shared/guides/use-environment-variables-in-angular"
}
]
},
{
"name": "Module Federation and Micro Frontends",
"id": "module-federation",
"description": "How to work with and setup Module Federation with Nx.",
"itemList": [
{
"name": "Faster Builds with Module Federation",
"id": "faster-builds",
"tags": [
"use-task-executors",
"module-federation",
"angular",
"react"
],
"file": "shared/guides/module-federation/faster-builds"
"name": "Using Tailwind CSS with Angular projects",
"id": "using-tailwind-css-with-angular-projects",
"file": "shared/guides/using-tailwind-css-with-angular-projects"
},
{
"name": "Setup Module Federation with SSR for Angular and React",
"name": "Setup Module Federation with SSR for Angular",
"id": "module-federation-with-ssr",
"tags": [
"use-task-executors",
"module-federation",
"angular",
"react"
],
"tags": ["use-task-executors", "module-federation", "angular"],
"file": "shared/recipes/module-federation-with-ssr"
},
{
@ -1121,41 +940,70 @@
"file": "shared/guides/module-federation/dynamic-mfe-angular"
},
{
"name": "Nx Micro-Frontend Example",
"id": "nx-examples",
"file": "shared/examples/nx-examples"
"name": "Setup incremental builds for Angular applications",
"id": "setup-incremental-builds-angular",
"file": "shared/guides/setup-incremental-builds-angular"
}
]
},
{
"name": "Storybook",
"id": "storybook",
"description": "Storybook how tos.",
"name": "React",
"id": "react",
"description": "Advanced guides to adopt Nx in React.",
"itemList": [
{
"name": "Publishing Storybook: One main Storybook instance for all projects",
"id": "one-storybook-for-all",
"tags": ["storybook"],
"file": "shared/recipes/one-storybook-for-all"
"name": "Migrating from CRA",
"id": "migration-cra",
"file": "shared/migration/migration-cra"
},
{
"name": "Publishing Storybook: One Storybook instance per scope",
"id": "one-storybook-per-scope",
"tags": ["storybook"],
"file": "shared/recipes/one-storybook-per-scope"
"name": "React 18 Migration",
"id": "react-18",
"file": "shared/guides/react-18"
},
{
"name": "Publishing Storybook: One main Storybook instance using Storybook Composition",
"id": "one-storybook-with-composition",
"tags": ["storybook"],
"file": "shared/recipes/one-storybook-with-composition"
"name": "React Native with Nx",
"id": "react-native",
"file": "shared/guides/react-native"
},
{
"name": "Remix with Nx",
"id": "remix",
"file": "shared/guides/remix"
},
{
"name": "Use Environment Variables in React",
"id": "use-environment-variables-in-react",
"tags": ["environment-variables"],
"file": "shared/guides/use-environment-variables-in-react"
},
{
"name": "Using Tailwind CSS in React",
"id": "using-tailwind-css-in-react",
"file": "shared/guides/using-tailwind-css-in-react"
},
{
"name": "Adding Images, Fonts, and Files",
"id": "adding-assets-react",
"file": "shared/guides/adding-assets"
},
{
"name": "Setup Module Federation with SSR for React",
"id": "module-federation-with-ssr",
"tags": ["use-task-executors", "module-federation", "react"],
"file": "shared/recipes/module-federation-with-ssr"
},
{
"name": "Deploying Next.js applications to Vercel",
"id": "deploy-nextjs-to-vercel",
"file": "shared/recipes/deployment/deploy-nextjs-to-vercel"
}
]
},
{
"name": "Deployment",
"id": "deployment",
"description": "Deployment recipes for Node.js and Deno server applications.",
"name": "Node",
"id": "node",
"description": "Set of Node related recipes.",
"itemList": [
{
"name": "Deploying a Node App to Fly.io",
@ -1174,60 +1022,31 @@
"id": "node-aws-lambda",
"tags": ["deployment", "node"],
"file": "shared/recipes/deployment/node-aws-lambda"
},
{
"name": "Serverless deployment with Deno Deploy",
"id": "deno-deploy",
"tags": ["deployment", "deno"],
"file": "shared/recipes/deployment/deno-deploy"
},
{
"name": "Add and Deploy Netlify Edge Functions with Deno",
"id": "deno-netlify-functions",
"tags": ["deployment", "deno"],
"file": "shared/recipes/deployment/deno-netlify-edge-functions"
},
{
"name": "Deploying Next.js applications to Vercel",
"id": "deploy-nextjs-to-vercel",
"file": "shared/recipes/deployment/deploy-nextjs-to-vercel"
}
]
},
{
"name": "Database",
"id": "database",
"description": "Recipes for using various databases in node apps.",
"name": "Storybook",
"id": "storybook",
"description": "Storybook how tos.",
"itemList": [
{
"name": "Using Prisma with NestJS",
"id": "nestjs-prisma",
"tags": ["database", "node"],
"file": "shared/recipes/database/nestjs-prisma"
"name": "One main Storybook instance for all projects",
"id": "one-storybook-for-all",
"tags": ["storybook"],
"file": "shared/recipes/one-storybook-for-all"
},
{
"name": "Using Mongo with Fastify",
"id": "mongo-fastify",
"tags": ["database", "node"],
"file": "shared/recipes/database/mongo-fastify"
"name": "One Storybook instance per scope",
"id": "one-storybook-per-scope",
"tags": ["storybook"],
"file": "shared/recipes/one-storybook-per-scope"
},
{
"name": "Using Redis with Fastify",
"id": "redis-fastify",
"tags": ["database", "node"],
"file": "shared/recipes/database/redis-fastify"
},
{
"name": "Using Postgres with Fastify",
"id": "postgres-fastify",
"tags": ["database", "node"],
"file": "shared/recipes/database/postgres-fastify"
},
{
"name": "Using PlanetScale with Serverless Fastify",
"id": "serverless-fastify-planetscale",
"tags": ["database", "node", "serverless"],
"file": "shared/recipes/database/serverless-fastify-planetscale"
"name": "One main Storybook instance using Storybook Composition",
"id": "one-storybook-with-composition",
"tags": ["storybook"],
"file": "shared/recipes/one-storybook-with-composition"
}
]
},
@ -1263,37 +1082,172 @@
]
},
{
"name": "Example Repos",
"id": "example-repos",
"description": "Examples of different ways to use Nx",
"name": "CI",
"id": "ci",
"description": "All recipes about how to use Nx to make your CI faster.",
"itemList": [
{
"name": "Powering Up React Development With Nx",
"id": "react-nx",
"file": "shared/examples/react-nx"
"name": "CI Setup",
"id": "ci-setup",
"tags": ["distribute-task-execution"],
"file": "shared/ci-overview"
},
{
"name": "Using Apollo GraphQL",
"id": "apollo-react",
"file": "shared/examples/apollo-react"
"name": "Prepare applications for deployment via CI",
"id": "ci-deployment",
"tags": ["docker", "deploy"],
"file": "shared/recipes/ci-deployment"
},
{
"name": "Large Repo and Caching",
"id": "caching",
"file": "shared/examples/caching"
"name": "Setting up Azure Pipelines",
"id": "monorepo-ci-azure",
"file": "shared/monorepo-ci-azure"
},
{
"name": "Large Repo and DTE",
"id": "dte",
"file": "shared/examples/dte"
"name": "Setting up CircleCI",
"id": "monorepo-ci-circle-ci",
"file": "shared/monorepo-ci-circle-ci"
},
{
"name": "Setting up GitHub Actions",
"id": "monorepo-ci-github-actions",
"file": "shared/monorepo-ci-github-actions"
},
{
"name": "Setting up Jenkins",
"id": "monorepo-ci-jenkins",
"file": "shared/monorepo-ci-jenkins"
},
{
"name": "Setting up GitLab",
"id": "monorepo-ci-gitlab",
"file": "shared/monorepo-ci-gitlab"
},
{
"name": "Setting up Bitbucket",
"id": "monorepo-ci-bitbucket-pipelines",
"file": "shared/monorepo-ci-bitbucket-pipelines"
}
]
},
{
"name": "Managing Your Nx Repository",
"id": "managing-repository",
"description": "Configuring the Repository Itself",
"name": "Nx Console",
"id": "nx-console",
"description": "Checkout all the recipes related to Nx Console.",
"itemList": [
{
"name": "Telemetry",
"id": "console-telemetry",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-telemetry"
},
{
"name": "Generate Command",
"id": "console-generate-command",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-generate-command"
},
{
"name": "Run Command",
"id": "console-run-command",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-run-command"
},
{
"name": "Add Dependency Command",
"id": "console-add-dependency-command",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-add-dependency-command"
},
{
"name": "Project Pane",
"id": "console-project-pane",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-project-pane"
},
{
"name": "Keyboard Shortcuts",
"id": "console-shortcuts",
"tags": ["integrate-with-editors"],
"file": "shared/recipes/console-shortcuts"
}
]
},
{
"name": "Troubleshooting",
"id": "troubleshooting",
"description": "Learn how to troubleshoot common problems.",
"itemList": [
{
"name": "Resolve Circular Dependencies",
"id": "resolve-circular-dependencies",
"tags": ["explore-graph"],
"file": "shared/recipes/resolve-circular-dependencies"
},
{
"name": "Troubleshooting Nx Install Issues",
"id": "troubleshoot-nx-install-issues",
"file": "shared/installation/troubleshoot-installation"
},
{
"name": "Troubleshoot Cache Misses",
"id": "troubleshoot-cache-misses",
"tags": ["cache-task-results"],
"file": "shared/recipes/troubleshoot-cache-misses"
},
{
"name": "Unknown Local Cache Error",
"id": "unknown-local-cache",
"tags": [],
"file": "shared/guides/unknown-local-cache"
},
{
"name": "Profiling Build Performance",
"id": "performance-profiling",
"tags": ["use-task-executors", "environment-variables"],
"file": "shared/guides/performance-profiling"
}
]
},
{
"name": "Tips and tricks",
"id": "tips-n-tricks",
"description": "Various tips and tricks for using Nx.",
"itemList": [
{
"name": "Configuring ESLint with Typescript",
"id": "eslint",
"file": "shared/eslint"
},
{
"name": "Define Environment Variables",
"id": "define-environment-variables",
"tags": ["environment-variables"],
"file": "shared/guides/define-environment-variables"
},
{
"name": "Configuring Browser Support",
"id": "browser-support",
"file": "shared/guides/browser-support"
},
{
"name": "Include Assets in Build",
"id": "include-assets-in-build",
"tags": [],
"file": "shared/recipes/include-assets-in-build"
},
{
"name": "Include All package.json Files as Projects",
"id": "include-all-packagejson",
"tags": [],
"file": "shared/recipes/include-all-packagejson"
},
{
"name": "Identify Dependencies Between Folders",
"id": "identify-dependencies-between-folders",
"tags": [],
"file": "shared/recipes/identify-dependencies-between-folders"
},
{
"name": "Run Root-Level NPM Scripts with Nx",
"id": "root-level-scripts",
@ -1312,12 +1266,6 @@
"tags": ["workspace-watching"],
"file": "shared/recipes/workspace-watching"
},
{
"name": "Advanced Update Process",
"id": "advanced-update",
"tags": ["automate-updating-dependencies"],
"file": "shared/recipes/advanced-update"
},
{
"name": "Convert from a Standalone Repository to an Integrated Repository",
"id": "standalone-to-integrated",
@ -1325,9 +1273,21 @@
"file": "shared/recipes/repo-types/standalone-to-integrated"
},
{
"name": "JavaScript and TypeScript",
"name": "Use JavaScript instead TypeScript",
"id": "js-and-ts",
"file": "shared/guides/js-and-ts"
},
{
"name": "Altering Migration Process",
"id": "advanced-update",
"tags": ["automate-updating-dependencies"],
"file": "shared/recipes/advanced-update"
},
{
"name": "Running Custom Commands",
"id": "run-commands-executor",
"tags": ["use-task-executors"],
"file": "shared/running-custom-commands"
}
]
},
@ -1337,127 +1297,91 @@
"description": "Other recipes you will find useful.",
"itemList": [
{
"name": "React Native with Nx",
"id": "react-native",
"file": "shared/guides/react-native"
"name": "Serverless deployment with Deno Deploy",
"id": "deno-deploy",
"tags": ["deployment", "deno"],
"file": "shared/recipes/deployment/deno-deploy"
},
{
"name": "Remix with Nx",
"id": "remix",
"file": "shared/guides/remix"
},
{
"name": "Adding Images, Fonts, and Files",
"id": "adding-assets-react",
"file": "shared/guides/adding-assets"
},
{
"name": "Setup incremental builds for Angular applications",
"id": "setup-incremental-builds-angular",
"file": "shared/guides/setup-incremental-builds-angular"
},
{
"name": "Profiling Build Performance",
"id": "performance-profiling",
"tags": ["use-task-executors", "environment-variables"],
"file": "shared/guides/performance-profiling"
},
{
"name": "Using ESLint in Nx Workspaces",
"id": "eslint",
"tags": ["enforce-project-boundaries"],
"file": "shared/eslint"
},
{
"name": "Configuring Browser Support",
"id": "browser-support",
"file": "shared/guides/browser-support"
},
{
"name": "Using Tailwind CSS in React",
"id": "using-tailwind-css-in-react",
"file": "shared/guides/using-tailwind-css-in-react"
},
{
"name": "React 18 Migration",
"id": "react-18",
"file": "shared/guides/react-18"
},
{
"name": "Using Tailwind CSS with Angular projects",
"id": "using-tailwind-css-with-angular-projects",
"file": "shared/guides/using-tailwind-css-with-angular-projects"
},
{
"name": "Using NgRx",
"id": "misc-ngrx",
"file": "shared/guides/misc-ngrx"
},
{
"name": "Using Data Persistence operators",
"id": "misc-data-persistence",
"file": "shared/guides/misc-data-persistence"
},
{
"name": "Troubleshoot Cache Misses",
"id": "troubleshoot-cache-misses",
"tags": ["cache-task-results"],
"file": "shared/recipes/troubleshoot-cache-misses"
},
{
"name": "Export Project Graph",
"id": "export-project-graph",
"tags": ["explore-graph"],
"file": "shared/recipes/export-project-graph"
},
{
"name": "Resolve Circular Dependencies",
"id": "resolve-circular-dependencies",
"tags": ["explore-graph"],
"file": "shared/recipes/resolve-circular-dependencies"
},
{
"name": "Include All package.json Files as Projects",
"id": "include-all-packagejson",
"tags": [],
"file": "shared/recipes/include-all-packagejson"
},
{
"name": "Include Assets in Build",
"id": "include-assets-in-build",
"tags": [],
"file": "shared/recipes/include-assets-in-build"
},
{
"name": "Identify Dependencies Between Folders",
"id": "identify-dependencies-between-folders",
"tags": [],
"file": "shared/recipes/identify-dependencies-between-folders"
"name": "Add and Deploy Netlify Edge Functions with Deno",
"id": "deno-netlify-functions",
"tags": ["deployment", "deno"],
"file": "shared/recipes/deployment/deno-netlify-edge-functions"
},
{
"name": "Rescope Packages from @nrwl to @nx",
"id": "rescope",
"tags": [],
"file": "shared/recipes/rescope"
}
]
},
{
"name": "Standalone NgRx APIs",
"id": "standalone-ngrx-apis",
"tags": [],
"file": "shared/recipes/standalone-ngrx-apis"
"name": "Example Repos",
"id": "example-repos",
"description": "Examples of different ways to use Nx",
"itemList": [
{
"name": "Powering Up React Development With Nx",
"id": "react-nx",
"file": "shared/examples/react-nx"
},
{
"name": "Unknown Local Cache Error",
"id": "unknown-local-cache",
"tags": [],
"file": "shared/guides/unknown-local-cache"
"name": "Using Apollo GraphQL",
"id": "apollo-react",
"file": "shared/examples/apollo-react"
},
{
"name": "Using Prisma with NestJS",
"id": "nestjs-prisma",
"tags": ["database", "node"],
"file": "shared/recipes/database/nestjs-prisma"
},
{
"name": "Using Mongo with Fastify",
"id": "mongo-fastify",
"tags": ["database", "node"],
"file": "shared/recipes/database/mongo-fastify"
},
{
"name": "Using Redis with Fastify",
"id": "redis-fastify",
"tags": ["database", "node"],
"file": "shared/recipes/database/redis-fastify"
},
{
"name": "Using Postgres with Fastify",
"id": "postgres-fastify",
"tags": ["database", "node"],
"file": "shared/recipes/database/postgres-fastify"
},
{
"name": "Using PlanetScale with Serverless Fastify",
"id": "serverless-fastify-planetscale",
"tags": ["database", "node", "serverless"],
"file": "shared/recipes/database/serverless-fastify-planetscale"
},
{
"name": "Large Repo and Caching",
"id": "caching",
"file": "shared/examples/caching"
},
{
"name": "Large Repo and DTE",
"id": "dte",
"file": "shared/examples/dte"
},
{
"name": "Nx Micro-Frontend Example",
"id": "mfe",
"file": "shared/examples/nx-examples"
}
]
}
]
},
{
"name": "Nx Cloud docs",
"name": "Nx Cloud",
"id": "nx-cloud-documentation",
"description": "Learn how to enable Distributed Tasks Executions, remote caching and more.",
"itemList": [

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

@ -798,8 +798,8 @@ Congrats, you made it!! You now know how to leverage the Nx standalone applicati
Here's some more things you can dive into next:
- Learn more about the [underlying mental model of Nx](/concepts/mental-model)
- Learn about popular generators such as [how to setup Tailwind](/recipes/other/using-tailwind-css-with-angular-projects) or [add Storybook to your UI library](/packages/storybook/documents/overview-angular)
- Learn how to [migrate your existing Angular CLI repo to Nx](/recipes/adopting-nx/migration-angular)
- Learn about popular generators such as [how to setup Tailwind](/recipes/angular/using-tailwind-css-with-angular-projects) or [add Storybook to your UI library](/packages/storybook/documents/overview-angular)
- Learn how to [migrate your existing Angular CLI repo to Nx](/recipes/angular/migration/angular)
- [Speed up CI: Run only tasks for project that got changed](/core-features/run-tasks#run-tasks-affected-by-a-pr)
- [Speed up CI: Share your cache](/core-features/share-your-cache)
- [Speed up CI: Distribute your tasks across machines](/core-features/distribute-task-execution)

2
docs/shared/concepts/how-project-graph-is-built.md
View File

@ -28,7 +28,7 @@ Nx creates a graph of all the dependencies between projects in your workspace us
Then `my-app` depends on `awesome-library`
This can be [turned on or off with the `analyzeSourceFiles` flag](../../recipes/managing-repository/analyze-source-files).
This can be [turned on or off with the `analyzeSourceFiles` flag](../../recipes/tips-n-tricks/analyze-source-files).
3. Manually created `implicitDependencies` in the project configuration file.

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

@ -68,4 +68,4 @@ Note: You may want to keep the `migrations.json` until every branch that was cre
## Need to opt-out of some migrations?
Sometimes you need to temporarily opt-out from some migrations because your workspace is not ready yet. You can manually adjust the `migrations.json` or run the update with the `--interactive` flag to choose which migrations you accept. Find more details in our [Advanced Update Process](/recipes/managing-repository/advanced-update) guide.
Sometimes you need to temporarily opt-out from some migrations because your workspace is not ready yet. You can manually adjust the `migrations.json` or run the update with the `--interactive` flag to choose which migrations you accept. Find more details in our [Advanced Update Process](/recipes/tips-n-tricks/advanced-update) guide.

10
docs/shared/core-features/explore-graph.md
View File

@ -132,3 +132,13 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
```
{% /graph %}
## Export Project Graph to JSON
If you prefer to analyze the underlying data of the project graph with a script or some other tool, you can run:
```shell
nx graph --file=output.json
```
This will give you all the information that is used to create the project graph visualization.

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

@ -136,7 +136,7 @@ If you want Nx to cache the task, but prefer to use npm (or pnpm/yarn) to run th
}
```
Learn more about root-level tasks [in our dedicated recipe page](/recipes/managing-repository/root-level-scripts).
Learn more about root-level tasks [in our dedicated recipe page](/recipes/tips-n-tricks/root-level-scripts).
## Defining the Task Pipeline

4
docs/shared/eslint.md
View File

@ -1,6 +1,4 @@
# Using ESLint in Nx Workspaces
## Rules requiring type information
# Configuring ESLint with Typescript
ESLint is powerful linter by itself, able to work on the syntax of your source files and assert things about based on the rules you configure. It gets even more powerful, however, when TypeScript type-checker is layered on top of it when analyzing TypeScript files, which is something that `@typescript-eslint` allows us to do.

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

@ -106,11 +106,11 @@ Add Nx to your existing NPM/YARN/PNPM workspace
Add Nx to a project
{% /persona %}
{% persona title="Migrate from CRA" type="react" url="/recipes/adopting-nx/migration-cra" %}
{% persona title="Migrate from CRA" type="react" url="/recipes/react/migration-cra" %}
Migrate from a CRA setup and automatically switch to Vite
{% /persona %}
{% persona title="Migrate from Angular CLI" type="angular" url="/recipes/adopting-nx/migration-angular" %}
{% persona title="Migrate from Angular CLI" type="angular" url="/recipes/angular/migration/angular" %}
Automatically migrate from the Angular CLI
{% /persona %}

218
docs/shared/guides/misc-data-persistence.md
View File

@ -1,218 +0,0 @@
# Using Data Persistence operators
Managing state is a hard problem. We need to coordinate multiple backends, web workers, and UI components, all of which update the state concurrently.
What should we store in memory and what in the URL? What about the local UI state? How do we synchronize the persistent state, the URL, and the state on the server? All these questions have to be answered when designing the state management of our applications. **Nx** provides a set of helper functions that enables the developer to manage state in Angular with an intentional synchronization strategy and handle error state. Check out the [Managing State in Angular Applications using NgRx](https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b) for more detailed example of the state problem Nx is solving.
## Optimistic Updates
For a better user experience, the `optimisticUpdate` operator updates the state on the client application first, before updating the data on the server-side. While it addresses fetching data in order, removing the race conditions and handling error, it is optimistic about not failing to update the server. In case of a failure, when using `optimisticUpdate`, the local state on the client is already updated. The developer must provide an undo action to restore the previous state to keep it consistent with the server state. The error handling must be done in the callback, or by means of the undo action.
```typescript
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { optimisticUpdate } from '@nx/angular';
@Injectable()
class TodoEffects {
updateTodo$ = createEffect(() =>
this.actions$.pipe(
ofType('UPDATE_TODO'),
optimisticUpdate({
// provides an action
run: (action: UpdateTodo) => {
return this.backend.updateTodo(action.todo.id, action.todo).pipe(
mapTo({
type: 'UPDATE_TODO_SUCCESS',
})
);
},
undoAction: (action: UpdateTodo, error: any) => {
// dispatch an undo action to undo the changes in the client state
return {
type: 'UNDO_TODO_UPDATE',
todo: action.todo,
};
},
})
)
);
constructor(private actions$: Actions, private backend: Backend) {}
}
```
## Pessimistic Updates
To achieve a more reliable data synchronization, the `pessimisticUpdate` operator updates the server data first. When the change is reflected in the server state, changes the client state by dispatching an action. `pessimisticUpdate` method enforces the order of the fetches and error handling.
```typescript
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { pessimisticUpdate } from '@nx/angular';
@Injectable()
class TodoEffects {
updateTodo$ = createEffect(() =>
this.actions$.pipe(
ofType('UPDATE_TODO'),
pessimisticUpdate({
// provides an action
run: (action: UpdateTodo) => {
// update the backend first, and then dispatch an action that will
// update the client side
return this.backend.updateTodo(action.todo.id, action.todo).pipe(
map((updated) => ({
type: 'UPDATE_TODO_SUCCESS',
todo: updated,
}))
);
},
onError: (action: UpdateTodo, error: any) => {
// we don't need to undo the changes on the client side.
// we can dispatch an error, or simply log the error here and return `null`
return null;
},
})
)
);
constructor(private actions$: Actions, private backend: Backend) {}
}
```
## Data Fetching
The `fetch` operator provides consistency when fetching data. If there are multiple requests scheduled for the same action, it will only run the last one.
```typescript
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { fetch } from '@nx/angular';
@Injectable()
class TodoEffects {
loadTodos$ = createEffect(() =>
this.actions$.pipe(
ofType('GET_TODOS'),
fetch({
// provides an action
run: (a: GetTodos) => {
return this.backend.getAll().pipe(
map((response) => ({
type: 'TODOS',
todos: response.todos,
}))
);
},
onError: (action: GetTodos, error: any) => {
// dispatch an undo action to undo the changes in the client state
return null;
},
})
)
);
constructor(private actions$: Actions, private backend: Backend) {}
}
```
This is correct, but we can improve the performance by supplying an id of the data by using an accessor function and adding concurrency to the fetch action for different ToDo's.
```typescript
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { fetch } from '@nx/angular';
@Injectable()
class TodoEffects {
loadTodo$ = createEffect(() =>
this.actions$.pipe(
ofType('GET_TODO'),
fetch({
id: (todo: GetTodo) => {
return todo.id;
},
// provides an action
run: (todo: GetTodo) => {
return this.backend.getTodo(todo.id).pipe(
map((response) => ({
type: 'LOAD_TODO_SUCCESS',
todo: response.todo,
}))
);
},
onError: (action: GetTodo, error: any) => {
// dispatch an undo action to undo the changes in the client state
return null;
},
})
)
);
constructor(private actions$: Actions, private backend: Backend) {}
}
```
With this setup, the requests for Todo will run concurrently with the requests for Todo 2.
## Data Fetching On Router Navigation
Since the user can always interact with the URL directly, we should treat the router as the source of truth and the initiator of actions. In other words, the router should invoke the reducer, not the other way around.
When our state depends on navigation, we can not assume the route change happened when a new url is triggered but when we actually know the user was able to navigate to the url. The `navigation` operator checks if an activated router state contains the passed in component type, and, if it does, runs the `run` callback. It provides the activated snapshot associated with the component and the current state. And it only runs the last request.
```typescript
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { navigation } from '@nx/angular';
@Injectable()
class TodoEffects {
loadTodo$ = createEffect(() =>
this.actions$.pipe(
// listens for the routerNavigation action from @ngrx/router-store
navigation(TodoComponent, {
run: (activatedRouteSnapshot: ActivatedRouteSnapshot) => {
return this.backend
.fetchTodo(activatedRouteSnapshot.params['id'])
.pipe(
map((todo) => ({
type: 'LOAD_TODO_SUCCESS',
todo: todo,
}))
);
},
onError: (
activatedRouteSnapshot: ActivatedRouteSnapshot,
error: any
) => {
// we can log and error here and return null
// we can also navigate back
return null;
},
})
)
);
constructor(private actions$: Actions, private backend: Backend) {}
}
```
The StoreRouterConnectingModule must be configured with an appropriate serializer. The `FullRouterStateSerializer` provides the full router state instead of the `MinimalRouterStateSerializer` that is used without configuration.
```typescript
import { NgModule } from '@angular/core';
import {
StoreRouterConnectingModule,
FullRouterStateSerializer,
} from '@ngrx/router-store';
@NgModule({
imports: [
StoreRouterConnectingModule.forRoot({
serializer: FullRouterStateSerializer,
}),
],
})
export class TodosModule {}
```

126
docs/shared/guides/misc-ngrx.md
View File

@ -1,126 +0,0 @@
# State Management with NgRx
Using [NgRx](https://ngrx.io) for state management in an Angular application allows you to
build out application flows that track unique events and manage the state of shared data in a reactive, explicit, and consistent way.
## Overview
Nx provides a schematic to build out a new NgRx feature area that manages shared state.
The **@nx/angular** package has an `ngrx` schematic to generate files that implement best practices when using NgRx for state management. This schematic generates source files that include enhancements to NgRx for data persistence strategies, and simplified testing.
The `ngrx` schematic generates an NgRx feature set containing the following files:
- `actions` - Express unique events throughout your application.
- `reducer` - Handle state changes from dispatched actions to perform state changes in an immutable way.
- `effects` - Handle side effects for isolating external interactions from UI components.
- `selectors` - Composable functions that select pieces of state and update when their inputs change.
- `facade` - Optional class that provides further encapsulation of NgRx from your component.
{% callout type="note" title="Schematics" %}
The `ngrx` schematic only provides a sub-set of schematics for the NgRx libraries. See [@ngrx/schematics](https://ngrx.io/guide/schematics) for the full set of available schematics.
{% /callout %}
## Command
The following command is used to run the `ngrx` schematic:
```shell
nx g @nx/angular:ngrx <featurename> --module=<path-to-module> --no-interactive [options]
```
{% callout type="note" title="Command" %}
The `name` and the `--module=` arguments are required. The `no-interactive` option chooses the recommended defaults for the schematic, unless you override them.
{% /callout %}
The most common additional options are:
- `root` - Set up the initial NgModule imports for NgRx Store, Effects, Router-Store, and Store DevTools.
- `facade` - Optional. If you prefer to further encapsulate NgRx from your components, add an injectable facade. See the blog [Better State Management with Facades](https://blog.nrwl.io/nrwl-nx-6-2-angular-6-1-and-better-state-management-e139da2cd074#cb93) for details.
See the [API Docs](/packages/angular/generators/ngrx) for detailed descriptions of all the available options. Also visit the [NgRx](https://ngrx.io) website for more guides and documentation about the libraries.
---
## Initial Setup
To get started with NgRx in an Angular application, you set up the root level store. As your application grows, you add feature level states, ensuring that your code follows a common pattern each time.
The example below shows you how to setup NgRx in the root of your application.
```shell
nx g @nx/angular:ngrx app --module=apps/<appname>/src/app/app.module.ts --root
```
The above command applies the following changes to the provided module:
- Registers `StoreModule.forRoot({})` in the imports array for state management, with recommended runtime checks enabled for maintaining immutable actions and state.
- Registers `EffectsModule.forRoot([])` in the `imports` array for isolation of side effects.
- Registers `StoreRouterConnectingModule.forRoot()` in the `imports` array for integration with the [Angular Router](https://angular.io/guide/router).
- Registers `StoreDevtools.instrument()` in the `imports` array for integration with the [Redux Devtools browser extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd).
You manage separate slices of state using libraries and feature states.
## Feature Workflow
When building new features using NgRx, you want to manage the state from within a separate library. This allows your
state to be easily shared across other libraries and applications. The steps below go through the workflow of using NgRx within the context of a library.
The example below generates a library to begin a new feature. For this example, `products` is used as the library name.
```shell
nx g @nx/angular:lib products
```
To manage the feature state:
- Use the `ngrx` schematic with the feature name in plural form, such as `products`.
- Provide a path to the `products` library module.
```shell
nx g @nx/angular:ngrx products --module=libs/products/src/lib/products.module.ts --directory +state/products --no-interactive
```
{% callout type="note" title="Enabling Facades" %}
Use the `--facade` option to generate an injectable Facade class along with the feature.
{% /callout %}
The following files are created, or updated:
```text
myorg/
├── apps/
└── libs/
└── products/
└── src/
├── lib/
│ ├── +state/
│ │ ├── products.actions.ts
│ │ ├── products.effects.ts
│ │ ├── products.effects.spec.ts
│ │ ├── products.facade.ts # optional
│ │ ├── products.facade.spec.ts # optional
│ │ ├── products.models.ts
│ │ ├── products.reducer.ts
│ │ ├── products.reducer.spec.ts
│ │ ├── products.selectors.ts
│ │ └── products.selectors.spec.ts
│ ├── products.module.spec.ts
│ └── products.module.ts
└── index.ts
```
The above command also does the following changes:
- Updates the feature module and registers `StoreModule.forFeature()` with the name of your feature state in the `imports` array.
- Updates the feature module and registers `EffectsModule.forFeature()` in the `imports` array.
The feature library's barrel `index.ts` is also updated to export the updated _public API_ for the state including:
- The NgRx selectors.
- The NgRx feature reducer.
- The optional facade class for the NgRx feature.
{% callout type="warning" title="Naming collisions" %}
When generating multiple feature states within a single library, make sure there are no naming collisions in the barrel `index.ts` file.
{% /callout %}

8
docs/shared/guides/module-federation/micro-frontend-architecture.md
View File

@ -1,9 +1,9 @@
# Micro Frontend Architecture
Since version 14, Nx provides out-of-the-box [Module Federation](/recipes/module-federation/faster-builds) support to both React
Since version 14, Nx provides out-of-the-box [Module Federation](/more-concepts/faster-builds-with-module-federation) support to both React
and Angular. The Micro Frontend (MFE) architecture builds on top of Module Federation by providing _independent deployability_.
If you have not read the [Module Federation guide](/recipes/module-federation/faster-builds) yet, we recommend that you read it
If you have not read the [Module Federation guide](/more-concepts/faster-builds-with-module-federation) yet, we recommend that you read it
before continuing with this MFE guide.
## When should I use micro frontend architecture?
@ -17,7 +17,7 @@ of MFEs and decide whether it makes sense for your own teams.
logic that breaks compatibility with remotes.
If you are looking at optimizing builds and do not need independent deployments, we recommend reading our guide on
[Faster Builds with Module Federation](/recipes/module-federation/faster-builds).
[Faster Builds with Module Federation](/more-concepts/faster-builds-with-module-federation).
If you need to use MFEs, keep reading, and we'll examine the architecture and strategies to deal with shared libraries and
deployments.
@ -29,7 +29,7 @@ With MFE architecture, a large application is split into:
1. A single **Host** application that references external...
2. **Remote** applications, which handle a single domain or feature.
In a normal Module Federation setup, we [recommend setting up implicit dependencies](/recipes/module-federation/faster-builds#architectural-overview)
In a normal Module Federation setup, we [recommend setting up implicit dependencies](/more-concepts/faster-builds-with-module-federation#architectural-overview)
from the host application to remote applications. However, in an MFE architecture you _do not_ want these dependencies
to exist between host and remotes.

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

@ -24,7 +24,7 @@ If you haven't used Nx before and used the Angular CLI, you probably ran `ng upd
- Fix migrations that "almost work".
- Commit a partially migrated state.
- Change versions of packages to match org requirements.
- [Opt out of Angular updates when updating Nx versions](/recipes/managing-repository/advanced-update#choosing-optional-package-updates-to-apply) as long as [the Angular version is still supported](/packages/angular/documents/angular-nx-version-matrix)
- [Opt out of Angular updates when updating Nx versions](/recipes/tips-n-tricks/advanced-update#choosing-optional-package-updates-to-apply) as long as [the Angular version is still supported](/packages/angular/documents/angular-nx-version-matrix)
`nx migrate` does this by splitting the process into two steps. `nx migrate latest` creates a `migrations.json` file with a list of all the migrations that are needed by Nx, Angular and other packages. You then have a chance to modify that file before running `nx migrate --run-migrations` to actually execute those migrations.

2
docs/shared/guides/unknown-local-cache.md
View File

@ -8,7 +8,7 @@ NX Invalid Cache Directory for Task "myapp:build"
The local cache artifact in "node_modules/.cache/nx/786524780459028195" was not been generated on this machine.
As a result, the cache's content integrity cannot be confirmed, which may make cache restoration potentially unsafe.
If your machine ID has changed since the artifact was cached, run "nx reset" to fix this issue.
Read about the error and how to address it here: https://nx.dev/recipes/other/unknown-local-cache
Read about the error and how to address it here: https://nx.dev/recipes/troubleshooting/unknown-local-cache
```
## Nx Tracks Cache Source

2
docs/shared/incremental-builds.md
View File

@ -100,4 +100,4 @@ But there are other ways to make the build process incremental. One of them is u
When using WebPack Module Federation, you split the application into multiple webpack builds. Imagine the application has 3 big sections, and they are built using 3 webpack builds: `W1`, `W2`, and `W3`. Each of them has to build shared code in addition to building the corresponding application section code. So the time it takes to build all of them (`W1` + `W2` + `W3`) will be greater than `W`. However, if you change only Section 1, you will only need to run `W1`. `W2` and `W3` will be retrieved from cache. In addition, `W1`, `W2`, and `W3` can run on separate machines. Because of that, both the CI time and the local serve time can be drastically reduced.
Learn more: [Faster Builds with Module Federation](/recipes/module-federation/faster-builds)
Learn more: [Faster Builds with Module Federation](/more-concepts/faster-builds-with-module-federation)

98
docs/shared/migration/angular-integrated.md
View File

@ -1,98 +0,0 @@
# Migrating an Angular CLI workspace to an Integrated Nx Monorepo
If you want to migrate your Angular CLI project to an [Integrated Nx Monorepo](/concepts/integrated-vs-package-based#integrated-repos), run the following command:
```shell
npx nx@latest init --integrated
```
The command applies the following changes to your workspace:
- Installs the `nx`, `@nx/angular` and `@nx/workspace` packages.
- Moves your applications into the `apps` folder, and updates the relevant file paths in your configuration files.
- Moves your e2e suites into the `apps/<app name>-e2e` folder, and updates the relevant file paths in your configuration files.
- Moves your libraries into the `libs` folder, and updates the relevant file paths in your configuration files.
- Updates your `package.json` scripts to use `nx` instead of `ng`.
- Splits your `angular.json` into `project.json` files for each project with updated paths.
After the changes are applied, your workspace file structure should look similar to the one below:
```text
<workspace name>/
├── apps/
│ └─ <app name>/
│ ├── src/
│ │ ├── app/
│ │ ├── assets/
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── main.ts
│ │ └── styles.css
│ ├── project.json
│ ├── tsconfig.app.json
│ └── tsconfig.spec.json
├── libs/
│ └── <lib name>/
│ ├── src/
│ ├── ng-package.json
│ ├── package.json
│ ├── project.json
│ ├── README.md
│ ├── tsconfig.lib.json
│ ├── tsconfig.lib.prod.json
│ └── tsconfig.spec.json
├── tools/
├── .editorconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── karma.conf.js
├── nx.json
├── package.json
├── README.md
└── tsconfig.base.json
```
Your workspace is now powered by Nx! You can verify that your application still runs as intended:
- To serve, run `nx serve <app name>`.
- To build, run `nx build <app name>`.
- To run unit tests, run `nx test <app name>`.
- To see your project graph, run `nx graph`.
> Your project graph will grow as you add and use more applications and libraries. You can add the `--watch` flag to `nx graph` to see the changes in-browser as you add them.
## Older Versions of Angular
Support for workspaces with multiple applications and libraries was added in Nx v14.1.0. If you are migrating using an older version of Nx, your workspace can only contain one application and no libraries in order to use the automated migration, otherwise, you can still [migrate manually](/recipes/adopting-nx-angular/angular-manual).
## Modified Folder Structure
The automated migration supports Angular CLI workspaces with a standard structure, configurations and features. If your workspace has deviated from what the Angular CLI generates, you might not be able to use the automated migration and you will need to [manually migrate your workspace](/recipes/adopting-nx-angular/angular-manual).
Currently, the automated migration supports workspaces using the following executors (builders):
- `@angular-devkit/build-angular:browser`
- `@angular-devkit/build-angular:dev-server`
- `@angular-devkit/build-angular:extract-i18n`
- `@angular-devkit/build-angular:karma`
- `@angular-devkit/build-angular:ng-packagr`
- `@angular-devkit/build-angular:protractor`
- `@angular-devkit/build-angular:server`
- `@angular-eslint/builder:lint`
- `@cypress/schematic:cypress`
- `@nguniversal/builders:prerender`
- `@nguniversal/builders:ssr-dev-server`
Support for other executors may be added in the future.
## Learn More
Learn more about the advantages of Nx in the following guides:
- [Using Cypress for e2e tests](/packages/cypress)
- [Using Jest for unit tests](/packages/jest)
- [Computation Caching](/concepts/how-caching-works)
- [Rebuilding and Retesting What is Affected](/concepts/affected)
- [Integrate with Editors](/core-features/integrate-with-editors)
- [Advanced Angular Micro Frontends with Dynamic Module Federation](/recipes/module-federation/dynamic-module-federation-with-angular)

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

@ -4,7 +4,7 @@
If you are using older versions of Angular (version 13 or lower), make sure to use the appropriate version of Nx that matches your version of Angular. See the [Nx and Angular Version Compatibility Matrix](/packages/angular/documents/angular-nx-version-matrix) to find the correct version. The generated files will also be slightly different.
{% /callout %}
If you are unable to automatically transform your Angular CLI workspace to an [Nx Integrated workspace](/recipes/adopting-nx-angular/angular-integrated), there are some manual steps you can take to move your project(s) into an Nx workspace.
If you are unable to automatically transform your Angular CLI workspace to an [Nx workspace](/recipes/angular/migration/angular), there are some manual steps you can take to move your project(s) into an Nx workspace.
### Generating a new workspace

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

@ -157,7 +157,7 @@ nx format:write
Nx offers built-in tasks for the most common needs: `serve`, `build`, `test`, `e2e`, and `lint`. You likely have additional tasks that are needed to manage or deploy your codebase. These tasks might include deployment, i18n workflows, or uploading assets to CDNs. These tasks can be set up as scripts that you run manually with node, ts-node, or npm scripts. You can migrate those tasks over as-is, to begin with.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` executor](/recipes/executors/run-commands-executor) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the project graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
You should consider implementing them as Nx tasks which should be a quick transition with the `run-commands` builder. [The `run-commands` executor](/recipes/tips-n-tricks/run-commands-executor) will allow you to run any custom commands you need as an Nx task. By implementing these commands in an Nx task, they are able to take advantage of the project graph in Nx and only run when necessary. They are also able to be cached and only be re-run when necessary.
Your use-case may also be covered by one of our community plugins. Plugin authors are able to extend the functionality of Nx through our plugin API.

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

@ -20,6 +20,87 @@ This will enable you to use the Nx CLI in your existing Angular CLI workspace wh
**Note:** The changes will be slightly different for Angular 13 and lower.
## Migrating to an Integrated Nx Monorepo
If you want to migrate your Angular CLI project to an [Integrated Nx Monorepo](/concepts/integrated-vs-package-based#integrated-repos), run the following command:
```shell
npx nx@latest init --integrated
```
The command applies the following changes to your workspace:
- Installs the `nx`, `@nx/angular` and `@nx/workspace` packages.
- Moves your applications into the `apps` folder, and updates the relevant file paths in your configuration files.
- Moves your e2e suites into the `apps/<app name>-e2e` folder, and updates the relevant file paths in your configuration files.
- Moves your libraries into the `libs` folder, and updates the relevant file paths in your configuration files.
- Updates your `package.json` scripts to use `nx` instead of `ng`.
- Splits your `angular.json` into `project.json` files for each project with updated paths.
After the changes are applied, your workspace file structure should look similar to the one below:
```text
<workspace name>/
├── apps/
│ └─ <app name>/
│ ├── src/
│ │ ├── app/
│ │ ├── assets/
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── main.ts
│ │ └── styles.css
│ ├── project.json
│ ├── tsconfig.app.json
│ └── tsconfig.spec.json
├── libs/
│ └── <lib name>/
│ ├── src/
│ ├── ng-package.json
│ ├── package.json
│ ├── project.json
│ ├── README.md
│ ├── tsconfig.lib.json
│ ├── tsconfig.lib.prod.json
│ └── tsconfig.spec.json
├── tools/
├── .editorconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── karma.conf.js
├── nx.json
├── package.json
├── README.md
└── tsconfig.base.json
```
### Older Versions of Angular
Support for workspaces with multiple applications and libraries was added in Nx v14.1.0. If you are migrating using an older version of Nx, your workspace can only contain one application and no libraries in order to use the automated migration, otherwise, you can still [migrate manually](/recipes/angular/migration/manual).
### Modified Folder Structure
The automated migration supports Angular CLI workspaces with a standard structure, configurations and features. If your workspace has deviated from what the Angular CLI generates, you might not be able to use the automated migration and you will need to [manually migrate your workspace](/recipes/angular/migration/manual).
Currently, the automated migration supports workspaces using the following executors (builders):
- `@angular-devkit/build-angular:browser`
- `@angular-devkit/build-angular:dev-server`
- `@angular-devkit/build-angular:extract-i18n`
- `@angular-devkit/build-angular:karma`
- `@angular-devkit/build-angular:ng-packagr`
- `@angular-devkit/build-angular:protractor`
- `@angular-devkit/build-angular:server`
- `@angular-eslint/builder:lint`
- `@cypress/schematic:cypress`
- `@nguniversal/builders:prerender`
- `@nguniversal/builders:ssr-dev-server`
Support for other executors may be added in the future.
## After migration
Your workspace is now powered by Nx! You can verify that your application still runs as intended:
- To serve, run `nx serve <app name>`.
@ -27,7 +108,9 @@ Your workspace is now powered by Nx! You can verify that your application still
- To run unit tests, run `nx test <app name>`.
- To see your project graph, run `nx graph`.
> Your project graph will grow as you add and use more applications and libraries.
> Your project graph will grow as you add and use more applications and libraries. You can add the `--watch` flag to `nx graph` to see the changes in-browser as you add them.
## Learn More
Learn more about the advantages of Nx in the following guides:
@ -35,6 +118,8 @@ Learn more about the advantages of Nx in the following guides:
- [Using Jest for unit tests](/packages/jest)
- [Computation Caching](/concepts/how-caching-works)
- [Rebuilding and Retesting What is Affected](/concepts/affected)
- [Integrate with Editors](/core-features/integrate-with-editors)
- [Advanced Angular Micro Frontends with Dynamic Module Federation](/recipes/angular/dynamic-module-federation-with-angular)
## From Nx Console
@ -67,10 +152,8 @@ If you're not ready to make the change yet, you can come back to this later:
{% card title="Nx and the Angular CLI" description="Differences between Nx and the Angular CLI" type="documentation" url="/concepts/more-concepts/nx-and-angular" /%}
{% card title="Angular CLI to Integrated Nx Workspace" description="Change the folder structure to use an integrated style" type="documentation" url="/recipes/adopting-nx-angular/angular-integrated" /%}
{% card title="Angular CLI manual migration" description="Add Nx by hand" type="documentation" url="/recipes/angular/migration/manual" /%}
{% card title="Angular CLI manual migration" description="Add Nx by hand" type="documentation" url="/recipes/adopting-nx-angular/angular-manual" /%}
{% card title="Multiple Angular Repositories to one Nx Workspace" description="Combine multiple Angular CLI workspaces into one Nx workspace" type="documentation" url="/recipes/adopting-nx-angular/angular-multiple" /%}
{% card title="Multiple Angular Repositories to one Nx Workspace" description="Combine multiple Angular CLI workspaces into one Nx workspace" type="documentation" url="/recipes/angular/migration/multiple" /%}
{% /cards %}

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

@ -8,7 +8,7 @@ Nx needs additional Git history available for `affected` to function correctly.
{% /callout %}
Unlike `GitHub Actions` and `CircleCI`, you don't have the metadata to help you track the last successful run on `main`. In the example below, the base is set to `HEAD~1` (for push) or branching point (for pull requests), but a more robust solution would be to tag an SHA in the main job once it succeeds and then use this tag as a base. You can also try [using the devops CLI within the pipeline yaml](/recipes/ci/azure-last-successful-commit). See the [nx-tag-successful-ci-run](https://github.com/nrwl/nx-tag-successful-ci-run) and [nx-set-shas](https://github.com/nrwl/nx-set-shas) (version 1 implements tagging mechanism) repositories for more information.
Unlike `GitHub Actions` and `CircleCI`, you don't have the metadata to help you track the last successful run on `main`. In the example below, the base is set to `HEAD~1` (for push) or branching point (for pull requests), but a more robust solution would be to tag an SHA in the main job once it succeeds and then use this tag as a base. You can also try [using the devops CLI within the pipeline yaml](#get-the-commit-of-the-last-successful-build). See the [nx-tag-successful-ci-run](https://github.com/nrwl/nx-tag-successful-ci-run) and [nx-set-shas](https://github.com/nrwl/nx-set-shas) (version 1 implements tagging mechanism) repositories for more information.
{% callout type="note" title="Tracking the origin branch" %}
@ -66,6 +66,89 @@ jobs:
The `main` job implements the CI workflow.
## Get the Commit of the Last Successful Build
The idea is to use [Azure Devops CLI](https://learn.microsoft.com/en-us/cli/azure/pipelines?view=azure-cli-latest)
directly in the [Pipeline Yaml](https://learn.microsoft.com/en-us/azure/devops/cli/azure-devops-cli-in-yaml?view=azure-devops)
First, we configure Devops CLI
```yaml
# Set Azure Devops default settings
- bash: az devops configure --defaults organization=$(System.TeamFoundationCollectionUri) project=$(System.TeamProject)
displayName: 'Configure Azure DevOps organization and project'
```
Then we can query the pipelines API (providing the auth token)
```yaml
# Get last successfully commit infos from Azure Devops
- bash: |
LAST_SHA=$(az pipelines build list --branch $(Build.SourceBranchName) --definition-ids $(System.DefinitionId) --result succeeded --top 1 --query "[0].triggerInfo.\"ci.sourceSha\"")
echo "Last successful commit SHA: $LAST_SHA"
echo "##vso[task.setvariable variable=BASE_SHA]$LAST_SHA"
displayName: 'Get last successful commit SHA'
env:
AZURE_DEVOPS_EXT_PAT: $(System.AccessToken)
```
We can target a specific build, in this example we specified:
- The branch (--branch)
- The pipeline Id (--definition-ids)
- The result type (--result)
- The number of result (-top)
By default the command returns an entire JSON object with all the information. But we can narrow it down to the desired result with the `--query` param that uses [JMESPath](https://jmespath.org/) format ([more details](https://learn.microsoft.com/en-us/cli/azure/query-azure-cli?tabs=concepts%2Cbash))
Finally we extract the result in a common [custom variable](https://learn.microsoft.com/en-us/azure/devops/pipelines/process/set-variables-scripts?view=azure-devops&tabs=bash) named `BASE_SHA` used later by `nx affected` commands
An example with a default SHA in case no commit is found:
```yaml {% fileName="azure-pipelines.yml" %}
trigger:
- main
pr:
- main
variables:
CI: 'true'
NX_BRANCH: $(Build.SourceBranchName)
DEFAULT_BASE_SHA: $(git rev-parse HEAD~1)
HEAD_SHA: $(git rev-parse HEAD)
jobs:
- job: main
pool:
vmImage: 'ubuntu-latest'
steps:
# Set Azure Devops CLI default settings
- bash: az devops configure --defaults organization=$(System.TeamFoundationCollectionUri) project=$(System.TeamProject)
displayName: 'Set default Azure DevOps organization and project'
# Get last successfull commit from Azure Devops CLI
- bash: |
LAST_SHA=$(az pipelines build list --branch $(Build.SourceBranchName) --definition-ids $(System.DefinitionId) --result succeeded --top 1 --query "[0].triggerInfo.\"ci.sourceSha\"")
if [ -z "$LAST_SHA" ]
then
LAST_SHA=$DEFAULT_BASE_SHA
fi
echo "Last successful commit SHA: $LAST_SHA"
echo "##vso[task.setvariable variable=BASE_SHA]$LAST_SHA"
displayName: 'Get last successful commit SHA'
env:
AZURE_DEVOPS_EXT_PAT: $(System.AccessToken)
- script: npm ci
- script: npx nx workspace-lint
- script: npx nx format:check
- script: npx nx affected --base=$(BASE_SHA) -t lint --parallel=3
- script: npx nx affected --base=$(BASE_SHA) -t test --parallel=3 --ci --code-coverage
- script: npx nx affected --base=$(BASE_SHA) -t build --parallel=3
```
{% nx-cloud-section %}
## Distributed CI with Nx Cloud

12
docs/shared/packages/angular/angular-plugin.md
View File

@ -12,7 +12,7 @@ within an Nx workspace. It provides:
{% callout type="note" title="Currently using the Angular CLI?" %}
You can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn
more [here](/recipes/adopting-nx/migration-angular).
more [here](/recipes/angular/migration/angular).
{% /callout %}
## Setting up the Angular plugin
@ -92,9 +92,7 @@ nx g @nx/angular:service my-service
## More Documentation
- [Angular Nx Tutorial](/angular-tutorial/1-code-generation)
- [Migrating from the Angular CLI](/recipes/adopting-nx/migration-angular)
- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)
- [Using NgRx](/recipes/other/misc-ngrx)
- [Using Data Persistence operators](/recipes/other/misc-data-persistence)
- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)
- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
- [Setup Module Federation with Angular and Nx](/more-concepts/faster-builds-with-module-federation)
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)

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

@ -51,7 +51,7 @@ Replace `your-app-name` with the app's name as defined in your `tsconfig.base.js
Run `nx e2e frontend-e2e` to execute e2e tests with Cypress.
You can run your e2e test against a production build by using the `production` [configuration](https://nx.dev/recipes/executors/use-executor-configurations#use-executor-configurations)
You can run your e2e test against a production build by using the `production` [configuration](https://nx.dev/plugin-features/use-task-executors#use-executor-configurations)
```shell
nx e2e frontend-e2e --configuration=production

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

@ -161,7 +161,7 @@ nx export my-new-app
Once you are ready to deploy your Next.js application, you have absolute freedom to choose any hosting provider that fits your needs.
You may know that the company behind Next.js, Vercel, has a great hosting platform offering that is developed in tandem with Next.js itself to offer a great overall developer and user experience. We have detailed [how to deploy your Next.js application to Vercel in a separate guide](/recipes/deployment/deploy-nextjs-to-vercel).
You may know that the company behind Next.js, Vercel, has a great hosting platform offering that is developed in tandem with Next.js itself to offer a great overall developer and user experience. We have detailed [how to deploy your Next.js application to Vercel in a separate guide](/recipes/react/deploy-nextjs-to-vercel).
## More Documentation

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

@ -157,7 +157,7 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
### Configure webpack for Module Federation
If you use the [Module Federation](/recipes/module-federation/faster-builds) support from `@nx/angular` or `@nx/react` then
If you use the [Module Federation](/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" %}

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

@ -165,7 +165,7 @@ module.exports = composePlugins(
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](/recipes/module-federation/faster-builds).
For more information, refer to the [Module Federation recipe](/more-concepts/faster-builds-with-module-federation).
### Options

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

@ -103,3 +103,70 @@ If defining a new target that needs to run a single shell command, there is a sh
```
For more info, see the [run-commands documentation](/packages/nx/executors/run-commands)
## Use Executor Configurations
The `configurations` property provides extra sets of values that will be merged into the options map.
```json {% fileName="project.json" %}
{
"build": {
"executor": "@nx/js:tsc",
"outputs": ["{workspaceRoot}/dist/libs/mylib"],
"dependsOn": ["^build"],
"options": {
"tsConfig": "libs/mylib/tsconfig.lib.json",
"main": "libs/mylib/src/main.ts"
},
"configurations": {
"production": {
"tsConfig": "libs/mylib/tsconfig-prod.lib.json"
}
}
}
}
```
You can select a configuration like this: `nx build mylib --configuration=production`
or `nx run mylib:build:production`.
The following code snippet shows how the executor options get constructed:
```javascript
require(`@nx/jest`).executors['jest']({
...options,
...selectedConfiguration,
...commandLineArgs,
}); // Pseudocode
```
The selected configuration adds/overrides the default options, and the provided command line args add/override the
configuration options.
### Default Configuration
When using multiple configurations for a given target, it's helpful to provide a default configuration.
For example, running e2e tests for multiple environments. By default it would make sense to use a `dev` configuration for day to day work, but having the ability to run against an internal staging environment for the QA team.
```json {% fileName="project.json" %}
{
"e2e": {
"executor": "@nx/cypress:cypress",
"options": {
"cypressConfig": "apps/my-app-e2e/cypress.config.ts"
},
"configurations": {
"dev": {
"devServerTarget": "my-app:serve"
},
"qa": {
"baseUrl": "https://some-internal-url.example.com"
}
},
"defaultConfiguration": "dev"
}
}
```
When running `nx e2e my-app-e2e`, the _dev_ configuration will be used. In this case using the local dev server for `my-app`.
You can always run the other configurations by explicitly providing the configuration i.e. `nx e2e my-app-e2e --configuration=qa` or `nx run my-app-e2e:e2e:qa`

4
docs/shared/react-standalone-tutorial/react-standalone.md
View File

@ -784,8 +784,8 @@ Learn more about how to [enforce module boundaries](/core-features/enforce-proje
Here's some more things you can dive into next:
- Learn more about the [underlying mental model of Nx](/concepts/mental-model)
- Learn how to [migrate your CRA app to Nx](/recipes/adopting-nx/migration-cra)
- [Learn how to setup Tailwind](/recipes/other/using-tailwind-css-in-react)
- Learn how to [migrate your CRA app to Nx](/recipes/react/migration-cra)
- [Learn how to setup Tailwind](/recipes/react/using-tailwind-css-in-react)
- [Setup Storybook for our shared UI library](/packages/storybook/documents/overview-react)
- [Speed up CI: Run only tasks for project that got changed](/core-features/run-tasks#run-tasks-affected-by-a-pr)]
- [Speed up CI: Share your cache](/core-features/share-your-cache)]

82
docs/shared/recipes/azure-last-successful-commit.md
View File

@ -1,82 +0,0 @@
# Get the Commit of the Last Successful Build in Azure Pipelines
The idea is to use [Azure Devops CLI](https://learn.microsoft.com/en-us/cli/azure/pipelines?view=azure-cli-latest)
directly in the [Pipeline Yaml](https://learn.microsoft.com/en-us/azure/devops/cli/azure-devops-cli-in-yaml?view=azure-devops)
First, we configure Devops CLI
```yaml
# Set Azure Devops default settings
- bash: az devops configure --defaults organization=$(System.TeamFoundationCollectionUri) project=$(System.TeamProject)
displayName: 'Configure Azure DevOps organization and project'
```
Then we can query the pipelines API (providing the auth token)
```yaml
# Get last successfully commit infos from Azure Devops
- bash: |
LAST_SHA=$(az pipelines build list --branch $(Build.SourceBranchName) --definition-ids $(System.DefinitionId) --result succeeded --top 1 --query "[0].triggerInfo.\"ci.sourceSha\"")
echo "Last successful commit SHA: $LAST_SHA"
echo "##vso[task.setvariable variable=BASE_SHA]$LAST_SHA"
displayName: 'Get last successful commit SHA'
env:
AZURE_DEVOPS_EXT_PAT: $(System.AccessToken)
```
We can target a specific build, in this example we specified:
- The branch (--branch)
- The pipeline Id (--definition-ids)
- The result type (--result)
- The number of result (-top)
By default the command returns an entire JSON object with all the information. But we can narrow it down to the desired result with the `--query` param that uses [JMESPath](https://jmespath.org/) format ([more details](https://learn.microsoft.com/en-us/cli/azure/query-azure-cli?tabs=concepts%2Cbash))
Finally we extract the result in a common [custom variable](https://learn.microsoft.com/en-us/azure/devops/pipelines/process/set-variables-scripts?view=azure-devops&tabs=bash) named `BASE_SHA` used later by `nx affected` commands
An example with a default SHA in case no commit is found:
```yaml {% fileName="azure-pipelines.yml" %}
trigger:
- main
pr:
- main
variables:
CI: 'true'
NX_BRANCH: $(Build.SourceBranchName)
DEFAULT_BASE_SHA: $(git rev-parse HEAD~1)
HEAD_SHA: $(git rev-parse HEAD)
jobs:
- job: main
pool:
vmImage: 'ubuntu-latest'
steps:
# Set Azure Devops CLI default settings
- bash: az devops configure --defaults organization=$(System.TeamFoundationCollectionUri) project=$(System.TeamProject)
displayName: 'Set default Azure DevOps organization and project'
# Get last successfull commit from Azure Devops CLI
- bash: |
LAST_SHA=$(az pipelines build list --branch $(Build.SourceBranchName) --definition-ids $(System.DefinitionId) --result succeeded --top 1 --query "[0].triggerInfo.\"ci.sourceSha\"")
if [ -z "$LAST_SHA" ]
then
LAST_SHA=$DEFAULT_BASE_SHA
fi
echo "Last successful commit SHA: $LAST_SHA"
echo "##vso[task.setvariable variable=BASE_SHA]$LAST_SHA"
displayName: 'Get last successful commit SHA'
env:
AZURE_DEVOPS_EXT_PAT: $(System.AccessToken)
- script: npm ci
- script: npx nx workspace-lint
- script: npx nx format:check
- script: npx nx affected --base=$(BASE_SHA) -t lint --parallel=3
- script: npx nx affected --base=$(BASE_SHA) -t test --parallel=3 --ci --code-coverage
- script: npx nx affected --base=$(BASE_SHA) -t build --parallel=3
```

2
docs/shared/recipes/deployment/node-server-fly-io.md
View File

@ -72,7 +72,7 @@ That's is! Our server is now deployed for the world to use.
You can also automate the deployment by adding a target to your project. In addition, that allows us to leverage the Nx [task pipeline](/concepts/task-pipeline-configuration) to make sure we first run the `build` and then the `deploy`.
By using [Nx run-commands](/recipes/executors/run-commands-executor), you can add a `deploy` target to the project. Go to the project's `project.json` file (under `"targets"`) and add the following:
By using [Nx run-commands](/recipes/tips-n-tricks/run-commands-executor), you can add a `deploy` target to the project. Go to the project's `project.json` file (under `"targets"`) and add the following:
```json {% fileName="project.json" %}
"deploy": {

9
docs/shared/recipes/export-project-graph.md
View File

@ -1,9 +0,0 @@
## Export Project Graph to JSON
If you prefer to analyze the underlying data of the project graph with a script or some other tool, you can run:
```shell
nx graph --file=output.json
```
This will give you all the information that is used to create the project graph visualization.

2
docs/shared/recipes/module-federation-with-ssr.md
View File

@ -133,5 +133,5 @@ To serve the `store` application and watch for changes on the `checkout` applica
To learn more about Module Federation, we have some resources you might find useful:
- [Guide: Faster Builds with Module Federation](/recipes/module-federation/faster-builds)
- [Guide: Faster Builds with Module Federation](/more-concepts/faster-builds-with-module-federation)
- [Video: Speed up your Angular serve and build times with Module Federation and Nx](https://www.youtube.com/watch?v=JkcaGzhRjkc)

31
docs/shared/recipes/set-up-a-new-workspace.md
View File

@ -1,31 +0,0 @@
# Set up a New Nx Workspace
Run the following command to create a new workspace.
```shell
# pass @latest in case npx cached an older version of create-nx-workspace
npx create-nx-workspace@latest
```
When creating a workspace, you will have to choose a preset, which will preconfigure a few things for you.
```shell
# create an empty workspace set up for building applications
npx create-nx-workspace --preset=apps
# create an empty workspace set up for building packages
npx create-nx-workspace --preset=core
# create an empty workspace set up for building packages with the @nx/js plugin installed
npx create-nx-workspace --preset=ts
```
Some presets set up applications, e2e tests, etc.
```shell
npx create-nx-workspace --preset=react-standalone
npx create-nx-workspace --preset=react-native
npx create-nx-workspace --preset=angular
```
For more information about possible options see the [create-nx-workspace command](/packages/nx/documents/create-nx-workspace).

65
docs/shared/recipes/standalone-ngrx-apis.md
View File

@ -1,65 +0,0 @@
# Standalone APIs with NgRx and Angular 15
Standalone APIs were added to version 15 of [NgRx](https://ngrx.io), allowing for easier usage of NgRx with Standalone Components in Angular.
They must be added to routes definitions as they need to be added to the Environment Injector (https://ngrx.io/api/store/provideStore).
Nx will use these Standalone APIs when:
1. Standalone APIs are supported
2. Angular 15 is installed
This guide will show you how to leverage this using the NgRx generator.
{% callout type="check" title="Prerequisites" %}
Before following along with this guide, ensure you have:
1. An Nx >= 15.6.0 Workspace with `@nx/angular` installed
2. Angular 15 must be installed
{% /callout %}
## Steps
1. Generate an Angular application with Standalone Components and routing
```bash
nx g @nx/angular:app testapp --standalone --routing
```
2. Generate NgRx Root State
{% tabs %}
{% tab label="Nx Standalone Repo" %}
```bash
nx g @nx/angular:ngrx --root --parent=testapp/src/main.ts
```
{% /tab %}
{% tab label="Nx Integrated Monorepo" %}
```bash
nx g @nx/angular:ngrx --root --parent=apps/testapp/src/main.ts
```
{% /tab %}
{% /tabs %}
3. Generate NgRx Feature State
{% tabs %}
{% tab label="Nx Standalone Repo" %}
```bash
nx g @nx/angular:ngrx users --parent=testapp/src/app/app.routes.ts
```
{% /tab %}
{% tab label="Nx Integrated Monorepo" %}
```bash
nx g @nx/angular:ngrx users --parent=apps/testapp/src/app/app.routes.ts
```
{% /tab %}
{% /tabs %}

66
docs/shared/recipes/use-executor-configurations.md
View File

@ -1,66 +0,0 @@
# Use Executor Configurations
The `configurations` property provides extra sets of values that will be merged into the options map.
```json {% fileName="project.json" %}
{
"build": {
"executor": "@nx/js:tsc",
"outputs": ["{workspaceRoot}/dist/libs/mylib"],
"dependsOn": ["^build"],
"options": {
"tsConfig": "libs/mylib/tsconfig.lib.json",
"main": "libs/mylib/src/main.ts"
},
"configurations": {
"production": {
"tsConfig": "libs/mylib/tsconfig-prod.lib.json"
}
}
}
}
```
You can select a configuration like this: `nx build mylib --configuration=production`
or `nx run mylib:build:production`.
The following code snippet shows how the executor options get constructed:
```javascript
require(`@nx/jest`).executors['jest']({
...options,
...selectedConfiguration,
...commandLineArgs,
}); // Pseudocode
```
The selected configuration adds/overrides the default options, and the provided command line args add/override the
configuration options.
## Default Configuration
When using multiple configurations for a given target, it's helpful to provide a default configuration.
For example, running e2e tests for multiple environments. By default it would make sense to use a `dev` configuration for day to day work, but having the ability to run against an internal staging environment for the QA team.
```json {% fileName="project.json" %}
{
"e2e": {
"executor": "@nx/cypress:cypress",
"options": {
"cypressConfig": "apps/my-app-e2e/cypress.config.ts"
},
"configurations": {
"dev": {
"devServerTarget": "my-app:serve"
},
"qa": {
"baseUrl": "https://some-internal-url.example.com"
}
},
"defaultConfiguration": "dev"
}
}
```
When running `nx e2e my-app-e2e`, the _dev_ configuration will be used. In this case using the local dev server for `my-app`.
You can always run the other configurations by explicitly providing the configuration i.e. `nx e2e my-app-e2e --configuration=qa` or `nx run my-app-e2e:e2e:qa`

4
docs/shared/reference/environment-variables.md
View File

@ -3,7 +3,7 @@
The following environment variables are ones that you can set to change the behavior of Nx in different environments.
| Property | Type | Description |
| -------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| NX_BASE | string | The default base branch to use when calculating the affected projects. Can be overridden on the command line with `--base`. |
| NX_CACHE_DIRECTORY | string | The cache for task outputs is stored in `node_modules/.cache/nx` by default. Set this variable to use a different directory. |
| NX_CACHE_PROJECT_GRAPH | boolean | If set to `false`, disables the project graph cache. Most useful when developing a plugin that modifies the project graph. |
@ -11,7 +11,7 @@ The following environment variables are ones that you can set to change the beha
| NX_DEFAULT_PROJECT | string | The default project used for commands which require a project. e.g. `nx build`, `nx g component`, etc. |
| NX_HEAD | string | The default head branch to use when calculating the affected projects. Can be overridden on the command line with `--head`. |
| NX_PERF_LOGGING | boolean | If set to `true`, will print debug information useful for for profiling executors and Nx itself |
| NX_PROFILE | string | Prepend `NX_PROFILE=profile.json` before running targets with Nx to generate a file that be [loaded in Chrome dev tools](/recipes/other/performance-profiling) to visualize the performance of Nx across multiple processes. |
| NX_PROFILE | string | Prepend `NX_PROFILE=profile.json` before running targets with Nx to generate a file that be [loaded in Chrome dev tools](/recipes/troubleshooting/performance-profiling) to visualize the performance of Nx across multiple processes. |
| NX_PROJECT_GRAPH_CACHE_DIRECTORY | string | The project graph cache is stored in `node_modules/.cache/nx` by default. Set this variable to use a different directory. |
| NX_PROJECT_GRAPH_MAX_WORKERS | number | The number of workers to use when calculating the project graph. |
| NX_RUNNER | string | The name of task runner from the config to use. Can be overridden on the command line with `--runner`. Not read if NX_TASKS_RUNNER is set. |

6
docs/shared/reference/glossary.md
View File

@ -48,15 +48,15 @@ The terminal output and any file artifacts created by running a [task](#task). T
### Command
Anything you run in the terminal. An example commmand that invokes a [task](#task) is `nx build my-app`.
Anything you run in the terminal. An example command that invokes a [task](#task) is `nx build my-app`.
> See: [Run Tasks](/core-features/run-tasks)
### Configurations
A set of preconfigured options for a [target](#target) that should be enabled all together. For example, a `production` configuration would set all the options needed for a build that could be deployed to production.
A set of preconfigured options for a [target](#target) that should be enabled altogether. For example, a `production` configuration would set all the options needed for a build that could be deployed to production.
> See: [Use Executor Configurations](/recipes/executors/use-executor-configurations)
> See: [Use Executor Configurations](/plugin-features/use-task-executors#use-executor-configurations)
### Distributed Cache

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

@ -119,108 +119,97 @@
- Recipes
- [Getting Started](/recipes/getting-started)
- [Set up a new workspace](/recipes/getting-started/set-up-a-new-workspace)
- [Nx Console](/recipes/nx-console)
- [Nx Console Telemetry](/recipes/nx-console/console-telemetry)
- [Nx Console Generate Command](/recipes/nx-console/console-generate-command)
- [Nx Console Run Command](/recipes/nx-console/console-run-command)
- [Nx Console Add Dependency Command](/recipes/nx-console/console-add-dependency-command)
- [Nx Console Project Pane](/recipes/nx-console/console-project-pane)
- [Nx Console Keyboard Shortcuts](/recipes/nx-console/console-shortcuts)
- [CI](/recipes/ci)
- [CI Setup](/recipes/ci/ci-setup)
- [Prepare applications for deployment via CI](/recipes/ci/ci-deployment)
- [Setting up Azure Pipelines](/recipes/ci/monorepo-ci-azure)
- [Find the Last Successful Commit in Azure Pipelines](/recipes/ci/azure-last-successful-commit)
- [Setting up CircleCI](/recipes/ci/monorepo-ci-circle-ci)
- [Setting up GitHub Actions](/recipes/ci/monorepo-ci-github-actions)
- [Setting up Jenkins](/recipes/ci/monorepo-ci-jenkins)
- [Setting up GitLab](/recipes/ci/monorepo-ci-gitlab)
- [Setting up Bitbucket](/recipes/ci/monorepo-ci-bitbucket-pipelines)
- [Troubleshooting Nx Install Issues](/recipes/ci/troubleshoot-nx-install-issues)
- [Adopting Nx](/recipes/adopting-nx)
- [Migrating to Nx](/recipes/adopting-nx)
- [NPM/Yarn/PNPM workspaces](/recipes/adopting-nx/adding-to-monorepo)
- [Add to any Project](/recipes/adopting-nx/adding-to-existing-project)
- [From CRA](/recipes/adopting-nx/migration-cra)
- [From Angular CLI](/recipes/adopting-nx/migration-angular)
- [Nx and Lerna](/recipes/adopting-nx/lerna-and-nx)
- [From AngularJS](/recipes/adopting-nx/migration-angularjs)
- [Preserving Git Histories](/recipes/adopting-nx/preserving-git-histories)
- [Manual migration](/recipes/adopting-nx/manual)
- [Adopting Nx From Angular CLI](/recipes/adopting-nx-angular)
- [From Angular CLI](/recipes/adopting-nx-angular/migration-angular)
- [From Angular CLI to Integrated](/recipes/adopting-nx-angular/angular-integrated)
- [From Angular CLI Manually](/recipes/adopting-nx-angular/angular-manual)
- [From Multiple Angular CLI Repos](/recipes/adopting-nx-angular/angular-multiple)
- [Executors](/recipes/executors)
- [Use Executor Configurations](/recipes/executors/use-executor-configurations)
- [Running Custom Commands](/recipes/executors/run-commands-executor)
- [Environment Variables](/recipes/environment-variables)
- [Define Environment Variables](/recipes/environment-variables/define-environment-variables)
- [Use Environment Variables in React](/recipes/environment-variables/use-environment-variables-in-react)
- [Use Environment Variables in Angular](/recipes/environment-variables/use-environment-variables-in-angular)
- [Module Federation and Micro Frontends](/recipes/module-federation)
- [Faster Builds with Module Federation](/recipes/module-federation/faster-builds)
- [Setup Module Federation with SSR for Angular and React](/recipes/module-federation/module-federation-with-ssr)
- [Advanced Micro Frontends with Angular using Dynamic Federation](/recipes/module-federation/dynamic-module-federation-with-angular)
- [Nx Micro-Frontend Example](/recipes/module-federation/nx-examples)
- [Angular](/recipes/angular)
- [Migration](/recipes/angular/migration)
- [Migrating from Angular CLI](/recipes/angular/migration/angular)
- [Migrating From Multiple Angular CLI Repos](/recipes/angular/migration/angular-multiple)
- [Migrating Angular Application manually](/recipes/angular/migration/angular-manual)
- [Migrating from AngularJS](/recipes/angular/migration/angularjs)
- [Use Environment Variables in Angular](/recipes/angular/use-environment-variables-in-angular)
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)
- [Setup Module Federation with SSR for Angular](/recipes/angular/module-federation-with-ssr)
- [Advanced Micro Frontends with Angular using Dynamic Federation](/recipes/angular/dynamic-module-federation-with-angular)
- [Setup incremental builds for Angular applications](/recipes/angular/setup-incremental-builds-angular)
- [React](/recipes/react)
- [Migrating from CRA](/recipes/react/migration-cra)
- [React 18 Migration](/recipes/react/react-18)
- [React Native with Nx](/recipes/react/react-native)
- [Remix with Nx](/recipes/react/remix)
- [Use Environment Variables in React](/recipes/react/use-environment-variables-in-react)
- [Using Tailwind CSS in React](/recipes/react/using-tailwind-css-in-react)
- [Adding Images, Fonts, and Files](/recipes/react/adding-assets-react)
- [Setup Module Federation with SSR for React](/recipes/react/module-federation-with-ssr)
- [Deploying Next.js applications to Vercel](/recipes/react/deploy-nextjs-to-vercel)
- [Node](/recipes/node)
- [Deploying a Node App to Fly.io](/recipes/node/node-server-fly-io)
- [Add and Deploy Netlify Edge Functions with Node](/recipes/node/node-serverless-functions-netlify)
- [Deploying AWS lambda in Node.js](/recipes/node/node-aws-lambda)
- [Storybook](/recipes/storybook)
- [Publishing Storybook: One main Storybook instance for all projects](/recipes/storybook/one-storybook-for-all)
- [Publishing Storybook: One Storybook instance per scope](/recipes/storybook/one-storybook-per-scope)
- [Publishing Storybook: One main Storybook instance using Storybook Composition](/recipes/storybook/one-storybook-with-composition)
- [Deployment](/recipes/deployment)
- [Deploying a Node App to Fly.io](/recipes/deployment/node-server-fly-io)
- [Add and Deploy Netlify Edge Functions with Node](/recipes/deployment/node-serverless-functions-netlify)
- [Deploying AWS lambda in Node.js](/recipes/deployment/node-aws-lambda)
- [Serverless deployment with Deno Deploy](/recipes/deployment/deno-deploy)
- [Add and Deploy Netlify Edge Functions with Deno](/recipes/deployment/deno-netlify-functions)
- [Deploying Next.js applications to Vercel](/recipes/deployment/deploy-nextjs-to-vercel)
- [Database](/recipes/database)
- [Using Prisma with NestJS](/recipes/database/nestjs-prisma)
- [Using Mongo with Fastify](/recipes/database/mongo-fastify)
- [Using Redis with Fastify](/recipes/database/redis-fastify)
- [Using Postgres with Fastify](/recipes/database/postgres-fastify)
- [Using PlanetScale with Serverless Fastify](/recipes/database/serverless-fastify-planetscale)
- [One main Storybook instance for all projects](/recipes/storybook/one-storybook-for-all)
- [One Storybook instance per scope](/recipes/storybook/one-storybook-per-scope)
- [One main Storybook instance using Storybook Composition](/recipes/storybook/one-storybook-with-composition)
- [Enforce Module Boundaries](/recipes/enforce-module-boundaries)
- [Ban Dependencies with Certain Tags](/recipes/enforce-module-boundaries/ban-dependencies-with-tags)
- [Tag in Multiple Dimensions](/recipes/enforce-module-boundaries/tag-multiple-dimensions)
- [Ban External Imports](/recipes/enforce-module-boundaries/ban-external-imports)
- [Tags Allow List](/recipes/enforce-module-boundaries/tags-allow-list)
- [CI](/recipes/ci)
- [CI Setup](/recipes/ci/ci-setup)
- [Prepare applications for deployment via CI](/recipes/ci/ci-deployment)
- [Setting up Azure Pipelines](/recipes/ci/monorepo-ci-azure)
- [Setting up CircleCI](/recipes/ci/monorepo-ci-circle-ci)
- [Setting up GitHub Actions](/recipes/ci/monorepo-ci-github-actions)
- [Setting up Jenkins](/recipes/ci/monorepo-ci-jenkins)
- [Setting up GitLab](/recipes/ci/monorepo-ci-gitlab)
- [Setting up Bitbucket](/recipes/ci/monorepo-ci-bitbucket-pipelines)
- [Nx Console](/recipes/nx-console)
- [Telemetry](/recipes/nx-console/console-telemetry)
- [Generate Command](/recipes/nx-console/console-generate-command)
- [Run Command](/recipes/nx-console/console-run-command)
- [Add Dependency Command](/recipes/nx-console/console-add-dependency-command)
- [Project Pane](/recipes/nx-console/console-project-pane)
- [Keyboard Shortcuts](/recipes/nx-console/console-shortcuts)
- [Troubleshooting](/recipes/troubleshooting)
- [Resolve Circular Dependencies](/recipes/troubleshooting/resolve-circular-dependencies)
- [Troubleshooting Nx Install Issues](/recipes/troubleshooting/troubleshoot-nx-install-issues)
- [Troubleshoot Cache Misses](/recipes/troubleshooting/troubleshoot-cache-misses)
- [Unknown Local Cache Error](/recipes/troubleshooting/unknown-local-cache)
- [Profiling Build Performance](/recipes/troubleshooting/performance-profiling)
- [Tips and tricks](/recipes/tips-n-tricks)
- [Configuring ESLint with Typescript](/recipes/tips-n-tricks/eslint)
- [Define Environment Variables](/recipes/tips-n-tricks/define-environment-variables)
- [Configuring Browser Support](/recipes/tips-n-tricks/browser-support)
- [Include Assets in Build](/recipes/tips-n-tricks/include-assets-in-build)
- [Include All package.json Files as Projects](/recipes/tips-n-tricks/include-all-packagejson)
- [Identify Dependencies Between Folders](/recipes/tips-n-tricks/identify-dependencies-between-folders)
- [Run Root-Level NPM Scripts with Nx](/recipes/tips-n-tricks/root-level-scripts)
- [Disable Graph Links Created from Analyzing Source Files](/recipes/tips-n-tricks/analyze-source-files)
- [Workspace Watching](/recipes/tips-n-tricks/workspace-watching)
- [Convert from a Standalone Repository to an Integrated Repository](/recipes/tips-n-tricks/standalone-to-integrated)
- [Use JavaScript instead TypeScript](/recipes/tips-n-tricks/js-and-ts)
- [Altering Migration Process](/recipes/tips-n-tricks/advanced-update)
- [Running Custom Commands](/recipes/tips-n-tricks/run-commands-executor)
- [Other](/recipes/other)
- [Serverless deployment with Deno Deploy](/recipes/other/deno-deploy)
- [Add and Deploy Netlify Edge Functions with Deno](/recipes/other/deno-netlify-functions)
- [Rescope Packages from @nrwl to @nx](/recipes/other/rescope)
- [Example Repos](/recipes/example-repos)
- [Powering Up React Development With Nx](/recipes/example-repos/react-nx)
- [Using Apollo GraphQL](/recipes/example-repos/apollo-react)
- [Using Prisma with NestJS](/recipes/example-repos/nestjs-prisma)
- [Using Mongo with Fastify](/recipes/example-repos/mongo-fastify)
- [Using Redis with Fastify](/recipes/example-repos/redis-fastify)
- [Using Postgres with Fastify](/recipes/example-repos/postgres-fastify)
- [Using PlanetScale with Serverless Fastify](/recipes/example-repos/serverless-fastify-planetscale)
- [Large Repo and Caching](/recipes/example-repos/caching)
- [Large Repo and DTE](/recipes/example-repos/dte)
- [Managing Your Nx Repository](/recipes/managing-repository)
- [Run Root-Level NPM Scripts with Nx](/recipes/managing-repository/root-level-scripts)
- [Disable Graph Links Created from Analyzing Source Files](/recipes/managing-repository/analyze-source-files)
- [Workspace Watching](/recipes/managing-repository/workspace-watching)
- [Advanced Update Process](/recipes/managing-repository/advanced-update)
- [Convert from a Standalone Repository to an Integrated Repository](/recipes/managing-repository/standalone-to-integrated)
- [JavaScript and TypeScript](/recipes/managing-repository/js-and-ts)
- [Other](/recipes/other)
- [React Native with Nx](/recipes/other/react-native)
- [Remix with Nx](/recipes/other/remix)
- [Adding Images, Fonts, and Files](/recipes/other/adding-assets-react)
- [Setup incremental builds for Angular applications](/recipes/other/setup-incremental-builds-angular)
- [Profiling Build Performance](/recipes/other/performance-profiling)
- [Using ESLint in Nx Workspaces](/recipes/other/eslint)
- [Configuring Browser Support](/recipes/other/browser-support)
- [Using Tailwind CSS in React](/recipes/other/using-tailwind-css-in-react)
- [React 18 Migration](/recipes/other/react-18)
- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)
- [Using NgRx](/recipes/other/misc-ngrx)
- [Using Data Persistence operators](/recipes/other/misc-data-persistence)
- [Troubleshoot Cache Misses](/recipes/other/troubleshoot-cache-misses)
- [Export Project Graph](/recipes/other/export-project-graph)
- [Resolve Circular Dependencies](/recipes/other/resolve-circular-dependencies)
- [Include All package.json Files as Projects](/recipes/other/include-all-packagejson)
- [Include Assets in Build](/recipes/other/include-assets-in-build)
- [Identify Dependencies Between Folders](/recipes/other/identify-dependencies-between-folders)
- [Rescope Packages from @nrwl to @nx](/recipes/other/rescope)
- [Standalone NgRx APIs](/recipes/other/standalone-ngrx-apis)
- [Unknown Local Cache Error](/recipes/other/unknown-local-cache)
- [Nx Micro-Frontend Example](/recipes/example-repos/mfe)
- Extending-nx

2
nx-dev/nx-dev-e2e/src/e2e/recipes.cy.ts
View File

@ -4,7 +4,7 @@ describe('nx-dev: Recipes pages', () => {
it('should list related recipes based on tags', () => {
const { map, uniq } = Cypress._;
cy.visit('/recipes/deployment/deno-deploy');
cy.visit('/recipes/other/deno-deploy');
// All text content has to be different
cy.get('[data-document="related"] > article > ul > li').should(($list) => {

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

@ -367,8 +367,6 @@ const recipesUrls = {
'/recipes/other/dte': '/recipes/example-repos/dte',
'/recipes/other/deploy-nextjs-to-vercel':
'/recipes/deployment/deploy-nextjs-to-vercel',
'/recipes/other/azure-last-successful-commit':
'/recipes/ci/azure-last-successful-commit',
'/recipes/other/root-level-scripts':
'/recipes/managing-repository/root-level-scripts',
'/recipes/other/analyze-source-files':
@ -720,6 +718,114 @@ const pluginsToExtendNx = {
'/plugins/:path*': '/extending-nx/:path*',
};
// (meeroslav) 2023-07-20
const latestRecipesRefactoring = {
// removed
'/recipes/getting-started/set-up-a-new-workspace':
'/getting-started/installation',
'/recipes/other/misc-ngrx': '/packages/angular/generators/ngrx', // 486 views
'/recipes/other/misc-data-persistence': '/packages/angular/generators/ngrx', // 200 views
'/recipes/other/standalone-ngrx-apis': '/packages/angular/generators/ngrx', //47 views -> can be freely removed
'/recipes/other/export-project-graph': '/recipes/core-features/explore-graph', // 20 views -> contents moved to explore-graph
'/recipes/executors/use-executor-configurations':
'/plugin-features/use-task-executors', // --> contents are moved over to use-task-executors
// ci
'/recipes/other/azure-last-successful-commit':
'/recipes/ci/azure-last-successful-commit',
// angular
'/recipes/adopting-nx/migration-angular':
'/recipes/angular/migration/angular',
'/recipes/adopting-nx-angular/angular-integrated':
'/recipes/angular/migration/angular',
'/recipes/adopting-nx-angular/angular-manual':
'/recipes/angular/migration/manual',
'/recipes/adopting-nx-angular/angular-multiple':
'/recipes/angular/migration/multiple',
'/recipes/adopting-nx/migration-angularjs':
'/recipes/angular/migration/angularjs',
'/recipes/environment-variables/use-environment-variables-in-angular':
'/recipes/angular/use-environment-variables-in-angular',
'/recipes/other/using-tailwind-css-with-angular-projects':
'/recipes/angular/using-tailwind-css-with-angular-projects',
'/recipes/module-federation/dynamic-module-federation-with-angular':
'/recipes/angular/dynamic-module-federation-with-angular',
'/recipes/other/setup-incremental-builds-angular':
'/recipes/angular/setup-incremental-builds-angular',
// react
'/recipes/adopting-nx/migration-cra': '/recipes/react/migration-cra',
'/recipes/other/react-18': '/recipes/react/react-18',
'/recipes/other/react-native': '/recipes/react/react-native',
'/recipes/other/remix': '/recipes/react/remix',
'/recipes/environment-variables/use-environment-variables-in-react':
'/recipes/react/use-environment-variables-in-react',
'/recipes/other/using-tailwind-css-in-react':
'/recipes/react/using-tailwind-css-in-react',
'/recipes/deployment/deploy-nextjs-to-vercel':
'/recipes/react/deploy-nextjs-to-vercel',
'/recipes/module-federation/module-federation-with-ssr':
'/recipes/react/module-federation-with-ssr',
'/recipes/other/adding-assets-react': '/recipes/react/adding-assets',
// node
'/recipes/deployment/node-server-fly-io': '/recipes/node/node-server-fly-io',
'/recipes/deployment/node-serverless-functions-netlify':
'/recipes/node/node-serverless-functions-netlify',
'/recipes/deployment/node-aws-lambda': '/recipes/node/node-aws-lambda',
// examples
'/recipes/module-federation/nx-examples': '/recipes/example-repos/mfe',
'/recipes/database/nestjs-prisma': '/recipes/example-repos/nestjs-prisma',
'/recipes/database/mongo-fastify': '/recipes/example-repos/mongo-fastify',
'/recipes/database/redis-fastify': '/recipes/example-repos/redis-fastify',
'/recipes/database/postgres-fastify':
'/recipes/example-repos/postgres-fastify',
'/recipes/database/serverless-fastify-planetscale':
'/recipes/example-repos/serverless-fastify-planetscale',
// troubleshooting
'/recipes/other/resolve-circular-dependencies':
'/recipes/troubleshooting/resolve-circular-dependencies',
'/recipes/ci/troubleshoot-nx-install-issues':
'/recipes/troubleshooting/troubleshoot-nx-install-issues',
'/recipes/other/troubleshoot-cache-misses':
'/recipes/troubleshooting/troubleshoot-cache-misses',
'/recipes/other/unknown-local-cache':
'/recipes/troubleshooting/unknown-local-cache',
'/recipes/other/performance-profiling':
'/recipes/troubleshooting/performance-profiling',
// tips and tricks
'/recipes/environment-variables/define-environment-variables':
'/recipes/tips-n-tricks/define-environment-variables',
'/recipes/other/eslint': '/recipes/tips-n-tricks/eslint',
'/recipes/other/browser-support': '/recipes/tips-n-tricks/browser-support',
'/recipes/other/include-assets-in-build':
'/recipes/tips-n-tricks/include-assets-in-build',
'/recipes/other/include-all-packagejson':
'/recipes/tips-n-tricks/include-all-packagejson',
'/recipes/other/identify-dependencies-between-folders':
'/recipes/tips-n-tricks/identify-dependencies-between-folders',
'/recipes/managing-repository/root-level-scripts':
'/recipes/tips-n-tricks/root-level-scripts',
'/recipes/managing-repository/analyze-source-files':
'/recipes/tips-n-tricks/analyze-source-files',
'/recipes/managing-repository/workspace-watching':
'/recipes/tips-n-tricks/workspace-watching',
'/recipes/managing-repository/standalone-to-integrated':
'/recipes/tips-n-tricks/standalone-to-integrated',
'/recipes/managing-repository/js-and-ts': '/recipes/tips-n-tricks/js-and-ts',
'/recipes/managing-repository/advanced-update':
'/recipes/tips-n-tricks/advanced-update',
'/recipes/executors/run-commands-executor':
'/recipes/tips-n-tricks/run-commands-executor',
// ci
'/recipes/ci/azure-last-successful-commit': '/recipes/ci/monorepo-ci-azure',
// other
'/recipes/deployment/deno-deploy': '/recipes/other/deno-deploy',
'/recipes/deployment/deno-netlify-functions':
'/recipes/other/deno-netlify-functions',
// nx concepts
'/recipes/module-federation/faster-builds':
'/more-concepts/faster-builds-with-module-federation',
};
/**
* Public export API
*/
@ -743,4 +849,5 @@ module.exports = {
movePluginFeaturesToCore,
makeMoreConceptsSubmenu,
pluginsToExtendNx,
latestRecipesRefactoring,
};

2
packages/nx/src/command-line/init/implementation/angular/index.ts
View File

@ -65,7 +65,7 @@ export async function addNxToAngularCliRepo(options: Options) {
}
printFinalMessage({
learnMoreLink: 'https://nx.dev/recipes/adopting-nx/migration-angular',
learnMoreLink: 'https://nx.dev/recipes/angular/migration/angular',
bodyLines: [
'- Execute "npx nx build" twice to see the computation caching in action.',
],

2
packages/nx/src/command-line/init/implementation/angular/legacy-angular-versions.ts
View File

@ -109,7 +109,7 @@ export async function getLegacyMigrationFunctionIfApplicable(
}
printFinalMessage({
learnMoreLink: 'https://nx.dev/recipes/adopting-nx/migration-angular',
learnMoreLink: 'https://nx.dev/recipes/angular/migration/angular',
bodyLines: [
'- Execute "npx nx build" twice to see the computation caching in action.',
],

2
packages/nx/src/command-line/init/implementation/react/index.ts
View File

@ -144,7 +144,7 @@ async function reorgnizeWorkspaceStructure(options: NormalizedOptions) {
? `npx nx build ${options.reactAppName}`
: 'npm run build';
printFinalMessage({
learnMoreLink: 'https://nx.dev/recipes/adopting-nx/migration-cra',
learnMoreLink: 'https://nx.dev/recipes/react/migration-cra',
bodyLines: [
`- Execute "${buildCommand}" twice to see the computation caching in action.`,
],

2
packages/nx/src/command-line/migrate/migrate.ts
View File

@ -1280,7 +1280,7 @@ async function generateMigrationsJsonAndUpdatePackageJson(
? [
`- You opted out of some migrations for now. Write the following command down somewhere to apply these migrations later:`,
` nx migrate ${opts.targetVersion} --from ${opts.targetPackage}@${minVersionWithSkippedUpdates} --exclude-applied-migrations`,
`- To learn more go to https://nx.dev/recipes/managing-repository/advanced-update`,
`- To learn more go to https://nx.dev/recipes/tips-n-tricks/advanced-update`,
]
: [
`- To learn more go to https://nx.dev/core-features/automate-updating-dependencies`,

2
packages/nx/src/native/assert-supported-platform.ts
View File

@ -28,7 +28,7 @@ export function assertSupportedPlatform() {
}
bodyLines.push(
'For more information please see https://nx.dev/recipes/ci/troubleshoot-nx-install-issues'
'For more information please see https://nx.dev/recipes/troubleshooting/troubleshoot-nx-install-issues'
);
output.error({

2
packages/nx/src/tasks-runner/cache.ts
View File

@ -245,7 +245,7 @@ export class Cache {
`The local cache artifact in "${td}" was not been generated on this machine.`,
`As a result, the cache's content integrity cannot be confirmed, which may make cache restoration potentially unsafe.`,
`If your machine ID has changed since the artifact was cached, run "nx reset" to fix this issue.`,
`Read about the error and how to address it here: https://nx.dev/recipes/other/unknown-local-cache`,
`Read about the error and how to address it here: https://nx.dev/recipes/troubleshooting/unknown-local-cache`,
``,
].join('\n');
throw new Error(error);

2
packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts
View File

@ -63,7 +63,7 @@ function getModuleFederationConfig(
return config.default || config;
} catch {
throw new Error(
`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/recipes/module-federation/faster-builds`
`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/more-concepts/faster-builds-with-module-federation`
);
}
}

309
tsconfig.base.json
View File

@ -8,61 +8,136 @@
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true,
"types": ["node", "jest"],
"lib": ["es2019"],
"types": [
"node",
"jest"
],
"lib": [
"es2019"
],
"declaration": true,
"resolveJsonModule": true,
"baseUrl": ".",
"rootDir": ".",
"allowJs": true,
"paths": {
"@nrwl/tao": ["packages/tao"],
"@nrwl/tao/*": ["packages/tao/*"],
"@nx/angular": ["packages/angular"],
"@nx/angular/*": ["packages/angular/*"],
"@nx/cypress": ["packages/cypress"],
"@nx/cypress/*": ["packages/cypress/*"],
"@nx/detox": ["packages/detox"],
"@nx/devkit": ["packages/devkit"],
"@nx/devkit/*": ["packages/devkit/*"],
"@nx/docs": ["docs"],
"@nx/docs/*": ["docs/*"],
"@nx/e2e/utils": ["e2e/utils"],
"@nx/esbuild": ["packages/esbuild"],
"@nx/eslint-plugin": ["packages/eslint-plugin/src"],
"@nx/expo": ["packages/expo"],
"@nx/expo/*": ["packages/expo/*"],
"@nx/express": ["packages/express"],
"@nx/graph/ui-components": ["graph/ui-components/src/index.ts"],
"@nx/graph/ui-graph": ["graph/ui-graph/src/index.ts"],
"@nx/graph/ui-tooltips": ["graph/ui-tooltips/src/index.ts"],
"@nx/jest": ["packages/jest"],
"@nx/jest/*": ["packages/jest/*"],
"@nx/js": ["packages/js/src"],
"@nx/js/*": ["packages/js/*"],
"@nx/linter": ["packages/linter"],
"@nx/linter/*": ["packages/linter/*"],
"@nx/nest": ["packages/nest"],
"@nx/next": ["packages/next"],
"@nx/next/*": ["packages/next/*"],
"@nx/node": ["packages/node"],
"@nx/node/*": ["packages/node/*"],
"@nx/nx-dev/data-access-ai": ["nx-dev/data-access-ai/src/index.ts"],
"@nrwl/tao": [
"packages/tao"
],
"@nrwl/tao/*": [
"packages/tao/*"
],
"@nx/angular": [
"packages/angular"
],
"@nx/angular/*": [
"packages/angular/*"
],
"@nx/cypress": [
"packages/cypress"
],
"@nx/cypress/*": [
"packages/cypress/*"
],
"@nx/detox": [
"packages/detox"
],
"@nx/devkit": [
"packages/devkit"
],
"@nx/devkit/*": [
"packages/devkit/*"
],
"@nx/docs": [
"docs"
],
"@nx/docs/*": [
"docs/*"
],
"@nx/e2e/utils": [
"e2e/utils"
],
"@nx/esbuild": [
"packages/esbuild"
],
"@nx/eslint-plugin": [
"packages/eslint-plugin/src"
],
"@nx/expo": [
"packages/expo"
],
"@nx/expo/*": [
"packages/expo/*"
],
"@nx/express": [
"packages/express"
],
"@nx/graph/ui-components": [
"graph/ui-components/src/index.ts"
],
"@nx/graph/ui-graph": [
"graph/ui-graph/src/index.ts"
],
"@nx/graph/ui-tooltips": [
"graph/ui-tooltips/src/index.ts"
],
"@nx/jest": [
"packages/jest"
],
"@nx/jest/*": [
"packages/jest/*"
],
"@nx/js": [
"packages/js/src"
],
"@nx/js/*": [
"packages/js/*"
],
"@nx/linter": [
"packages/linter"
],
"@nx/linter/*": [
"packages/linter/*"
],
"@nx/nest": [
"packages/nest"
],
"@nx/next": [
"packages/next"
],
"@nx/next/*": [
"packages/next/*"
],
"@nx/node": [
"packages/node"
],
"@nx/node/*": [
"packages/node/*"
],
"@nx/nx-dev/data-access-ai": [
"nx-dev/data-access-ai/src/index.ts"
],
"@nx/nx-dev/data-access-documents": [
"nx-dev/data-access-documents/src/index.ts"
],
"@nx/nx-dev/data-access-documents/node-only": [
"nx-dev/data-access-documents/src/node.index.ts"
],
"@nx/nx-dev/data-access-menu": ["nx-dev/data-access-menu/src/index.ts"],
"@nx/nx-dev/data-access-menu": [
"nx-dev/data-access-menu/src/index.ts"
],
"@nx/nx-dev/data-access-packages": [
"nx-dev/data-access-packages/src/index.ts"
],
"@nx/nx-dev/data-access-packages/node-only": [
"nx-dev/data-access-packages/src/node.index.ts"
],
"@nx/nx-dev/feature-ai": ["nx-dev/feature-ai/src/index.ts"],
"@nx/nx-dev/feature-analytics": ["nx-dev/feature-analytics/src/index.ts"],
"@nx/nx-dev/feature-ai": [
"nx-dev/feature-ai/src/index.ts"
],
"@nx/nx-dev/feature-analytics": [
"nx-dev/feature-analytics/src/index.ts"
],
"@nx/nx-dev/feature-doc-viewer": [
"nx-dev/feature-doc-viewer/src/index.ts"
],
@ -72,46 +147,126 @@
"@nx/nx-dev/feature-package-schema-viewer/*": [
"nx-dev/feature-package-schema-viewer/*"
],
"@nx/nx-dev/feature-search": ["nx-dev/feature-search/src/index.ts"],
"@nx/nx-dev/models-document": ["nx-dev/models-document/src/index.ts"],
"@nx/nx-dev/models-menu": ["nx-dev/models-menu/src/index.ts"],
"@nx/nx-dev/models-package": ["nx-dev/models-package/src/index.ts"],
"@nx/nx-dev/ui-commands": ["nx-dev/ui-commands/src/index.ts"],
"@nx/nx-dev/ui-common": ["nx-dev/ui-common/src/index.ts"],
"@nx/nx-dev/ui-community": ["nx-dev/ui-community/src/index.ts"],
"@nx/nx-dev/ui-conference": ["nx-dev/ui-conference/src/index.ts"],
"@nx/nx-dev/ui-home": ["nx-dev/ui-home/src/index.ts"],
"@nx/nx-dev/ui-markdoc": ["nx-dev/ui-markdoc/src/index.ts"],
"@nx/nx-dev/ui-member-card": ["nx-dev/ui-member-card/src/index.ts"],
"@nx/nx-dev/ui-primitives": ["nx-dev/ui-primitives/src/index.ts"],
"@nx/nx-dev/ui-references": ["nx-dev/ui-references/src/index.ts"],
"@nx/nx-dev/ui-sponsor-card": ["nx-dev/ui-sponsor-card/src/index.ts"],
"@nx/nx-dev/ui-theme": ["nx-dev/ui-theme/src/index.ts"],
"@nx/playwright": ["packages/playwright/index.ts"],
"@nx/plugin": ["packages/plugin"],
"@nx/plugin/*": ["packages/plugin/*"],
"@nx/react": ["packages/react"],
"@nx/react-native": ["packages/react-native"],
"@nx/react-native/*": ["packages/react-native/*"],
"@nx/react/*": ["packages/react/*"],
"@nx/rollup": ["packages/rollup"],
"@nx/rollup/*": ["packages/rollup/*"],
"@nx/storybook": ["packages/storybook"],
"@nx/storybook/*": ["packages/storybook/*"],
"@nx/typedoc-theme": ["typedoc-theme/src/index.ts"],
"@nx/vite": ["packages/vite"],
"@nx/vite/*": ["packages/vite/*"],
"@nx/web": ["packages/web"],
"@nx/web/*": ["packages/web/*"],
"@nx/webpack": ["packages/webpack"],
"@nx/webpack/*": ["packages/webpack/*"],
"@nx/workspace": ["packages/workspace"],
"@nx/workspace/*": ["packages/workspace/*"],
"@nx/workspace/testing": ["packages/workspace/testing"],
"create-nx-workspace": ["packages/create-nx-workspace/index.ts"],
"create-nx-workspace/*": ["packages/create-nx-workspace/*"],
"nx": ["packages/nx"],
"nx/*": ["packages/nx/*"]
"@nx/nx-dev/feature-search": [
"nx-dev/feature-search/src/index.ts"
],
"@nx/nx-dev/models-document": [
"nx-dev/models-document/src/index.ts"
],
"@nx/nx-dev/models-menu": [
"nx-dev/models-menu/src/index.ts"
],
"@nx/nx-dev/models-package": [
"nx-dev/models-package/src/index.ts"
],
"@nx/nx-dev/ui-commands": [
"nx-dev/ui-commands/src/index.ts"
],
"@nx/nx-dev/ui-common": [
"nx-dev/ui-common/src/index.ts"
],
"@nx/nx-dev/ui-community": [
"nx-dev/ui-community/src/index.ts"
],
"@nx/nx-dev/ui-conference": [
"nx-dev/ui-conference/src/index.ts"
],
"@nx/nx-dev/ui-home": [
"nx-dev/ui-home/src/index.ts"
],
"@nx/nx-dev/ui-markdoc": [
"nx-dev/ui-markdoc/src/index.ts"
],
"@nx/nx-dev/ui-member-card": [
"nx-dev/ui-member-card/src/index.ts"
],
"@nx/nx-dev/ui-primitives": [
"nx-dev/ui-primitives/src/index.ts"
],
"@nx/nx-dev/ui-references": [
"nx-dev/ui-references/src/index.ts"
],
"@nx/nx-dev/ui-sponsor-card": [
"nx-dev/ui-sponsor-card/src/index.ts"
],
"@nx/nx-dev/ui-theme": [
"nx-dev/ui-theme/src/index.ts"
],
"@nx/playwright": [
"packages/playwright/index.ts"
],
"@nx/plugin": [
"packages/plugin"
],
"@nx/plugin/*": [
"packages/plugin/*"
],
"@nx/react": [
"packages/react"
],
"@nx/react-native": [
"packages/react-native"
],
"@nx/react-native/*": [
"packages/react-native/*"
],
"@nx/react/*": [
"packages/react/*"
],
"@nx/rollup": [
"packages/rollup"
],
"@nx/rollup/*": [
"packages/rollup/*"
],
"@nx/storybook": [
"packages/storybook"
],
"@nx/storybook/*": [
"packages/storybook/*"
],
"@nx/typedoc-theme": [
"typedoc-theme/src/index.ts"
],
"@nx/vite": [
"packages/vite"
],
"@nx/vite/*": [
"packages/vite/*"
],
"@nx/web": [
"packages/web"
],
"@nx/web/*": [
"packages/web/*"
],
"@nx/webpack": [
"packages/webpack"
],
"@nx/webpack/*": [
"packages/webpack/*"
],
"@nx/workspace": [
"packages/workspace"
],
"@nx/workspace/*": [
"packages/workspace/*"
],
"@nx/workspace/testing": [
"packages/workspace/testing"
],
"create-nx-workspace": [
"packages/create-nx-workspace/index.ts"
],
"create-nx-workspace/*": [
"packages/create-nx-workspace/*"
],
"nx": [
"packages/nx"
],
"nx/*": [
"packages/nx/*"
]
}
}
}