docs(nxdev): add proper recipes section (#12557)

docs/generated/packages/angular.json

@@ -11,7 +11,7 @@
       "id": "overview",
       "path": "/packages/angular",
       "file": "shared/angular-plugin",
-      "content": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Storybook, Jest, Cypress, Karma, and Protractor.\n- Generators to help scaffold code quickly, including:\n  - Micro Frontends\n  - Libraries, both internal to your codebase and publishable to npm\n  - Upgrading AngularJS applications\n  - Single Component Application Modules (SCAMs)\n- NgRx helpers.\n- Utilities for automatic workspace refactoring.\n\n{% callout type=\"note\" title=\"Currently using the Angular CLI?\" %}\nYou can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipe/migration-angular).\n{% /callout %}\n\n## Setting up the Angular plugin\n\nAdding the Angular plugin to an existing Nx workspace can be done with the following:\n\n```bash\nyarn add -D @nrwl/angular\n```\n\n```bash\nnpm install -D @nrwl/angular\n```\n\n## Using the Angular Plugin\n\n### Generating an application\n\nIt's straightforward to generate an Angular application:\n\n```bash\nnx g @nrwl/angular:app appName\n```\n\nBy default, the application will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n- Cypress as the E2E test runner.\n\nWe can then serve, build, test, lint, and run e2e tests on the application with the following commands:\n\n```bash\nnx serve appName\nnx build appName\nnx test appName\nnx lint appName\nnx e2e appName\n```\n\n### Generating a library\n\nGenerating an Angular library is very similar to generating an application:\n\n```bash\nnx g @nrwl/angular:lib libName\n```\n\nBy default, the library will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n\nWe can then test and lint the library with the following commands:\n\n```bash\nnx test libName\nnx lint libName\n```\n\nRead more about:\n\n- [Creating Libraries](/more-concepts/creating-libraries)\n- [Library Types](/more-concepts/library-types)\n- [Buildable and Publishable Libraries](/more-concepts/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/01-create-application)\n- [Migrating from the Angular CLI](recipe/migration-angular)\n- [Setup Module Federation with Angular and Nx](/recipe/faster-builds)\n- [Using NgRx](/recipe/misc-ngrx)\n- [Using Data Persistence operators](/recipe/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/recipe/migration-angularjs)\n- [Using Tailwind CSS with Angular projects](/recipe/using-tailwind-css-with-angular-projects)\n"
+      "content": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides:\n\n- Integration with libraries such as Storybook, Jest, Cypress, Karma, and Protractor.\n- Generators to help scaffold code quickly, including:\n  - Micro Frontends\n  - Libraries, both internal to your codebase and publishable to npm\n  - Upgrading AngularJS applications\n  - Single Component Application Modules (SCAMs)\n- NgRx helpers.\n- Utilities for automatic workspace refactoring.\n\n{% callout type=\"note\" title=\"Currently using the Angular CLI?\" %}\nYou can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipes/adopting-nx/migration-angular).\n{% /callout %}\n\n## Setting up the Angular plugin\n\nAdding the Angular plugin to an existing Nx workspace can be done with the following:\n\n```bash\nyarn add -D @nrwl/angular\n```\n\n```bash\nnpm install -D @nrwl/angular\n```\n\n## Using the Angular Plugin\n\n### Generating an application\n\nIt's straightforward to generate an Angular application:\n\n```bash\nnx g @nrwl/angular:app appName\n```\n\nBy default, the application will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n- Cypress as the E2E test runner.\n\nWe can then serve, build, test, lint, and run e2e tests on the application with the following commands:\n\n```bash\nnx serve appName\nnx build appName\nnx test appName\nnx lint appName\nnx e2e appName\n```\n\n### Generating a library\n\nGenerating an Angular library is very similar to generating an application:\n\n```bash\nnx g @nrwl/angular:lib libName\n```\n\nBy default, the library will be generated with:\n\n- ESLint as the linter.\n- Jest as the unit test runner.\n\nWe can then test and lint the library with the following commands:\n\n```bash\nnx test libName\nnx lint libName\n```\n\nRead more about:\n\n- [Creating Libraries](/more-concepts/creating-libraries)\n- [Library Types](/more-concepts/library-types)\n- [Buildable and Publishable Libraries](/more-concepts/buildable-and-publishable-libraries)\n\n## More Documentation\n\n- [Angular Nx Tutorial](/angular-tutorial/01-create-application)\n- [Migrating from the Angular CLI](recipe/migration-angular)\n- [Setup Module Federation with Angular and Nx](/recipes/module-federation/faster-builds)\n- [Using NgRx](/recipes/other/misc-ngrx)\n- [Using Data Persistence operators](/recipes/other/misc-data-persistence)\n- [Upgrading an AngularJS application to Angular](/recipes/adopting-nx/migration-angularjs)\n- [Using Tailwind CSS with Angular projects](/recipes/other/using-tailwind-css-with-angular-projects)\n"
     },
     {
       "name": "Angular and Nx Version Matrix",

docs/generated/packages/eslint-plugin-nx.json

@@ -11,7 +11,7 @@
       "name": "Overview",
       "path": "/packages/eslint-plugin-nx",
       "file": "shared/eslint-plugin-nx",
-      "content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````bash\n```bash\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```json\n{\n  // ... more ESLint config here\n  \"overrides\": [\n    {\n      \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n      \"rules\": {\n        \"@nrwl/nx/enforce-module-boundaries\": [\n          \"error\",\n          {\n            // ...rule specific configuration\n          }\n        ]\n      }\n    }\n    // ... more ESLint overrides here\n  ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipe/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipe/tag-multiple-dimensions)\n- [Ban External Imports](/recipe/ban-external-imports)\n- [Tags Allow List](/recipe/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
+      "content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````bash\n```bash\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```json\n{\n  // ... more ESLint config here\n  \"overrides\": [\n    {\n      \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n      \"rules\": {\n        \"@nrwl/nx/enforce-module-boundaries\": [\n          \"error\",\n          {\n            // ...rule specific configuration\n          }\n        ]\n      }\n    }\n    // ... more ESLint overrides here\n  ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipes/other/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipes/other/tag-multiple-dimensions)\n- [Ban External Imports](/recipes/other/ban-external-imports)\n- [Tags Allow List](/recipes/other/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
     }
   ],
   "generators": [],

docs/generated/packages/linter.json

@@ -17,7 +17,7 @@
       "id": "eslint-plugin-nx",
       "name": "eslint-plugin-nx",
       "file": "shared/eslint-plugin-nx",
-      "content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````bash\n```bash\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```json\n{\n  // ... more ESLint config here\n  \"overrides\": [\n    {\n      \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n      \"rules\": {\n        \"@nrwl/nx/enforce-module-boundaries\": [\n          \"error\",\n          {\n            // ...rule specific configuration\n          }\n        ]\n      }\n    }\n    // ... more ESLint overrides here\n  ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipe/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipe/tag-multiple-dimensions)\n- [Ban External Imports](/recipe/ban-external-imports)\n- [Tags Allow List](/recipe/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
+      "content": "A plugin containing a collection of recommended ESLint rule configurations wrapped as ESLint plugins and an Nx specific [enforce-module-boundaries](#enforce-module-boundaries) rule.\n\n## Setting Up ESLint Plugin\n\n### Installation\n\nIn any Nx workspace, you can install `@nrwl/eslint-plugin-nx` by running the following commands if the package is not already installed:\n\n{% tabs %}\n{%tab label=\"npm\"%}\n\n````bash\n```bash\nnpm i --save-dev @nrwl/eslint-plugin-nx\n````\n\n{% /tab %}\n{%tab label=\"yarn\"%}\n\n```bash\nyarn add --dev @nrwl/eslint-plugin-nx\n```\n\n{% /tab %}\n{% /tabs %}\n\n## ESLint plugins\n\nThe plugin contains the following rule configurations divided into sub-plugins.\n\n### JavaScript\n\nThe `@nrwl/nx/javascript` ESLint plugin contains best practices when using JavaScript.\n\n### TypeScript\n\nThe `@nrwl/nx/typescript` ESLint plugin contains best practices when using TypeSript.\n\n### Angular\n\nContains configurations matching best practices when using Angular framework:\n\n- @nrwl/nx/angular\n- @nrwl/nx/angular-template\n\n### React\n\nContains configurations matching best practices when using React framework:\n\n- @nrwl/nx/react-base\n- @nrwl/nx/react-jsx\n- @nrwl/nx/react-typescript\n\nYou can also use `@nrwl/nx/react` which includes all three `@nrwl/nx/react-*` plugins\n\n## enforce-module-boundaries\n\nThe `@nrwl/nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between different projects in the repository. By enforcing strict boundaries it helps keep prevent unplanned cross-dependencies.\n\n### Usage\n\nYou can use `enforce-module-boundaries` rule by adding it to your ESLint rules configuration:\n\n```json\n{\n  // ... more ESLint config here\n  \"overrides\": [\n    {\n      \"files\": [\"*.ts\", \"*.tsx\", \"*.js\", \"*.jsx\"],\n      \"rules\": {\n        \"@nrwl/nx/enforce-module-boundaries\": [\n          \"error\",\n          {\n            // ...rule specific configuration\n          }\n        ]\n      }\n    }\n    // ... more ESLint overrides here\n  ]\n}\n```\n\nRead more about proper usage of this rule:\n\n- [Enforce Project Boundaries](/core-features/enforce-project-boundaries)\n- [Ban Dependencies with Certain Tags](/recipes/other/ban-dependencies-with-tags)\n- [Tag in Multiple Dimensions](/recipes/other/tag-multiple-dimensions)\n- [Ban External Imports](/recipes/other/ban-external-imports)\n- [Tags Allow List](/recipes/other/tags-allow-list)\n- [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)\n"
     }
   ],
   "generators": [

docs/generated/packages/workspace.json

@@ -11,7 +11,7 @@
       "id": "overview",
       "path": "/packages/workspace",
       "file": "shared/workspace-plugin",
-      "content": "The workspace plugin contains executors and generators that are useful for any Nx workspace. It should be present in every Nx workspace and other plugins build on it.\n\n## Creating Local Generators\n\nCodifying your organization's best practices into local generators is a great way to ensure that the best practices are easy to follow and implement. Running `nx g @nrwl/nx-plugin:plugin feature` will create a local plugin with a generator which is written the same way generators are written for Nx plugins.\n\n> See more about [local generators](/recipe/local-generators)\n\n## Reorganizing Projects\n\nAfter some time of working within a workspace, projects might need to be moved or sometimes even removed.\nThe workspace plugin provides the [`@nrwl/workspace:move`](/packages/workspace/generators/move) and [`@nrwl/workspace:remove`](/packages/workspace/generators/remove) generators to help aid with this.\n\n### Moving Projects\n\nRunning `nx g @nrwl/workspace:move --projectName my-lib --destination new/location/my-lib` will move the `my-lib` library to `libs/new/location/my-lib`.\n\nMoving the files manually can be done easily but a lot of steps are often missed when projects are moved. This generator will also handle the following:\n\n1. The project's files will be moved\n2. The project will be renamed to `new-location-my-lib`\n3. The path mapping in `tsconfig.base.json` will be changed to `@npmScope/new/location/my-lib`\n4. Imports in other projects will be changed to `@npmScope/new/location/my-lib`\n5. Paths in target options such as output path will be changed\n6. Other configuration will be updated too, such as `extends` in `tsconfig.json`, the name of the project in `jest.config.js`, and the extends in `.eslintrc.json`\n\n> See more about [`@nrwl/workspace:move`](/packages/workspace/generators/move)\n\n### Removing Projects\n\nRunning `nx g @nrwl/workspace:remove my-lib` will remove the `my-lib` from the workspace. It is important to note that sometimes, projects cannot be removed if they are still depended on by other projects.\n\nLike when moving projects, some steps are often missed when removing projects. This generator will also handle the following:\n\n1. Checks if other projects depend on the project being removed. This can be ignored via the `--forceRemove` flag.\n2. The project's files will be deleted.\n3. The project's configuration will be removed.\n4. The path mapping in `tsconfig.base.json` will be removed.\n\n> See more about [`@nrwl/workspace:remove`](/packages/workspace/generators/remove)\n\n## Running custom commands\n\nExecutors provide an optimized way of running targets but unfortunately, not every target has an executor written for it. The [`nx:run-commands`](/packages/nx/executors/run-commands) executor is an executor that runs any command or multiple commands in the shell. This can be useful when integrating with other tools which do not have an executor provided. There is also a generator to help configure this executor.\n\nRunning `nx g @nrwl/workspace:run-commands printhello --project my-feature-lib --command 'echo hello'` will create a `my-feature-lib:printhello` target that executes `echo hello` in the shell.\n\n> See more about [`nx:run-commands`](/packages/nx/executors/run-commands)\n"
+      "content": "The workspace plugin contains executors and generators that are useful for any Nx workspace. It should be present in every Nx workspace and other plugins build on it.\n\n## Creating Local Generators\n\nCodifying your organization's best practices into local generators is a great way to ensure that the best practices are easy to follow and implement. Running `nx g @nrwl/nx-plugin:plugin feature` will create a local plugin with a generator which is written the same way generators are written for Nx plugins.\n\n> See more about [local generators](/recipes/generators/local-generators)\n\n## Reorganizing Projects\n\nAfter some time of working within a workspace, projects might need to be moved or sometimes even removed.\nThe workspace plugin provides the [`@nrwl/workspace:move`](/packages/workspace/generators/move) and [`@nrwl/workspace:remove`](/packages/workspace/generators/remove) generators to help aid with this.\n\n### Moving Projects\n\nRunning `nx g @nrwl/workspace:move --projectName my-lib --destination new/location/my-lib` will move the `my-lib` library to `libs/new/location/my-lib`.\n\nMoving the files manually can be done easily but a lot of steps are often missed when projects are moved. This generator will also handle the following:\n\n1. The project's files will be moved\n2. The project will be renamed to `new-location-my-lib`\n3. The path mapping in `tsconfig.base.json` will be changed to `@npmScope/new/location/my-lib`\n4. Imports in other projects will be changed to `@npmScope/new/location/my-lib`\n5. Paths in target options such as output path will be changed\n6. Other configuration will be updated too, such as `extends` in `tsconfig.json`, the name of the project in `jest.config.js`, and the extends in `.eslintrc.json`\n\n> See more about [`@nrwl/workspace:move`](/packages/workspace/generators/move)\n\n### Removing Projects\n\nRunning `nx g @nrwl/workspace:remove my-lib` will remove the `my-lib` from the workspace. It is important to note that sometimes, projects cannot be removed if they are still depended on by other projects.\n\nLike when moving projects, some steps are often missed when removing projects. This generator will also handle the following:\n\n1. Checks if other projects depend on the project being removed. This can be ignored via the `--forceRemove` flag.\n2. The project's files will be deleted.\n3. The project's configuration will be removed.\n4. The path mapping in `tsconfig.base.json` will be removed.\n\n> See more about [`@nrwl/workspace:remove`](/packages/workspace/generators/remove)\n\n## Running custom commands\n\nExecutors provide an optimized way of running targets but unfortunately, not every target has an executor written for it. The [`nx:run-commands`](/packages/nx/executors/run-commands) executor is an executor that runs any command or multiple commands in the shell. This can be useful when integrating with other tools which do not have an executor provided. There is also a generator to help configure this executor.\n\nRunning `nx g @nrwl/workspace:run-commands printhello --project my-feature-lib --command 'echo hello'` will create a `my-feature-lib:printhello` target that executes `echo hello` in the shell.\n\n> See more about [`nx:run-commands`](/packages/nx/executors/run-commands)\n"
     },
     {
       "name": "Nx, NodeJS and Typescript Versions",

docs/map.json

@@ -481,388 +481,17 @@
             "name": "CI Setup",
             "id": "ci-setup",
             "tags": ["distribute-task-execution"],
-            "file": "shared/ci-overview"
+            "path": "/recipes/ci-overview"
           },
           {
             "name": "Adopting Nx",
             "id": "adopting-nx",
-            "file": "shared/recipes/adopt-nx"
+            "path": "/recipes/adopting-nx"
           },
           {
             "name": "All Recipes »",
             "id": "all",
-            "file": "shared/recipes/recipe-list"
-          }
-        ]
-      },
-      {
-        "name": "Recipe",
-        "id": "recipe",
-        "description": "Learn quickly how to do things with Nx.",
-        "itemList": [
-          {
-            "name": "Disable Graph Links Created from Analyzing Source Files",
-            "id": "analyze-source-files",
-            "tags": ["explore-graph"],
-            "file": "shared/recipes/analyze-source-files"
-          },
-          {
-            "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": "Advanced Update Nx",
-            "id": "advanced-update",
-            "tags": ["automate-updating-dependencies"],
-            "file": "shared/recipes/advanced-update"
-          },
-          {
-            "name": "Set up a new workspace",
-            "id": "set-up-a-new-workspace",
-            "file": "shared/recipes/set-up-a-new-workspace"
-          },
-          {
-            "name": "Setting up Azure Pipelines",
-            "id": "monorepo-ci-azure",
-            "file": "shared/monorepo-ci-azure"
-          },
-          {
-            "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": "Nx and Lerna",
-            "id": "lerna-and-nx",
-            "file": "shared/migration/lerna-and-nx"
-          },
-          {
-            "name": "NPM/Yarn/PNPM workspaces",
-            "id": "adding-to-monorepo",
-            "file": "shared/migration/adding-to-monorepo"
-          },
-          {
-            "name": "From CRA",
-            "id": "migration-cra",
-            "file": "shared/migration/migration-cra"
-          },
-          {
-            "name": "From Angular CLI",
-            "id": "migration-angular",
-            "file": "shared/migration/migration-angular"
-          },
-          {
-            "name": "From AngularJS",
-            "id": "migration-angularjs",
-            "file": "shared/migration/migration-angularjs"
-          },
-          {
-            "name": "Preserving Git Histories",
-            "id": "preserving-git-histories",
-            "file": "shared/migration/preserving-git-histories"
-          },
-          {
-            "name": "Manual migration",
-            "id": "manual",
-            "file": "shared/migration/manual"
-          },
-          {
-            "name": "Running Custom Commands",
-            "id": "run-commands-executor",
-            "tags": ["use-task-executors"],
-            "file": "shared/running-custom-commands"
-          },
-          {
-            "name": "Use Executor Configurations",
-            "id": "use-executor-configurations",
-            "tags": ["use-task-executors"],
-            "file": "shared/recipes/use-executor-configurations"
-          },
-          {
-            "name": "Local Executors",
-            "id": "creating-custom-executors",
-            "tags": ["use-task-executors"],
-            "file": "shared/recipes/local-executors"
-          },
-          {
-            "name": "Compose Executors",
-            "id": "compose-executors",
-            "tags": ["use-task-executors"],
-            "file": "shared/recipes/compose-executors"
-          },
-          {
-            "name": "Local Generators",
-            "id": "local-generators",
-            "tags": ["use-code-generators"],
-            "file": "shared/recipes/local-generators"
-          },
-          {
-            "name": "Composing Generators",
-            "id": "composing-generators",
-            "tags": ["use-code-generators"],
-            "file": "shared/generators/composing-generators"
-          },
-          {
-            "name": "Generator Options",
-            "id": "generator-options",
-            "tags": ["use-code-generators"],
-            "file": "shared/generators/generator-options"
-          },
-          {
-            "name": "Creating Files",
-            "id": "creating-files",
-            "tags": ["use-code-generators"],
-            "file": "shared/generators/creating-files"
-          },
-          {
-            "name": "Modifying Files",
-            "id": "modifying-files",
-            "tags": ["use-code-generators"],
-            "file": "shared/generators/modifying-files"
-          },
-          {
-            "name": "JavaScript and TypeScript",
-            "id": "js-and-ts",
-            "file": "shared/guides/js-and-ts"
-          },
-          {
-            "name": "React Native with Nx",
-            "id": "react-native",
-            "file": "shared/guides/react-native"
-          },
-          {
-            "name": "Adding Images, Fonts, and Files",
-            "id": "adding-assets-react",
-            "file": "shared/guides/adding-assets"
-          },
-          {
-            "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": "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": "Deploying Next.js applications to Vercel",
-            "id": "deploy-nextjs-to-vercel",
-            "file": "shared/guides/deploy-nextjs-to-vercel"
-          },
-          {
-            "name": "Webpack 5 Migration",
-            "id": "webpack-5",
-            "file": "shared/guides/webpack-5"
-          },
-          {
-            "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": "Customizing Webpack Config",
-            "id": "customize-webpack",
-            "tags": ["use-task-executors"],
-            "file": "shared/guides/customize-webpack"
-          },
-          {
-            "name": "Faster Builds with Module Federation",
-            "id": "faster-builds",
-            "tags": ["use-task-executors"],
-            "file": "shared/guides/module-federation/faster-builds"
-          },
-          {
-            "name": "Advanced Micro Frontends with Angular using Dynamic Federation",
-            "id": "dynamic-module-federation-with-angular",
-            "file": "shared/guides/module-federation/dynamic-mfe-angular"
-          },
-          {
-            "name": "Nx Micro-Frontend Example",
-            "id": "nx-examples",
-            "file": "shared/examples/nx-examples"
-          },
-          {
-            "name": "Powering Up React Development With Nx",
-            "id": "react-nx",
-            "file": "shared/examples/react-nx"
-          },
-          {
-            "name": "Using Apollo GraphQL",
-            "id": "apollo-react",
-            "file": "shared/examples/apollo-react"
-          },
-          {
-            "name": "Large Repo and Caching",
-            "id": "caching",
-            "file": "shared/examples/caching"
-          },
-          {
-            "name": "Large Repo and DTE",
-            "id": "dte",
-            "file": "shared/examples/dte"
-          },
-          {
-            "name": "Project Inference Plugins",
-            "id": "project-inference-plugins",
-            "tags": ["create-your-own-plugin"],
-            "file": "shared/extending-nx/project-inference-plugins"
-          },
-          {
-            "name": "Project Graph Plugins",
-            "id": "project-graph-plugins",
-            "tags": ["create-your-own-plugin", "explore-graph"],
-            "file": "shared/extending-nx/project-graph-plugins"
-          },
-          {
-            "name": "Ban Dependencies with Certain Tags",
-            "id": "ban-dependencies-with-tags",
-            "tags": ["enforce-project-boundaries"],
-            "file": "shared/recipes/ban-dependencies-with-tags"
-          },
-          {
-            "name": "Tag in Multiple Dimensions",
-            "id": "tag-multiple-dimensions",
-            "tags": ["enforce-project-boundaries"],
-            "file": "shared/recipes/tag-multiple-dimensions"
-          },
-          {
-            "name": "Ban External Imports",
-            "id": "ban-external-imports",
-            "tags": ["enforce-project-boundaries"],
-            "file": "shared/recipes/ban-external-imports"
-          },
-          {
-            "name": "Tags Allow List",
-            "id": "tags-allow-list",
-            "tags": ["enforce-project-boundaries"],
-            "file": "shared/recipes/tags-allow-list"
-          },
-          {
-            "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": "Publishing Storybook: One main Storybook instance for all projects",
-            "id": "one-storybook-for-all",
-            "tags": ["storybook"],
-            "file": "shared/recipes/one-storybook-for-all"
-          },
-          {
-            "name": "Publishing Storybook: One Storybook instance per scope",
-            "id": "one-storybook-per-scope",
-            "tags": ["storybook"],
-            "file": "shared/recipes/one-storybook-per-scope"
-          },
-          {
-            "name": "Publishing Storybook: One main Storybook instance using Storybook Composition",
-            "id": "one-storybook-with-composition",
-            "tags": ["storybook"],
-            "file": "shared/recipes/one-storybook-with-composition"
+            "path": "/recipes"
           }
         ]
       },
@@ -950,6 +579,466 @@
       }
     ]
   },
+  {
+    "name": "Nx Recipes",
+    "id": "nx-recipes",
+    "description": "Learn quickly how to do things with Nx.",
+    "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 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": "Setting up Azure Pipelines",
+            "id": "monorepo-ci-azure",
+            "file": "shared/monorepo-ci-azure"
+          },
+          {
+            "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": "Adopting Nx",
+        "id": "adopting-nx",
+        "description": "Adopting Nx incrementally, on existing project or from scratch.",
+        "itemList": [
+          {
+            "name": "Nx and Lerna",
+            "id": "lerna-and-nx",
+            "file": "shared/migration/lerna-and-nx"
+          },
+          {
+            "name": "NPM/Yarn/PNPM workspaces",
+            "id": "adding-to-monorepo",
+            "file": "shared/migration/adding-to-monorepo"
+          },
+          {
+            "name": "From CRA",
+            "id": "migration-cra",
+            "file": "shared/migration/migration-cra"
+          },
+          {
+            "name": "From Angular CLI",
+            "id": "migration-angular",
+            "file": "shared/migration/migration-angular"
+          },
+          {
+            "name": "From AngularJS",
+            "id": "migration-angularjs",
+            "file": "shared/migration/migration-angularjs"
+          },
+          {
+            "name": "Preserving Git Histories",
+            "id": "preserving-git-histories",
+            "file": "shared/migration/preserving-git-histories"
+          },
+          {
+            "name": "Manual migration",
+            "id": "manual",
+            "file": "shared/migration/manual"
+          }
+        ]
+      },
+      {
+        "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": "Local Executors",
+            "id": "creating-custom-executors",
+            "tags": ["use-task-executors"],
+            "file": "shared/recipes/local-executors"
+          },
+          {
+            "name": "Compose Executors",
+            "id": "compose-executors",
+            "tags": ["use-task-executors"],
+            "file": "shared/recipes/compose-executors"
+          }
+        ]
+      },
+      {
+        "name": "Generators",
+        "id": "generators",
+        "description": "Use, extend and compose generators.",
+        "itemList": [
+          {
+            "name": "Local Generators",
+            "id": "local-generators",
+            "tags": ["use-code-generators"],
+            "file": "shared/recipes/local-generators"
+          },
+          {
+            "name": "Composing Generators",
+            "id": "composing-generators",
+            "tags": ["use-code-generators"],
+            "file": "shared/generators/composing-generators"
+          },
+          {
+            "name": "Generator Options",
+            "id": "generator-options",
+            "tags": ["use-code-generators"],
+            "file": "shared/generators/generator-options"
+          },
+          {
+            "name": "Creating Files",
+            "id": "creating-files",
+            "tags": ["use-code-generators"],
+            "file": "shared/generators/creating-files"
+          },
+          {
+            "name": "Modifying Files",
+            "id": "modifying-files",
+            "tags": ["use-code-generators"],
+            "file": "shared/generators/modifying-files"
+          }
+        ]
+      },
+      {
+        "name": "Advanced Plugins",
+        "id": "advanced-plugins",
+        "description": "Learn more about creating your own plugin, extending Nx.",
+        "itemList": [
+          {
+            "name": "Project Inference Plugins",
+            "id": "project-inference-plugins",
+            "tags": ["create-your-own-plugin"],
+            "file": "shared/extending-nx/project-inference-plugins"
+          },
+          {
+            "name": "Project Graph Plugins",
+            "id": "project-graph-plugins",
+            "tags": ["create-your-own-plugin", "explore-graph"],
+            "file": "shared/extending-nx/project-graph-plugins"
+          }
+        ]
+      },
+      {
+        "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"],
+            "file": "shared/guides/module-federation/faster-builds"
+          },
+          {
+            "name": "Advanced Micro Frontends with Angular using Dynamic Federation",
+            "id": "dynamic-module-federation-with-angular",
+            "file": "shared/guides/module-federation/dynamic-mfe-angular"
+          },
+          {
+            "name": "Nx Micro-Frontend Example",
+            "id": "nx-examples",
+            "file": "shared/examples/nx-examples"
+          }
+        ]
+      },
+      {
+        "name": "Storybook",
+        "id": "storybook",
+        "description": "Storybook how tos",
+        "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": "Publishing Storybook: One Storybook instance per scope",
+            "id": "one-storybook-per-scope",
+            "tags": ["storybook"],
+            "file": "shared/recipes/one-storybook-per-scope"
+          },
+          {
+            "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": "Other",
+        "id": "other",
+        "description": "Other recipes you will find useful.",
+        "itemList": [
+          {
+            "name": "Disable Graph Links Created from Analyzing Source Files",
+            "id": "analyze-source-files",
+            "tags": ["explore-graph"],
+            "file": "shared/recipes/analyze-source-files"
+          },
+
+          {
+            "name": "Advanced Update Nx",
+            "id": "advanced-update",
+            "tags": ["automate-updating-dependencies"],
+            "file": "shared/recipes/advanced-update"
+          },
+
+          {
+            "name": "JavaScript and TypeScript",
+            "id": "js-and-ts",
+            "file": "shared/guides/js-and-ts"
+          },
+          {
+            "name": "React Native with Nx",
+            "id": "react-native",
+            "file": "shared/guides/react-native"
+          },
+          {
+            "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": "Deploying Next.js applications to Vercel",
+            "id": "deploy-nextjs-to-vercel",
+            "file": "shared/guides/deploy-nextjs-to-vercel"
+          },
+          {
+            "name": "Webpack 5 Migration",
+            "id": "webpack-5",
+            "file": "shared/guides/webpack-5"
+          },
+          {
+            "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": "Customizing Webpack Config",
+            "id": "customize-webpack",
+            "tags": ["use-task-executors"],
+            "file": "shared/guides/customize-webpack"
+          },
+
+          {
+            "name": "Powering Up React Development With Nx",
+            "id": "react-nx",
+            "file": "shared/examples/react-nx"
+          },
+          {
+            "name": "Using Apollo GraphQL",
+            "id": "apollo-react",
+            "file": "shared/examples/apollo-react"
+          },
+          {
+            "name": "Large Repo and Caching",
+            "id": "caching",
+            "file": "shared/examples/caching"
+          },
+          {
+            "name": "Large Repo and DTE",
+            "id": "dte",
+            "file": "shared/examples/dte"
+          },
+
+          {
+            "name": "Ban Dependencies with Certain Tags",
+            "id": "ban-dependencies-with-tags",
+            "tags": ["enforce-project-boundaries"],
+            "file": "shared/recipes/ban-dependencies-with-tags"
+          },
+          {
+            "name": "Tag in Multiple Dimensions",
+            "id": "tag-multiple-dimensions",
+            "tags": ["enforce-project-boundaries"],
+            "file": "shared/recipes/tag-multiple-dimensions"
+          },
+          {
+            "name": "Ban External Imports",
+            "id": "ban-external-imports",
+            "tags": ["enforce-project-boundaries"],
+            "file": "shared/recipes/ban-external-imports"
+          },
+          {
+            "name": "Tags Allow List",
+            "id": "tags-allow-list",
+            "tags": ["enforce-project-boundaries"],
+            "file": "shared/recipes/tags-allow-list"
+          },
+          {
+            "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": "Nx Cloud docs",
     "id": "nx-cloud-documentation",

docs/nx-cloud/set-up/set-up-dte.md

@@ -129,11 +129,11 @@ CI/CD (e.g., deployment). They mainly focus on configuring Nx correctly.
 
 Read the guides for more information on how to configure them in CI.
 
-- [Overview](/recipes/ci-setup#distributed-ci-with-nx-cloud)
-- [Azure Pipelines](/recipe/monorepo-ci-azure#distributed-ci-with-nx-cloud)
-- [Circle CI](/recipe/monorepo-ci-circle-ci#distributed-ci-with-nx-cloud)
-- [GitHub Actions](/recipe/monorepo-ci-github-actions#distributed-ci-with-nx-cloud)
-- [Jenkins](/recipe/monorepo-ci-jenkins#distributed-ci-with-nx-cloud)
+- [Overview](/recipes/ci/ci-setup#distributed-ci-with-nx-cloud)
+- [Azure Pipelines](/recipes/ci/monorepo-ci-azure#distributed-ci-with-nx-cloud)
+- [Circle CI](/recipes/ci/monorepo-ci-circle-ci#distributed-ci-with-nx-cloud)
+- [GitHub Actions](/recipes/ci/monorepo-ci-github-actions#distributed-ci-with-nx-cloud)
+- [Jenkins](/recipes/ci/monorepo-ci-jenkins#distributed-ci-with-nx-cloud)
 
 Note that only cacheable operations can be distributed because they have to be replayed on the main job.
 

docs/shared/angular-plugin.md

@@ -10,7 +10,7 @@ The Nx Plugin for Angular contains executors, generators, and utilities for mana
 - Utilities for automatic workspace refactoring.
 
 {% 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](/recipe/migration-angular).
+You can easily and mostly **automatically migrate from an Angular CLI** project to Nx! Learn more [here](/recipes/adopting-nx/migration-angular).
 {% /callout %}
 
 ## Setting up the Angular plugin
@@ -81,8 +81,8 @@ Read more about:
 
 - [Angular Nx Tutorial](/angular-tutorial/01-create-application)
 - [Migrating from the Angular CLI](recipe/migration-angular)
-- [Setup Module Federation with Angular and Nx](/recipe/faster-builds)
-- [Using NgRx](/recipe/misc-ngrx)
-- [Using Data Persistence operators](/recipe/misc-data-persistence)
-- [Upgrading an AngularJS application to Angular](/recipe/migration-angularjs)
-- [Using Tailwind CSS with Angular projects](/recipe/using-tailwind-css-with-angular-projects)
+- [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)

docs/shared/ci-overview.md

@@ -51,9 +51,9 @@ Learn more about configuring your CI environment using Nx Cloud with [Distribute
 
 The following guides cover optimizing your CI/CD environments with affected commands and distributed caching:
 
-- [Setting up CI using Azure Pipelines](/recipe/monorepo-ci-azure)
-- [Setting up CI using CircleCI](/recipe/monorepo-ci-circle-ci)
-- [Setting up CI using GitHub Actions](/recipe/monorepo-ci-github-actions)
-- [Setting up CI using Jenkins](/recipe/monorepo-ci-jenkins)
-- [Setting up CI using GitLab](/recipe/monorepo-ci-gitlab)
-- [Setting up CI using Bitbucket](/recipe/monorepo-ci-bitbucket-pipelines)
+- [Setting up CI using Azure Pipelines](/recipes/ci/monorepo-ci-azure)
+- [Setting up CI using CircleCI](/recipes/ci/monorepo-ci-circle-ci)
+- [Setting up CI using GitHub Actions](/recipes/ci/monorepo-ci-github-actions)
+- [Setting up CI using Jenkins](/recipes/ci/monorepo-ci-jenkins)
+- [Setting up CI using GitLab](/recipes/ci/monorepo-ci-gitlab)
+- [Setting up CI using Bitbucket](/recipes/ci/monorepo-ci-bitbucket-pipelines)

docs/shared/core-features/automate-updating-dependencies.md

@@ -61,4 +61,4 @@ Note: You may want to keep the `migrations.json` until every branch that was cre
 
 ## Problems?
 
-If you can't run `nx migrate --run-migrations` all in one step, try the tips in [Advanced Update Process](/recipe/advanced-update)
+If you can't run `nx migrate --run-migrations` all in one step, try the tips in [Advanced Update Process](/recipes/other/advanced-update)

docs/shared/deprecated/workspace-json.md

@@ -5,7 +5,7 @@ Nx used to have a `workspace.json` file at the root of the repo that at various
 1. Identified the locations of all project in the repo
 2. Contained the target configuration for all projects
 
-Identifying the locations of projects is now done automatically through project inference. You can even customize how projects are inferred with a [project inference plugin](/recipe/project-inference-plugins).
+Identifying the locations of projects is now done automatically through project inference. You can even customize how projects are inferred with a [project inference plugin](/recipes/advanced-plugins/project-inference-plugins).
 
 The target configuration for each project is now stored in individual `project.json` files or `package.json` files.
 

docs/shared/eslint-plugin-nx.md

@@ -84,8 +84,8 @@ You can use `enforce-module-boundaries` rule by adding it to your ESLint rules c
 Read more about proper usage of this rule:
 
 - [Enforce Project Boundaries](/core-features/enforce-project-boundaries)
-- [Ban Dependencies with Certain Tags](/recipe/ban-dependencies-with-tags)
-- [Tag in Multiple Dimensions](/recipe/tag-multiple-dimensions)
-- [Ban External Imports](/recipe/ban-external-imports)
-- [Tags Allow List](/recipe/tags-allow-list)
+- [Ban Dependencies with Certain Tags](/recipes/other/ban-dependencies-with-tags)
+- [Tag in Multiple Dimensions](/recipes/other/tag-multiple-dimensions)
+- [Ban External Imports](/recipes/other/ban-external-imports)
+- [Tags Allow List](/recipes/other/tags-allow-list)
 - [Taming Code Organization with Module Boundaries in Nx](https://blog.nrwl.io/mastering-the-project-boundaries-in-nx-f095852f5bf4)

docs/shared/generators/modifying-files.md

@@ -4,7 +4,7 @@ Modifying existing files is an order of magnitude harder than creating new files
 
 ## Compose Existing Generators
 
-If you can compose together existing generators to modify the files you need, you should take that approach. See [Composing Generators](/recipe/composing-generators) for more information.
+If you can compose together existing generators to modify the files you need, you should take that approach. See [Composing Generators](/recipes/generators/composing-generators) for more information.
 
 ## Modify JSON Files
 

docs/shared/getting-started/intro.md

@@ -19,7 +19,7 @@ Here's a deep dive on [Integrated Repos vs. Package-Based Repos](/concepts/integ
 ## Getting Started
 
 - [Nx core tutorial](/core-tutorial/01-create-blog) will help you understand the core of Nx.
-- [Adding Nx to an existing monorepo](/recipe/adding-to-monorepo) shows several paths to adopting Nx in your organization.
+- [Adding Nx to an existing monorepo](/recipes/adopting-nx/adding-to-monorepo) shows several paths to adopting Nx in your organization.
 - [Mental model](/concepts/mental-model) is a good starting point for those who like to understand things theoretically first.
 
 If you want to use Nx plugins to really level up your productivity, pick one of the following tutorials:

docs/shared/guides/customize-webpack.md

@@ -69,7 +69,7 @@ module.exports = (config, context) => {
 
 ## Module Federation
 
-If you use the [Module Federation](/recipe/faster-builds) support from `@nrwl/angular` or `@nrwl/react` then
+If you use the [Module Federation](/recipes/module-federation/faster-builds) support from `@nrwl/angular` or `@nrwl/react` then
 you can customize your webpack configuration as follows.
 
 ```typescript

docs/shared/guides/integrated-repo-folder-structure.md

@@ -16,7 +16,7 @@ myorg/
 
 `/libs/` contains the library projects. There are many kinds of libraries, and each library defines its own external API so that boundaries between libraries remain clear.
 
-`/tools/` contains scripts that act on your code base. This could be database scripts, [local executors](/recipe/creating-custom-executors), or [local generators](/recipe/local-generators).
+`/tools/` contains scripts that act on your code base. This could be database scripts, [local executors](/recipes/executors/creating-custom-executors), or [local generators](/recipes/generators/local-generators).
 
 `/nx.json` configures the Nx CLI itself. It tells Nx what needs to be cached, how to run tasks etc.
 

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

@@ -1,9 +1,9 @@
 # Micro Frontend Architecture
 
-Since version 14, Nx provides out-of-the-box [Module Federation](/recipe/faster-builds) support to both React
+Since version 14, Nx provides out-of-the-box [Module Federation](/recipes/module-federation/faster-builds) 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](/recipe/faster-builds) yet, we recommend that you read it
+If you have not read the [Module Federation guide](/recipes/module-federation/faster-builds) 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](/recipe/faster-builds).
+[Faster Builds with Module Federation](/recipes/module-federation/faster-builds).
 
 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](/recipe/faster-builds#architectural-overview)
+In a normal Module Federation setup, we [recommend setting up implicit dependencies](/recipes/module-federation/faster-builds#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.
 

docs/shared/guides/storybook/angular-storybook-compodoc.md

@@ -99,7 +99,7 @@ make sure to also include
 
 for the components to be included in the TypeScript compilation as well.
 
-This applies in cases where, for example, you have [one single Storybook for your whole workspace](/recipe/one-storybook-for-all), where you import stories from all the projects. In that case, you need to import all the components as well!
+This applies in cases where, for example, you have [one single Storybook for your whole workspace](/recipes/storybook/one-storybook-for-all), where you import stories from all the projects. In that case, you need to import all the components as well!
 {% /callout %}
 
 ### 3. Enable `compodoc` and configure it

docs/shared/guides/storybook/best-practices.md

@@ -132,9 +132,9 @@ Before moving on to the examples section, it could be useful to read the [Librar
 
 You can check out the following examples (recipes) to see publishing strategies for Storybook in Nx:
 
-- [One main Storybook instance for all projects](/recipe/one-storybook-for-all)
-- [One Storybook instance per scope](/recipe/one-storybook-per-scope)
-- [One main Storybook instance using Storybook Composition](/recipe/one-storybook-with-composition)
+- [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)
 
 ## Conclusion
 

docs/shared/guides/webpack-5.md

@@ -1,7 +1,7 @@
 # Webpack 5 Migration
 
 {% callout type="note" title="Customizing webpack" %}
-This page is for Nx 13 migration to Webpack 5, and is no longer applicable in Nx 14+. For customizing Webpack, see [our recipe on this topic](/recipe/customize-webpack).
+This page is for Nx 13 migration to Webpack 5, and is no longer applicable in Nx 14+. For customizing Webpack, see [our recipe on this topic](/recipes/other/customize-webpack).
 {% /callout %}
 
 Starting in Nx 13, we only support Webpack 5, which is automatically enabled for all workspaces.

docs/shared/guides/why-monorepos.md

@@ -3,7 +3,7 @@
 A monorepo is a single git repository that holds the source code for multiple applications and libraries, along with the tooling for them.
 
 {% callout type="note" title="Lerna users" %}
-If you are familiar with Lerna or Yarn workspaces, check out [this guide](/recipe/lerna-and-nx) (with a quick video) showing how to add Nx to a Lerna/Yarn workspace, what the difference is, when to use both and when to use just Nx.
+If you are familiar with Lerna or Yarn workspaces, check out [this guide](/recipes/adopting-nx/lerna-and-nx) (with a quick video) showing how to add Nx to a Lerna/Yarn workspace, what the difference is, when to use both and when to use just Nx.
 {% /callout %}
 
 ## What are the benefits of a monorepo?

docs/shared/incremental-builds.md

@@ -78,4 +78,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](/recipe/faster-builds)
+Learn more: [Faster Builds with Module Federation](/recipes/module-federation/faster-builds)

docs/shared/migration/adding-to-monorepo.md

@@ -1,7 +1,7 @@
 # Adding Nx to Lerna/Yarn/PNPM/NPM Workspace
 
 {% callout type="note" title="Migrating from Lerna?" %}
-Interested in migrating from [Lerna](https://github.com/lerna/lerna) in particular? In case you missed it, Nrwl, the company behind Nx, [took over stewardship of Lerna](https://blog.nrwl.io/lerna-is-dead-long-live-lerna-61259f97dbd9). This allows for a much better integration between the two. [Read more in our dedicated guide](/recipe/lerna-and-nx).
+Interested in migrating from [Lerna](https://github.com/lerna/lerna) in particular? In case you missed it, Nrwl, the company behind Nx, [took over stewardship of Lerna](https://blog.nrwl.io/lerna-is-dead-long-live-lerna-61259f97dbd9). This allows for a much better integration between the two. [Read more in our dedicated guide](/recipes/adopting-nx/lerna-and-nx).
 {% /callout %}
 
 **Short story:** you can use Nx easily together with your current Lerna/Yarn/PNPM/NPM monorepo setup. Why? To speed up
@@ -62,7 +62,7 @@ This sets up Nx core in your existing monorepo which comes with a series of inte
 
 ## Looking for integrating Lerna and Nx?
 
-Check out our dedicated guide: [Lerna and Nx](/recipe/lerna-and-nx)
+Check out our dedicated guide: [Lerna and Nx](/recipes/adopting-nx/lerna-and-nx)
 
 ## Further customizations
 

docs/shared/migration/manual.md

@@ -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](/recipe/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/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.
 
 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.
 

docs/shared/migration/migration-cra.md

@@ -8,7 +8,7 @@ You can either use a CLI tool to migrate your app automatically, or you can foll
 This guide has been updated for Nx 13 and may not work for earlier versions of Nx.
 {% /callout %}
 
-If you have a monorepo (more than one project in the same repo), follow the [Adding Nx to Lerna/Yarn/PNPM/NPM Workspace](/recipe/adding-to-monorepo) guide instead.
+If you have a monorepo (more than one project in the same repo), follow the [Adding Nx to Lerna/Yarn/PNPM/NPM Workspace](/recipes/adopting-nx/adding-to-monorepo) guide instead.
 
 ## Using a tool that will do it for you
 
@@ -21,7 +21,7 @@ npx cra-to-nx
 ```
 
 Then just sit back and wait. After a while, take advantage of the [full magic of Nx](/getting-started/intro).
-Start from [the commands mentioned in this article](/recipe/migration-cra#try-nx).
+Start from [the commands mentioned in this article](/recipes/adopting-nx/migration-cra#try-nx).
 
 {% callout type="caution" title="Commit your changes" %}
 The command will fail if you try to execute it, and you have uncommitted changes in your repository. Commit any local changes, and then try to run the command.

docs/shared/migration/preserving-git-histories.md

@@ -36,4 +36,4 @@ Note that for these files, the file history of the standalone project will not b
 
 ## Using `git mv`
 
-If your standalone project was not an Nx workspace, it's likely that your migration work will also entail moving directories to match a typical Nx Workspace structure. You can find more information in the [Manual migration](/recipe/manual) page, but when migrating an existing project, you'll want to ensure that you use [`git mv`](https://git-scm.com/docs/git-mv) when moving a file or directory to ensure that file history from the old standalone repo is not lost!
+If your standalone project was not an Nx workspace, it's likely that your migration work will also entail moving directories to match a typical Nx Workspace structure. You can find more information in the [Manual migration](/recipes/adopting-nx/manual) page, but when migrating an existing project, you'll want to ensure that you use [`git mv`](https://git-scm.com/docs/git-mv) when moving a file or directory to ensure that file history from the old standalone repo is not lost!

docs/shared/monorepo-ci-azure.md

@@ -46,7 +46,7 @@ The `main` job implements the CI workflow.
 
 In order to use distributed task execution, we need to start agents and set the `NX_CLOUD_DISTRIBUTED_EXECUTION` flag to `true`.
 
-Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci-setup#distributed-ci-with-nx-cloud).
+Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci/ci-setup#distributed-ci-with-nx-cloud).
 
 ```yaml
 trigger:

docs/shared/monorepo-ci-circle-ci.md

@@ -45,7 +45,7 @@ It should be a user token, not project token.
 
 In order to use distributed task execution, we need to start agents and set the `NX_CLOUD_DISTRIBUTED_EXECUTION` flag to `true`.
 
-Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci-setup#distributed-ci-with-nx-cloud).
+Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci/ci-setup#distributed-ci-with-nx-cloud).
 
 ```yaml
 version: 2.1

docs/shared/monorepo-ci-github-actions.md

@@ -38,7 +38,7 @@ The `pr` and `main` jobs implement the CI workflow. Setting `timeout-minutes` is
 
 In order to use distributed task execution, we need to start agents and set the `NX_CLOUD_DISTRIBUTED_EXECUTION` flag to `true`.
 
-Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci-setup#distributed-ci-with-nx-cloud).
+Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci/ci-setup#distributed-ci-with-nx-cloud).
 
 ```yaml
 name: CI

docs/shared/monorepo-ci-gitlab.md

@@ -67,7 +67,7 @@ The `build` and `test` jobs implement the CI workflow using `.distributed` as te
 
 In order to use distributed task execution, we need to start agents and set the `NX_CLOUD_DISTRIBUTED_EXECUTION` flag to `true`.
 
-Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci-setup#distributed-ci-with-nx-cloud).
+Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci/ci-setup#distributed-ci-with-nx-cloud).
 
 ```yaml
 image: node:18

docs/shared/monorepo-ci-jenkins.md

@@ -57,7 +57,7 @@ The `pr` and `main` jobs implement the CI workflow.
 
 In order to use distributed task execution, we need to start agents and set the `NX_CLOUD_DISTRIBUTED_EXECUTION` flag to `true`.
 
-Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci-setup#distributed-ci-with-nx-cloud).
+Read more about the [Distributed CI setup with Nx Cloud](/recipes/ci/ci-setup#distributed-ci-with-nx-cloud).
 
 ```groovy
 pipeline {

docs/shared/next-plugin.md

@@ -162,7 +162,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](/recipe/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/other/deploy-nextjs-to-vercel).
 
 ## More Documentation
 

docs/shared/nx-plugin.md

@@ -259,7 +259,7 @@ export default async function (tree: Tree, options: PresetGeneratorSchema) {
 }
 ```
 
-To get an in-depth guide on customizing/running or debugging your generator see [local generators](/recipe/local-generators).
+To get an in-depth guide on customizing/running or debugging your generator see [local generators](/recipes/generators/local-generators).
 
 #### Usage
 

docs/shared/plugin-features/create-your-own-plugin.md

@@ -29,7 +29,7 @@ Plugins have:
 
   - Plugins can provide a function `processProjectGraph` to add extra edges to the project graph.
   - This allows plugins to influence the behavior of `nx affected` and the project graph visualization.
-  - See [project graph plugins](/recipe/project-graph-plugins) for more information.
+  - See [project graph plugins](/recipes/advanced-plugins/project-graph-plugins) for more information.
 
 - **Project Inference Extensions**
 
@@ -43,7 +43,7 @@ All the core plugins are written using Nx Devkit, and you can use the same utili
 executors.
 
 {% callout type="check" title="Plugins!" %}
-The Nx team maintains a core set of plugins for many application and tooling frameworks. You can write [custom generators](/recipe/local-generators) and [executors](/recipe/creating-custom-executors) for your own workspace. You can also write your own plugin and share it with the community. The [Nx Plugin](/packages/nx-plugin) plugin provides guidance on how you can build your own custom plugins.
+The Nx team maintains a core set of plugins for many application and tooling frameworks. You can write [custom generators](/recipes/generators/local-generators) and [executors](/recipes/executors/creating-custom-executors) for your own workspace. You can also write your own plugin and share it with the community. The [Nx Plugin](/packages/nx-plugin) plugin provides guidance on how you can build your own custom plugins.
 {% /callout %}
 
 ### Local workspace plugins
@@ -74,7 +74,7 @@ Trees (ASTs), and more.
 ### Pay as you go
 
 As with most things in Nx, the core of Nx Devkit is very simple. It only uses language primitives and immutable
-objects (the tree being the only exception). See [Simplest Generator](/recipe/creating-files)
+objects (the tree being the only exception). See [Simplest Generator](/recipes/generators/creating-files)
 and [Simplest Executor](/plugin-features/use-task-executors#simplest-executor) for examples on creating generators
 and executors. The [Using Executors](/plugin-features/use-task-executors)
 and [Using Generators](/plugin-features/use-code-generators) guides also have additional information on executors
@@ -83,6 +83,6 @@ and generators.
 ## Learn more
 
 - [Creating and Publishing Your Own Nx Plugin - Youtube](https://www.youtube.com/watch?v=vVT7Al01VZc)
-- [Local generators](/recipe/local-generators)
-- [Local executors](/recipe/creating-custom-executors)
+- [Local generators](/recipes/generators/local-generators)
+- [Local executors](/recipes/executors/creating-custom-executors)
 - [Nx Community Plugins](/community)

docs/shared/plugin-features/use-code-generators.md

@@ -7,7 +7,7 @@ Generators provide a way to automate many tasks you regularly perform as part of
 There are three main types of generators:
 
 1. **Plugin Generators** are available when an Nx plugin has been installed in your workspace.
-2. **Local Generators** are generators that you can create for your own workspace. [Local generators](/recipe/local-generators) allow you to codify the processes that are unique to your own organization.
+2. **Local Generators** are generators that you can create for your own workspace. [Local generators](/recipes/generators/local-generators) allow you to codify the processes that are unique to your own organization.
 3. **Update Generators** are invoked by Nx plugins when you [update Nx](/recipes/adopting-nx) to keep your config files in sync with the latest versions of third party tools.
 
 ## Invoking Plugin Generators

docs/shared/recipes/adopt-nx.md

@@ -1,14 +0,0 @@
-# Adopting Nx
-
-There are several strategies you can use to adopt Nx in your organization, depending on where you're starting from.
-
-- [Nx and Lerna](/recipe/lerna-and-nx)
-- [NPM/Yarn/PNPM workspaces](/recipe/adding-to-monorepo)
-- [From CRA](/recipe/migration-cra)
-- [From Angular CLI](/recipe/migration-angular)
-- [From AngularJS](/recipe/migration-angularjs)
-- [Manual migration](/recipe/manual)
-
-Other recipes related to adopting Nx:
-
-- [Preserving Git Histories](/recipe/preserving-git-histories)

docs/shared/recipes/recipe-list.md

@@ -1,96 +0,0 @@
-# All Recipes
-
-## Getting Started
-
-- [Set up a new workspace](/recipe/set-up-a-new-workspace)
-
-## Nx Console
-
-- [Generate Command](/recipe/console-generate-command)
-- [Run Command](/recipe/console-run-command)
-- [Project Pane](/recipe/console-project-pane)
-- [Keyboard Shortcuts](/recipe/console-shortcuts)
-
-## CI
-
-- [Setting up Azure Pipelines](/recipe/monorepo-ci-azure)
-- [Setting up CircleCI](/recipe/monorepo-ci-circle-ci)
-- [Setting up GitHub Actions](/recipe/monorepo-ci-github-actions)
-- [Setting up Jenkins](/recipe/monorepo-ci-jenkins)
-- [Setting up GitLab](/recipe/monorepo-ci-gitlab)
-- [Setting up Bitbucket](/recipe/monorepo-ci-bitbucket-pipelines)
-
-## Adopting Nx
-
-- [Nx and Lerna](/recipe/lerna-and-nx)
-- [NPM/Yarn/PNPM workspaces](/recipe/adding-to-monorepo)
-- [From CRA](/recipe/migration-cra)
-- [From Angular CLI](/recipe/migration-angular)
-- [From AngularJS](/recipe/migration-angularjs)
-- [Manual migration](/recipe/manual)
-- [Preserving Git Histories](/recipe/preserving-git-histories)
-
-## Executors
-
-- [Use Executor Configurations](/recipe/use-executor-configurations)
-- [Running Custom Commands](/recipe/run-commands-executor)
-- [Creating Custom Executors](/recipe/creating-custom-executors)
-- [Compose Executors](/recipe/compose-executors)
-
-## Generators
-
-- [Local Generators](/recipe/local-generators)
-- [Composing Generators](/recipe/composing-generators)
-- [Generator Options](/recipe/generator-options)
-- [Creating Files](/recipe/creating-files)
-- [Modifying Files](/recipe/modifying-files)
-
-## Advanced Plugins
-
-- [Project Inference Plugins](/recipe/project-inference-plugins)
-- [Project Graph Plugins](/recipe/project-graph-plugins)
-
-## Environment Variables
-
-- [Define Environment Variables](/recipe/define-environment-variables)
-- [Use Environment Variables in React](/recipe/use-environment-variables-in-react)
-- [Use Environment Variables in Angular](/recipe/use-environment-variables-in-angular)
-
-## Module Federation and Micro Frontends
-
-- [Faster Builds with Module Federation](/recipe/faster-builds)
-- [Advanced Micro Frontends with Angular using Dynamic Federation](/recipe/dynamic-module-federation-with-angular)
-- [Nx Micro-Frontend Example](/recipe/nx-examples)
-
-## Storybook
-
-- [Publishing Storybook: One main Storybook instance for all projects](/recipe/one-storybook-for-all)
-- [Publishing Storybook: One Storybook instance per scope](/recipe/one-storybook-per-scope)
-- [Publishing Storybook: One main Storybook instance using Storybook Composition](/recipe/one-storybook-with-composition)
-
-## Other
-
-- [JavaScript and TypeScript](/recipe/js-and-ts)
-- [React Native with Nx](/recipe/react-native)
-- [Adding Images, Fonts, and Files](/recipe/adding-assets-react)
-- [Setup incremental builds for Angular applications](/recipe/setup-incremental-builds-angular)
-- [Profiling Build Performance](/recipe/performance-profiling)
-- [Using ESLint in Nx Workspaces](/recipe/eslint)
-- [Configuring Browser Support](/recipe/browser-support)
-- [Deploying Next.js applications to Vercel](/recipe/deploy-nextjs-to-vercel)
-- [Webpack 5 Migration](/recipe/webpack-5)
-- [Using Tailwind CSS in React](/recipe/using-tailwind-css-in-react)
-- [React 18 Migration](/recipe/react-18)
-- [Using Tailwind CSS with Angular projects](/recipe/using-tailwind-css-with-angular-projects)
-- [Using NgRx](/recipe/misc-ngrx)
-- [Using Data Persistence operators](/recipe/misc-data-persistence)
-- [Customizing Webpack Config](/recipe/customize-webpack)
-- [Powering Up React Development With Nx](/recipe/react-nx)
-- [Using Apollo GraphQL](/recipe/apollo-react)
-- [Large Repo and Caching](/recipe/caching)
-- [Large Repo and DTE](/recipe/dte)
-- [Ban Dependencies with Certain Tags](/recipe/ban-dependencies-with-tags)
-- [Tag in Multiple Dimensions](/recipe/tag-multiple-dimensions)
-- [Ban External Imports](/recipe/ban-external-imports)
-- [Tags Allow List](/recipe/tags-allow-list)
-- [Disable Graph Links Created from Analyzing Source Files](/recipe/analyze-source-files)

docs/shared/reference/environment-variables.md

@@ -1,7 +1,7 @@
 # Environment Variables
 
 | Property                       | Type    | Description                                                                                                                                                                                                                  |
-| ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | NX_VERBOSE_LOGGING             | boolean | If set to `true`, will print debug information useful for troubleshooting                                                                                                                                                    |
 | NX_PERF_LOGGING                | boolean | If set to `true`, will print debug information useful for for profiling executors and Nx itself                                                                                                                              |
 | NX_TASKS_RUNNER_DYNAMIC_OUTPUT | boolean | If set to `false`, will use non-dynamic terminal output strategy (what you see in CI), even when you terminal can support the dynamic version                                                                                |
@@ -9,4 +9,4 @@
 | NX_SKIP_NX_CACHE               | boolean | Rerun the tasks even when the results are available in the cache                                                                                                                                                             |
 | 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.                                                                                                   |
 | NX_DAEMON                      | boolean | If set to `false`, disables the Nx daemon process. Disable the daemon to print `console.log` statements in plugin code you are developing.                                                                                   |
-| NX_PROFILE                     | string  | Prepend `NX_PROFILE=profile.json` before running targets with Nx to generate a file that be [loaded in Chrome dev tools](/recipe/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/other/performance-profiling) to visualize the performance of Nx across multiple processes. |

docs/shared/workspace-plugin.md

@@ -4,7 +4,7 @@ The workspace plugin contains executors and generators that are useful for any N
 
 Codifying your organization's best practices into local generators is a great way to ensure that the best practices are easy to follow and implement. Running `nx g @nrwl/nx-plugin:plugin feature` will create a local plugin with a generator which is written the same way generators are written for Nx plugins.
 
-> See more about [local generators](/recipe/local-generators)
+> See more about [local generators](/recipes/generators/local-generators)
 
 ## Reorganizing Projects
 

graph/client/src/assets/graphs/nx.json

@@ -18139,15 +18139,15 @@
             "hash": "999f8854b2cf195f8a0a7b3026320a0a125174be"
           },
           {
-            "file": "docs/shared/recipes/advanced-update.md",
+            "file": "docs/shared/recipes/other/advanced-update.md",
             "hash": "6ad45fbb024118d6b3e6dbba0f9a8b910141331c"
           },
           {
-            "file": "docs/shared/recipes/ban-dependencies-with-tags.md",
+            "file": "docs/shared/recipes/other/ban-dependencies-with-tags.md",
             "hash": "c43e666d41fef0331bdc072f293a76d22eb9a607"
           },
           {
-            "file": "docs/shared/recipes/ban-external-imports.md",
+            "file": "docs/shared/recipes/other/ban-external-imports.md",
             "hash": "825cf907bf9aae69bbc97cc979b4b3edb5f71d9f"
           },
           {
@@ -18187,11 +18187,11 @@
             "hash": "c2113b3d68dfcb234ee225afe382b83847f21440"
           },
           {
-            "file": "docs/shared/recipes/tag-multiple-dimensions.md",
+            "file": "docs/shared/recipes/other/tag-multiple-dimensions.md",
             "hash": "70f7256551db65ad586d1c49f0e554acad993d19"
           },
           {
-            "file": "docs/shared/recipes/tags-allow-list.md",
+            "file": "docs/shared/recipes/other/tags-allow-list.md",
             "hash": "39262d8ac3bdc913d62f327f8c68f494c5d2e146"
           },
           {

nx-dev/data-access-documents/src/lib/documents.api.ts

@@ -249,7 +249,7 @@ export class DocumentsApi {
         if (
           curr.tags &&
           tags.some((tag) => curr.tags.includes(tag)) &&
-          acc.includes('recipe')
+          acc.includes('recipes')
         ) {
           curr.path = [...acc, curr.id].join('/');
           relatedRecipes.push(curr);

nx-dev/data-access-menu/src/lib/menu.api.ts

@@ -19,13 +19,12 @@ export class MenuApi {
     const items = createMenuItems(this.documents);
     if (!items) throw new Error(`Cannot find any documents`);
 
+    const isAncestor: boolean = Boolean(
+      items.length === 1 && items[0].itemList && items[0].itemList.length > 1
+    );
     menu = {
       sections: this.extractorFunctions.map((categorizer) =>
-        categorizer(
-          items.length === 1 && items[0].id === 'nx-cloud'
-            ? (items[0].itemList as MenuItem[])
-            : items
-        )
+        categorizer(isAncestor ? (items[0].itemList as MenuItem[]) : items)
       ),
     };
 

nx-dev/data-access-menu/src/lib/menu.utils.ts

@@ -45,6 +45,22 @@ export function getBasicSection(items: MenuItem[]): MenuSection {
   };
 }
 
+export function getBasicRecipesSection(items: MenuItem[]): MenuSection {
+  return {
+    id: 'basic',
+    name: 'Basic',
+    hideSectionHeader: true,
+    itemList: items
+      // .filter((m) => m.id === 'getting-started')
+      .map((m) => {
+        return {
+          ...m,
+          disableCollapsible: true,
+        };
+      }),
+  };
+}
+
 export function getDeepDiveSection(items: MenuItem[]): MenuSection {
   return {
     id: 'deep-dive',

nx-dev/nx-dev/lib/api.ts

@@ -6,6 +6,7 @@ import {
   getBasicNxCloudSection,
   getBasicSection,
   getDeepDiveNxCloudSection,
+  getBasicRecipesSection,
 } from '../../data-access-menu/src/lib/menu.utils';
 
 // Imports JSON directly, so they can be bundled into the app and functions.
@@ -17,7 +18,6 @@ export const packagesApi = new PackagesApi({
   publicPackagesRoot: 'nx-dev/nx-dev/public/documentation',
   packagesIndex: packages,
 });
-
 export const nxDocumentsApi = new DocumentsApi({
   publicDocsRoot: 'nx-dev/nx-dev/public/documentation',
   documentSources: [
@@ -26,7 +26,13 @@ export const nxDocumentsApi = new DocumentsApi({
   ].filter((x) => !!x) as DocumentMetadata[],
   addAncestor: null,
 });
-
+export const nxRecipesApi = new DocumentsApi({
+  publicDocsRoot: 'nx-dev/nx-dev/public/documentation',
+  documentSources: [documents.find((x) => x.id === 'nx-recipes')].filter(
+    (x) => !!x
+  ) as DocumentMetadata[],
+  addAncestor: { id: 'recipes', name: 'Recipes' },
+});
 export const nxCloudDocumentsApi = new DocumentsApi({
   publicDocsRoot: 'nx-dev/nx-dev/public/documentation',
   documentSources: [
@@ -40,7 +46,11 @@ export const nxMenuApi = new MenuApi(
   packagesApi.getPackageDocuments().itemList as DocumentMetadata[],
   [getBasicSection]
 );
-
+export const nxRecipesMenuApi = new MenuApi(
+  nxRecipesApi.getDocuments(),
+  [],
+  [getBasicRecipesSection]
+);
 export const nxCloudMenuApi = new MenuApi(
   nxCloudDocumentsApi.getDocuments(),
   [],

nx-dev/nx-dev/pages/[...segments].tsx

@@ -16,6 +16,8 @@ import {
   nxCloudMenuApi,
   nxDocumentsApi,
   nxMenuApi,
+  nxRecipesApi,
+  nxRecipesMenuApi,
   packagesApi,
 } from '../lib/api';
 import { useNavToggle } from '../lib/navigation-toggle.effect';
@@ -136,6 +138,10 @@ export const getStaticProps: GetStaticProps = async ({
     documentsApi = nxCloudDocumentsApi;
     menuApi = nxCloudMenuApi;
   }
+  if (params.segments[0] === 'recipes') {
+    documentsApi = nxRecipesApi;
+    menuApi = nxRecipesMenuApi;
+  }
 
   const menu = menuApi.getMenu();
 
@@ -217,6 +223,7 @@ export const getStaticPaths: GetStaticPaths = () => {
     paths: [
       ...packagesApi.getStaticPackagePaths(),
       ...nxDocumentsApi.getStaticDocumentPaths(),
+      ...nxRecipesApi.getStaticDocumentPaths(),
       ...nxCloudDocumentsApi.getStaticDocumentPaths(),
     ],
     fallback: 'blocking',

nx-dev/nx-dev/redirect-rules.config.js

@@ -181,30 +181,35 @@ const diataxis = {
   '/using-nx/caching': '/concepts/how-caching-works',
   '/using-nx/dte': '/core-features/distribute-task-execution',
   '/using-nx/affected': '/concepts/affected',
-  '/using-nx/ci-overview': '/recipes/ci-setup',
+  '/using-nx/ci-overview': '/recipes/ci/ci-setup',
   '/using-nx/updating-nx': '/core-features/automate-updating-dependencies',
   '/using-nx/nx-nodejs-typescript-version-matrix':
     '/workspace/nx-nodejs-typescript-version-matrix',
   '/extending-nx/nx-devkit': '/plugin-features/create-your-own-plugin',
   '/extending-nx/project-inference-plugins':
-    '/recipe/project-inference-plugins',
-  '/extending-nx/project-graph-plugins': '/recipe/project-graph-plugins',
-  '/migration/lerna-and-nx': '/recipe/lerna-and-nx',
-  '/migration/adding-to-monorepo': '/recipe/adding-to-monorepo',
-  '/migration/migration-cra': '/recipe/migration-cra',
-  '/migration/migration-angular': '/recipe/migration-angular',
-  '/migration/migration-angularjs': '/recipe/migration-angularjs',
-  '/migration/preserving-git-histories': '/recipe/preserving-git-histories',
-  '/migration/manual': '/recipe/manual',
+    '/recipes/advanced-plugins/project-inference-plugins',
+  '/extending-nx/project-graph-plugins':
+    '/recipes/advanced-plugins/project-graph-plugins',
+  '/migration/lerna-and-nx': '/recipes/adopting-nx/lerna-and-nx',
+  '/migration/adding-to-monorepo': '/recipes/adopting-nx/adding-to-monorepo',
+  '/migration/migration-cra': '/recipes/adopting-nx/migration-cra',
+  '/migration/migration-angular': '/recipes/adopting-nx/migration-angular',
+  '/migration/migration-angularjs': '/recipes/adopting-nx/migration-angularjs',
+  '/migration/preserving-git-histories':
+    '/recipes/adopting-nx/preserving-git-histories',
+  '/migration/manual': '/recipes/adopting-nx/manual',
   '/executors/using-builders': '/plugin-features/use-task-executors',
-  '/executors/run-commands-builder': '/recipe/run-commands-executor',
-  '/executors/creating-custom-builders': '/recipe/creating-custom-executors',
+  '/executors/run-commands-builder': '/recipes/executors/run-commands-executor',
+  '/executors/creating-custom-builders':
+    '/recipes/executors/creating-custom-executors',
   '/generators/using-generators': '/plugin-features/use-code-generators',
-  '/generators/workspace-generators': '/recipe/workspace-generators',
-  '/generators/composing-generators': '/recipe/composing-generators',
-  '/generators/generator-options': '/recipe/generator-options',
-  '/generators/creating-files': '/recipe/creating-files',
-  '/generators/modifying-files': '/recipe/modifying-files',
+  '/generators/workspace-generators':
+    '/recipes/generators/workspace-generators',
+  '/generators/composing-generators':
+    '/recipes/generators/composing-generators',
+  '/generators/generator-options': '/recipes/generators/generator-options',
+  '/generators/creating-files': '/recipes/generators/creating-files',
+  '/generators/modifying-files': '/recipes/generators/modifying-files',
   '/structure/applications-and-libraries':
     'more-concepts/applications-and-libraries',
   '/structure/creating-libraries': '/more-concepts/creating-libraries',
@@ -214,50 +219,53 @@ const diataxis = {
     '/more-concepts/buildable-and-publishable-libraries',
   '/structure/monorepo-tags': '/core-features/enforce-project-boundaries',
   '/structure/dependency-graph': '/core-features/explore-graph',
-  '/structure/project-graph-plugins': '/recipe/project-graph-plugins',
-  '/ci/monorepo-ci-azure': '/recipe/monorepo-ci-azure',
-  '/ci/monorepo-ci-circle-ci': '/recipe/monorepo-ci-circle-ci',
-  '/ci/monorepo-ci-github-actions': '/recipe/monorepo-ci-github-actions',
-  '/ci/monorepo-ci-jenkins': '/recipe/monorepo-ci-jenkins',
-  '/ci/monorepo-ci-gitlab': '/recipe/monorepo-ci-gitlab',
+  '/structure/project-graph-plugins':
+    '/recipes/advanced-plugins/project-graph-plugins',
+  '/ci/monorepo-ci-azure': '/recipes/ci/monorepo-ci-azure',
+  '/ci/monorepo-ci-circle-ci': '/recipes/ci/monorepo-ci-circle-ci',
+  '/ci/monorepo-ci-github-actions': '/recipes/ci/monorepo-ci-github-actions',
+  '/ci/monorepo-ci-jenkins': '/recipes/ci/monorepo-ci-jenkins',
+  '/ci/monorepo-ci-gitlab': '/recipes/ci/monorepo-ci-gitlab',
   '/ci/monorepo-ci-bitbucket-pipelines':
-    '/recipe/monorepo-ci-bitbucket-pipelines',
+    '/recipes/ci/monorepo-ci-bitbucket-pipelines',
   '/ci/distributed-builds': '/concepts/dte', // 👀
   '/ci/incremental-builds': '/more-concepts/incremental-builds',
   '/ci/setup-incremental-builds-angular':
-    '/recipe/setup-incremental-builds-angular',
+    '/recipes/other/setup-incremental-builds-angular',
   '/guides/turbo-and-nx': '/more-concepts/turbo-and-nx',
   '/guides/why-monorepos': '/more-concepts/why-monorepos',
-  '/guides/adding-assets-react': '/recipe/adding-assets-react',
+  '/guides/adding-assets-react': '/recipes/other/adding-assets-react',
   '/guides/environment-variables': '/reference/environment-variables',
   '/guides/monorepo-nx-enterprise': '/more-concepts/monorepo-nx-enterprise',
-  '/guides/performance-profiling': '/recipe/performance-profiling',
-  '/guides/eslint': '/recipe/eslint',
-  '/guides/customize-webpack': '/recipe/customize-webpack',
+  '/guides/performance-profiling': '/recipes/other/performance-profiling',
+  '/guides/eslint': '/recipes/other/eslint',
+  '/guides/customize-webpack': '/recipes/other/customize-webpack',
   '/guides/nx-daemon': '/more-concepts/nx-daemon',
-  '/guides/js-and-ts': '/recipe/js-and-ts',
-  '/guides/browser-support': '/recipe/browser-support',
-  '/guides/react-native': '/recipe/react-native',
-  '/guides/deploy-nextjs-to-vercel': '/recipe/deploy-nextjs-to-vercel',
-  '/guides/webpack-5': '/recipe/webpack-5',
-  '/guides/using-tailwind-css-in-react': '/recipe/using-tailwind-css-in-react',
-  '/guides/react-18': '/recipe/react-18',
+  '/guides/js-and-ts': '/recipes/other/js-and-ts',
+  '/guides/browser-support': '/recipes/other/browser-support',
+  '/guides/react-native': '/recipes/other/react-native',
+  '/guides/deploy-nextjs-to-vercel': '/recipes/other/deploy-nextjs-to-vercel',
+  '/guides/webpack-5': '/recipes/other/webpack-5',
+  '/guides/using-tailwind-css-in-react':
+    '/recipes/other/using-tailwind-css-in-react',
+  '/guides/react-18': '/recipes/other/react-18',
   '/guides/using-tailwind-css-with-angular-projects':
-    '/recipe/using-tailwind-css-with-angular-projects',
-  '/guides/misc-ngrx': '/recipe/misc-ngrx',
-  '/guides/misc-data-persistence': '/recipe/misc-data-persistence',
+    '/recipes/other/using-tailwind-css-with-angular-projects',
+  '/guides/misc-ngrx': '/recipes/other/misc-ngrx',
+  '/guides/misc-data-persistence': '/recipes/other/misc-data-persistence',
   '/guides/nx-devkit-angular-devkit': '/more-concepts/nx-devkit-angular-devkit',
-  '/module-federation/faster-builds': '/recipe/faster-builds',
+  '/module-federation/faster-builds':
+    '/recipes/module-federation/faster-builds',
   '/module-federation/micro-frontend-architecture':
     '/more-concepts/micro-frontend-architecture',
   '/module-federation/dynamic-module-federation-with-angular':
-    '/recipe/dynamic-module-federation-with-angular',
-  '/examples/nx-examples': '/recipe/nx-examples',
-  '/examples/react-nx': '/recipe/react-nx',
-  '/examples/apollo-react': '/recipe/apollo-react',
-  '/examples/caching': '/recipe/caching',
-  '/examples/dte': '/recipe/dte',
-  '/recipe/workspace-generators': '/recipe/local-generators',
+    '/recipes/module-federation/dynamic-module-federation-with-angular',
+  '/examples/nx-examples': '/recipes/other/nx-examples',
+  '/examples/react-nx': '/recipes/other/react-nx',
+  '/examples/apollo-react': '/recipes/other/apollo-react',
+  '/examples/caching': '/recipes/other/caching',
+  '/examples/dte': '/recipes/other/dte',
+  '/recipe/workspace-generators': '/recipes/generators/local-generators',
 };
 
 /**

nx-dev/ui-common/src/lib/documentation-header.tsx

@@ -63,7 +63,7 @@ export function DocumentationHeader({
     },
     {
       name: 'Recipes',
-      href: '/recipes/all',
+      href: '/recipes',
       current: isRecipes,
     },
   ];

nx-dev/ui-common/src/lib/header.tsx

@@ -35,7 +35,7 @@ export function Header(): JSX.Element {
     {
       name: 'Recipes',
       description: 'Follow instructions to do common specific tasks.',
-      href: '/recipes/all',
+      href: '/recipes',
     },
     {
       name: 'VSCode integration',