From 437bad4aacd732defe473a6f5d671a000ae48960 Mon Sep 17 00:00:00 2001 From: Juri Date: Tue, 4 Mar 2025 16:22:15 +0100 Subject: [PATCH] docs(misc): add description frontmatter for better SEO --- .../documents/angular-nx-version-matrix.md | 5 ++++ .../angular/documents/nx-and-angular.md | 5 ++++ .../documents/nx-devkit-angular-devkit.md | 5 ++++ .../packages/detox/documents/overview.md | 5 ++++ .../documents/dependency-checks.md | 5 ++++ .../documents/enforce-module-boundaries.md | 5 ++++ .../eslint-plugin/documents/overview.md | 5 ++++ .../packages/eslint/documents/overview.md | 5 ++++ .../packages/expo/documents/overview.md | 5 ++++ .../packages/express/documents/overview.md | 5 ++++ .../packages/nest/documents/overview.md | 5 ++++ .../packages/node/documents/overview.md | 5 ++++ .../packages/plugin/documents/overview.md | 5 ++++ .../packages/react/documents/overview.md | 5 ++++ .../packages/web/documents/overview.md | 5 ++++ .../nx-nodejs-typescript-version-matrix.md | 5 ++++ .../packages/workspace/documents/overview.md | 5 ++++ .../buildable-and-publishable-libraries.md | 13 ++++++--- docs/shared/concepts/common-tasks.md | 2 ++ docs/shared/concepts/daemon.md | 5 ++++ .../concepts/decisions/code-ownership.md | 5 ++++ .../decisions/dependency-management.md | 5 ++++ .../concepts/decisions/folder-structure.md | 7 ++++- .../concepts/decisions/monorepo-polyrepo.md | 5 ++++ docs/shared/concepts/decisions/monorepos.md | 9 +++++-- .../decisions/project-dependency-rules.md | 5 ++++ .../shared/concepts/decisions/project-size.md | 5 ++++ .../concepts/executors-and-configurations.md | 5 ++++ docs/shared/concepts/how-caching-works.md | 12 ++++++--- docs/shared/concepts/inferred-tasks.md | 5 ++++ docs/shared/concepts/mental-model.md | 25 ++++++++++------- .../module-federation/faster-builds.md | 5 ++++ ...library-versions-with-module-federation.md | 5 ++++ .../micro-frontend-architecture.md | 5 ++++ .../module-federation-and-nx.md | 5 ++++ ...nx-module-federation-technical-overview.md | 5 ++++ docs/shared/concepts/nx-plugins.md | 5 ++++ docs/shared/concepts/sync-generators.md | 5 ++++ .../concepts/task-pipeline-configuration.md | 5 ++++ .../shared/concepts/types-of-configuration.md | 5 ++++ .../concepts/typescript-project-linking.md | 5 ++++ .../deprecated/angular-schematics-builders.md | 5 ++++ .../deprecated/as-provided-vs-derived.md | 5 ++++ .../shared/deprecated/cacheable-operations.md | 5 ++++ docs/shared/deprecated/custom-tasks-runner.md | 9 +++++-- .../global-implicit-dependencies.md | 5 ++++ .../deprecated/integrated-vs-package-based.md | 5 +++- docs/shared/deprecated/legacy-cache.md | 5 ++++ docs/shared/deprecated/npm-scope.md | 5 ++++ docs/shared/deprecated/rescope.md | 5 ++++ .../shared/deprecated/runtime-cache-inputs.md | 5 ++++ docs/shared/deprecated/v1-nx-plugin-api.md | 5 ++++ docs/shared/deprecated/workspace-executors.md | 5 ++++ .../shared/deprecated/workspace-generators.md | 5 ++++ docs/shared/deprecated/workspace-json.md | 5 ++++ docs/shared/eslint.md | 5 ++++ docs/shared/examples/apollo-react.md | 7 ++++- docs/shared/examples/caching.md | 5 ++++ docs/shared/examples/nx-agents.md | 5 ++++ docs/shared/examples/nx-examples.md | 5 ++++ docs/shared/examples/tsc-batch-mode.md | 5 ++++ .../automate-updating-dependencies.md | 2 ++ docs/shared/features/cache-task-results.md | 5 ++++ .../features/distribute-task-execution.md | 2 ++ .../features/enforce-module-boundaries.md | 5 ++++ docs/shared/features/enhance-AI.md | 5 ++++ docs/shared/features/generate-code.md | 5 ++++ .../features/maintain-typescript-monorepos.md | 5 ++++ docs/shared/features/manage-releases.md | 5 ++++ docs/shared/features/powerpack/conformance.md | 5 ++++ .../features/powerpack/custom-caching.md | 5 ++++ .../powerpack/free-licenses-and-trials.md | 5 ++++ docs/shared/features/powerpack/index.md | 5 ++++ docs/shared/features/powerpack/owners.md | 5 ++++ docs/shared/features/remote-cache.md | 7 ++++- docs/shared/features/run-tasks.md | 5 ++++ docs/shared/getting-started/editor-setup.md | 5 ++++ docs/shared/getting-started/installation.md | 5 ++++ docs/shared/getting-started/intro.md | 5 ++++ docs/shared/getting-started/why-nx.md | 5 ++++ docs/shared/guides/adding-assets.md | 5 ++++ docs/shared/guides/browser-support.md | 5 ++++ .../guides/define-environment-variables.md | 5 ++++ docs/shared/guides/js-and-ts.md | 5 ++++ docs/shared/guides/nx-and-angular-cli.md | 5 ++++ .../shared/guides/nx-devkit-angular-devkit.md | 5 ++++ docs/shared/guides/performance-profiling.md | 5 ++++ docs/shared/guides/react-compiler.md | 5 ++++ docs/shared/guides/react-native.md | 5 ++++ docs/shared/guides/remix.md | 5 ++++ .../setup-incremental-builds-angular.md | 9 +++++-- .../troubleshoot-convert-to-inferred.md | 5 ++++ docs/shared/guides/unknown-local-cache.md | 5 ++++ .../use-environment-variables-in-angular.md | 5 ++++ .../use-environment-variables-in-react.md | 5 ++++ .../guides/using-tailwind-css-in-react.md | 5 ++++ ...sing-tailwind-css-with-angular-projects.md | 5 ++++ .../installation/troubleshoot-installation.md | 5 ++++ .../migration/adding-to-existing-project.md | 5 ++++ docs/shared/migration/adding-to-monorepo.md | 5 ++++ docs/shared/migration/angular-multiple.md | 5 ++++ docs/shared/migration/from-turborepo.md | 5 ++++ docs/shared/migration/import-project.md | 5 ++++ docs/shared/migration/manual.md | 5 ++++ docs/shared/migration/migration-angular.md | 7 ++++- .../migration/preserving-git-histories.md | 5 ++++ docs/shared/monorepo-ci-azure.md | 5 ++++ .../shared/monorepo-ci-bitbucket-pipelines.md | 5 ++++ docs/shared/monorepo-ci-circle-ci.md | 5 ++++ docs/shared/monorepo-ci-github-actions.md | 5 ++++ docs/shared/monorepo-ci-gitlab.md | 5 ++++ docs/shared/monorepo-ci-jenkins.md | 5 ++++ .../angular/angular-nx-version-matrix.md | 5 ++++ .../cypress/cypress-component-testing.md | 5 ++++ .../cypress/cypress-setup-node-events.md | 5 ++++ .../packages/cypress/cypress-v11-migration.md | 5 ++++ docs/shared/packages/detox/detox-plugin.md | 5 ++++ .../packages/eslint/dependency-checks.md | 5 ++++ .../eslint/enforce-module-boundaries.md | 5 ++++ docs/shared/packages/eslint/eslint-plugin.md | 5 ++++ docs/shared/packages/eslint/eslint.md | 5 ++++ docs/shared/packages/expo/expo-plugin.md | 5 ++++ .../shared/packages/express/express-plugin.md | 5 ++++ docs/shared/packages/nest/nest-plugin.md | 5 ++++ docs/shared/packages/node/node-plugin.md | 5 ++++ docs/shared/packages/plugin/plugin.md | 5 ++++ .../create-conformance-rule.md | 5 ++++ docs/shared/packages/react/react-plugin.md | 5 ++++ docs/shared/packages/web/web-plugin.md | 5 ++++ .../workspace/nx-compatibility-matrix.md | 5 ++++ .../packages/workspace/workspace-plugin.md | 5 ++++ docs/shared/plugins/intro.md | 5 ++++ .../plugins/organization-specific-plugin.md | 5 ++++ docs/shared/plugins/tooling-plugin.md | 5 ++++ docs/shared/recipes/add-stack/add-astro.md | 5 ++++ docs/shared/recipes/add-stack/add-dotnet.md | 5 ++++ docs/shared/recipes/add-stack/add-express.md | 5 ++++ docs/shared/recipes/add-stack/add-fastify.md | 5 ++++ docs/shared/recipes/add-stack/add-lit.md | 5 ++++ docs/shared/recipes/add-stack/add-qwik.md | 5 ++++ docs/shared/recipes/add-stack/add-rust.md | 5 ++++ docs/shared/recipes/add-stack/add-solid.md | 5 ++++ docs/shared/recipes/add-stack/add-svelte.md | 5 ++++ docs/shared/recipes/advanced-update.md | 5 ++++ docs/shared/recipes/analyze-source-files.md | 5 ++++ .../recipes/ban-dependencies-with-tags.md | 5 ++++ docs/shared/recipes/ban-external-imports.md | 5 ++++ docs/shared/recipes/ci-deployment.md | 5 ++++ .../recipes/console-generate-command.md | 5 ++++ docs/shared/recipes/console-nx-cloud.md | 5 ++++ .../shared/recipes/console-project-details.md | 5 ++++ docs/shared/recipes/console-run-command.md | 5 ++++ docs/shared/recipes/console-telemetry.md | 5 ++++ .../shared/recipes/console-troubleshooting.md | 5 ++++ docs/shared/recipes/database/mongo-fastify.md | 7 ++++- docs/shared/recipes/database/nestjs-prisma.md | 7 ++++- .../recipes/database/postgres-fastify.md | 7 ++++- docs/shared/recipes/database/redis-fastify.md | 7 ++++- .../serverless-fastify-planetscale.md | 7 ++++- .../deployment/deploy-nextjs-to-vercel.md | 5 ++++ .../recipes/deployment/node-aws-lambda.md | 5 ++++ .../recipes/deployment/node-server-fly-io.md | 5 ++++ .../node-serverless-functions-netlify.md | 5 ++++ docs/shared/recipes/enable-tsc-batch-mode.md | 5 ++++ .../generators/composing-generators.md | 5 ++++ .../generators/create-sync-generator.md | 5 ++++ .../recipes/generators/creating-files.md | 5 ++++ .../recipes/generators/generator-options.md | 5 ++++ .../recipes/generators/local-generators.md | 5 ++++ .../recipes/generators/modifying-files.md | 5 ++++ .../identify-dependencies-between-folders.md | 5 ++++ .../shared/recipes/include-all-packagejson.md | 5 ++++ .../shared/recipes/include-assets-in-build.md | 5 ++++ .../installation/activate-powerpack.md | 5 ++++ .../installation/install-non-javascript.md | 5 ++++ .../update-global-installation.md | 5 ++++ .../recipes/module-federation-with-ssr.md | 5 ++++ .../module-federation/creating-a-host.md | 5 ++++ .../module-federation/creating-a-remote.md | 5 ++++ .../module-federation/dynamic-mfe-angular.md | 27 +++++++++++-------- .../module-federation/federate-a-module.md | 5 ++++ .../recipes/node/application-proxies.md | 5 ++++ docs/shared/recipes/node/wait-for-tasks.md | 5 ++++ .../nx-release/automate-github-releases.md | 5 ++++ ...cally-version-with-conventional-commits.md | 5 ++++ .../nx-release/build-before-versioning.md | 5 ++++ .../configuration-version-prefix.md | 7 ++++- .../nx-release/configure-changelog-format.md | 5 ++++ .../nx-release/configure-custom-registries.md | 5 ++++ .../customize-conventional-commit-types.md | 5 ++++ .../file-based-versioning-version-plans.md | 5 ++++ .../nx-release/get-started-with-nx-release.md | 5 ++++ .../recipes/nx-release/publish-in-ci-cd.md | 5 ++++ .../recipes/nx-release/publish-rust-crates.md | 5 ++++ .../release-projects-independently.md | 5 ++++ .../nx-release/update-local-registry-setup.md | 5 ++++ .../nx-release/updating-version-references.md | 5 ++++ .../recipes/plugins/compose-executors.md | 5 ++++ .../recipes/plugins/create-install-package.md | 5 ++++ docs/shared/recipes/plugins/create-preset.md | 5 ++++ .../shared/recipes/plugins/local-executors.md | 11 +++++--- .../recipes/plugins/migration-generators.md | 5 ++++ .../recipes/plugins/project-graph-plugins.md | 7 ++++- docs/shared/recipes/plugins/publish-plugin.md | 5 ++++ .../recipes/resolve-circular-dependencies.md | 5 ++++ .../running-tasks/change-cache-location.md | 5 ++++ .../running-tasks/convert-to-inferred.md | 5 ++++ .../reduce-repetitive-configuration.md | 5 ++++ .../running-tasks/root-level-scripts.md | 5 ++++ .../running-tasks/run-tasks-in-parallel.md | 5 ++++ .../running-tasks/running-custom-commands.md | 5 ++++ .../recipes/running-tasks/skipping-cache.md | 5 ++++ .../running-tasks/workspace-watching.md | 5 ++++ .../shared/recipes/tag-multiple-dimensions.md | 5 ++++ docs/shared/recipes/tags-allow-list.md | 5 ++++ .../tips-n-tricks/compile-multiple-formats.md | 5 ++++ .../define-secondary-entrypoints.md | 5 ++++ .../tips-n-tricks/keep-nx-versions-in-sync.md | 5 ++++ .../tips-n-tricks/migrating-to-flat-eslint.md | 5 ++++ .../tips-n-tricks/standalone-to-monorepo.md | 5 ++++ ...switch-to-workspaces-project-references.md | 5 ++++ .../recipes/troubleshoot-cache-misses.md | 5 ++++ docs/shared/recipes/yarn-pnp.md | 5 ++++ docs/shared/reference/commands.md | 5 ++++ .../shared/reference/environment-variables.md | 5 ++++ docs/shared/reference/glossary.md | 5 ++++ docs/shared/reference/inputs.md | 5 ++++ docs/shared/reference/nx-json.md | 5 ++++ docs/shared/reference/nxignore.md | 5 ++++ .../shared/reference/project-configuration.md | 1 + docs/shared/reference/releases.md | 5 ++++ docs/shared/showcase/example-repos.md | 5 ++++ docs/shared/using-nx/affected.md | 5 ++++ nx.json | 2 +- 234 files changed, 1200 insertions(+), 51 deletions(-) diff --git a/docs/generated/packages/angular/documents/angular-nx-version-matrix.md b/docs/generated/packages/angular/documents/angular-nx-version-matrix.md index 4ba0f4eace..1e21ee8dae 100644 --- a/docs/generated/packages/angular/documents/angular-nx-version-matrix.md +++ b/docs/generated/packages/angular/documents/angular-nx-version-matrix.md @@ -1,3 +1,8 @@ +--- +title: Nx and Angular Versions +description: A comprehensive compatibility matrix showing which Nx versions work with different Angular versions, including recommended versions and supported ranges. +--- + # Nx and Angular Versions The latest version of Nx supports the [actively supported versions of Angular (current and LTS versions)](https://angular.dev/reference/releases#actively-supported-versions). Workspaces in any of those versions are recommended to use the latest version of Nx to benefit from all the new features and fixes. diff --git a/docs/generated/packages/angular/documents/nx-and-angular.md b/docs/generated/packages/angular/documents/nx-and-angular.md index 1694ae540c..7cf032e569 100644 --- a/docs/generated/packages/angular/documents/nx-and-angular.md +++ b/docs/generated/packages/angular/documents/nx-and-angular.md @@ -1,3 +1,8 @@ +--- +title: Nx and the Angular CLI +description: Compare Nx and Angular CLI features, understand similarities and differences, and learn how Nx enhances Angular development with improved caching, monorepo support, and advanced tooling. +--- + # Nx and the Angular CLI {% youtube diff --git a/docs/generated/packages/angular/documents/nx-devkit-angular-devkit.md b/docs/generated/packages/angular/documents/nx-devkit-angular-devkit.md index ba7e8b8537..4fb4459e2a 100644 --- a/docs/generated/packages/angular/documents/nx-devkit-angular-devkit.md +++ b/docs/generated/packages/angular/documents/nx-devkit-angular-devkit.md @@ -1,3 +1,8 @@ +--- +title: Nx Devkit and Angular Devkit +description: Compare Nx Devkit and Angular Devkit for creating generators and executors, understand key differences in implementation, and learn how to convert between the two approaches. +--- + # Nx Devkit and Angular Devkit {% callout type="note" title="Nx & Angular" %} diff --git a/docs/generated/packages/detox/documents/overview.md b/docs/generated/packages/detox/documents/overview.md index a59bf6a0b9..8ed98c5ca9 100644 --- a/docs/generated/packages/detox/documents/overview.md +++ b/docs/generated/packages/detox/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Detox Plugin for Nx +description: Learn how to set up and use Detox for end-to-end testing of mobile applications in your Nx workspace, including environment setup and configuration options. +--- + Detox is gray box end-to-end testing and automation library for mobile apps. It has a lot of great features: - Cross Platform diff --git a/docs/generated/packages/eslint-plugin/documents/dependency-checks.md b/docs/generated/packages/eslint-plugin/documents/dependency-checks.md index 7972ee0f17..e0f5a1fa62 100644 --- a/docs/generated/packages/eslint-plugin/documents/dependency-checks.md +++ b/docs/generated/packages/eslint-plugin/documents/dependency-checks.md @@ -1,3 +1,8 @@ +--- +title: Dependency Checks ESLint Rule +description: Learn how to use the @nx/dependency-checks ESLint rule to identify mismatches between dependencies in package.json and actual project dependencies. +--- + # Dependency Checks rule The `@nx/dependency-checks` ESLint rule enables you to discover mismatches between dependencies specified in a project's `package.json` and the dependencies that your project depends on. If your project is using, for example, the `axios`, but the `package.json` does not specify it as a dependency, your library might not work correctly. This rule helps catch these problems before your users do. diff --git a/docs/generated/packages/eslint-plugin/documents/enforce-module-boundaries.md b/docs/generated/packages/eslint-plugin/documents/enforce-module-boundaries.md index ba951d72fb..f20eed5ab2 100644 --- a/docs/generated/packages/eslint-plugin/documents/enforce-module-boundaries.md +++ b/docs/generated/packages/eslint-plugin/documents/enforce-module-boundaries.md @@ -1,3 +1,8 @@ +--- +title: Enforce Module Boundaries ESLint Rule +description: Learn how to use the @nx/enforce-module-boundaries ESLint rule to define strict rules for accessing resources between different projects in your Nx workspace. +--- + # Enforce module boundaries rule The `@nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between diff --git a/docs/generated/packages/eslint-plugin/documents/overview.md b/docs/generated/packages/eslint-plugin/documents/overview.md index 297855bec6..7f7b8da42a 100644 --- a/docs/generated/packages/eslint-plugin/documents/overview.md +++ b/docs/generated/packages/eslint-plugin/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Nx ESLint Plugin +description: An overview of the @nx/eslint-plugin package, which provides recommended ESLint configurations and Nx-specific rules for enforcing module boundaries and dependency checks. +--- + The `@nx/eslint-plugin` package is an ESLint plugin that contains a collection of recommended ESLint rule configurations which you can extend from in your own ESLint configs, as well as the following Nx-specific ESLint rules: - [enforce-module-boundaries](#enforce-module-boundaries-rule) diff --git a/docs/generated/packages/eslint/documents/overview.md b/docs/generated/packages/eslint/documents/overview.md index d6facce4a1..cf1202fcba 100644 --- a/docs/generated/packages/eslint/documents/overview.md +++ b/docs/generated/packages/eslint/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: ESLint Plugin for Nx +description: Learn how to set up and use the @nx/eslint plugin to integrate ESLint with Nx, enabling caching and providing code generators for ESLint configuration. +--- + The ESLint plugin integrates [ESLint](https://eslint.org/) with Nx. It allows you to run ESLint through Nx with caching enabled. It also includes code generators to help you set up ESLint in your workspace. ## Setting Up @nx/eslint diff --git a/docs/generated/packages/expo/documents/overview.md b/docs/generated/packages/expo/documents/overview.md index e98b5ea894..e85ff4dbf2 100644 --- a/docs/generated/packages/expo/documents/overview.md +++ b/docs/generated/packages/expo/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Expo Plugin for Nx +description: Learn how to use the @nx/expo plugin to manage Expo applications and libraries within an Nx workspace, including setup, configuration, and task inference. +--- + Expo is an open-source framework for apps that run natively on Android, iOS, and the web. Expo brings together the best of mobile and the web and enables many important features for building and scaling an app. Expo is a set of tools built on top of React Native. The Nx Plugin for Expo contains generators for managing Expo applications and libraries within an Nx workspace. diff --git a/docs/generated/packages/express/documents/overview.md b/docs/generated/packages/express/documents/overview.md index 5e2b837e7b..28cd40be66 100644 --- a/docs/generated/packages/express/documents/overview.md +++ b/docs/generated/packages/express/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Express Plugin for Nx +description: Learn how to use the @nx/express plugin to create and manage Express applications in your Nx workspace, including setup and common recipes. +--- + [Express](https://expressjs.com/) is a mature, minimal, and an open source web framework for making web applications and apis. diff --git a/docs/generated/packages/nest/documents/overview.md b/docs/generated/packages/nest/documents/overview.md index 07b49ac3fc..4af2ceaa4a 100644 --- a/docs/generated/packages/nest/documents/overview.md +++ b/docs/generated/packages/nest/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Nest.js Plugin for Nx +description: Learn how to use the @nx/nest plugin to create and manage Nest.js applications and libraries in your Nx workspace, including setup and generators. +--- + Nest.js is a framework designed for building scalable server-side applications. In many ways, Nest is familiar to Angular developers: - It has excellent TypeScript support. diff --git a/docs/generated/packages/node/documents/overview.md b/docs/generated/packages/node/documents/overview.md index 425175150c..fc9dd49384 100644 --- a/docs/generated/packages/node/documents/overview.md +++ b/docs/generated/packages/node/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Node.js Plugin for Nx +description: Learn how to use the @nx/node plugin to create and manage Node.js applications and libraries in your Nx workspace, including setup, building, and testing. +--- + The Node Plugin contains generators and executors to manage Node applications within an Nx workspace. It provides: ## Setting Up @nx/node diff --git a/docs/generated/packages/plugin/documents/overview.md b/docs/generated/packages/plugin/documents/overview.md index 30179db3da..c22c609a43 100644 --- a/docs/generated/packages/plugin/documents/overview.md +++ b/docs/generated/packages/plugin/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Nx Plugin Development +description: Learn about the @nx/plugin package, which provides tooling to help create and maintain Nx plugins with generators and executors. +--- + Nx plugins are npm packages that contain [generators](/features/generate-code) and [executors](/concepts/executors-and-configurations) to extend a Nx workspace. This package contains tooling to help plugin authors create and maintain plugins. diff --git a/docs/generated/packages/react/documents/overview.md b/docs/generated/packages/react/documents/overview.md index 4099c70688..d917ba6340 100644 --- a/docs/generated/packages/react/documents/overview.md +++ b/docs/generated/packages/react/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: React Plugin for Nx +description: Learn how to use the @nx/react plugin to create and manage React applications and libraries in your Nx workspace, including components, hooks, and more. +--- + The React plugin contains executors and generators for managing React applications and libraries within an Nx workspace. It provides: diff --git a/docs/generated/packages/web/documents/overview.md b/docs/generated/packages/web/documents/overview.md index 423c96727c..35cc04286a 100644 --- a/docs/generated/packages/web/documents/overview.md +++ b/docs/generated/packages/web/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Web Plugin for Nx +description: Learn how to use the @nx/web plugin to create and manage Web Component applications and libraries in your Nx workspace, including testing and building. +--- + The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides: - Integration with libraries such as Jest, Cypress, and Storybook. diff --git a/docs/generated/packages/workspace/documents/nx-nodejs-typescript-version-matrix.md b/docs/generated/packages/workspace/documents/nx-nodejs-typescript-version-matrix.md index 3b8eb6e73f..2b5d1ade49 100644 --- a/docs/generated/packages/workspace/documents/nx-nodejs-typescript-version-matrix.md +++ b/docs/generated/packages/workspace/documents/nx-nodejs-typescript-version-matrix.md @@ -1,3 +1,8 @@ +--- +title: Nx, NodeJS and TypeScript Compatibility Matrix +description: A reference table showing which versions of Node.js and TypeScript are compatible with different major versions of Nx. +--- + # Nx, NodeJS and TypeScript Compatibility Matrix Below is a reference table that matches versions the latest major versions of Nx to the version TypeScript that it uses diff --git a/docs/generated/packages/workspace/documents/overview.md b/docs/generated/packages/workspace/documents/overview.md index 53a97b2c87..93e1a386ca 100644 --- a/docs/generated/packages/workspace/documents/overview.md +++ b/docs/generated/packages/workspace/documents/overview.md @@ -1,3 +1,8 @@ +--- +title: Workspace Plugin for Nx +description: Learn about the core workspace plugin that provides essential executors and generators for any Nx workspace, including tools for project management. +--- + 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. ## Creating Local Generators diff --git a/docs/shared/concepts/buildable-and-publishable-libraries.md b/docs/shared/concepts/buildable-and-publishable-libraries.md index 805b84102b..1237e2396e 100644 --- a/docs/shared/concepts/buildable-and-publishable-libraries.md +++ b/docs/shared/concepts/buildable-and-publishable-libraries.md @@ -1,3 +1,8 @@ +--- +title: Publishable and Buildable Nx Libraries +description: Learn about buildable and publishable libraries in Nx, when to use them, and how they adjust your project configuration for distribution. +--- + # Publishable and Buildable Nx Libraries The `--buildable` and `--publishable` options are available on the Nx library generators for the following plugins: @@ -13,15 +18,15 @@ This document will look to explain the motivations for why you would use either You might use the `--publishable` option when generating a new Nx library if your intention is to distribute it outside the monorepo. -One typical scenario for this may be that you use Nx to develop your organizations UI design system component library (maybe using its Storybook integration), which should be available also to your organizations’ apps that are not hosted within the same monorepo. +One typical scenario for this may be that you use Nx to develop your organizations UI design system component library (maybe using its Storybook integration), which should be available also to your organizations' apps that are not hosted within the same monorepo. -A normal Nx library - let’s call it "workspace library" - is not made for building or publishing. Rather it only includes common lint and test targets in its `project.json` file. These libraries are directly referenced from one of the monorepo’s applications and built together with them. +A normal Nx library - let's call it "workspace library" - is not made for building or publishing. Rather it only includes common lint and test targets in its `project.json` file. These libraries are directly referenced from one of the monorepo's applications and built together with them. Keep in mind that the `--publishable` flag does not enable automatic publishing. Rather it adds to your Nx workspace library a builder target that **compiles** and **bundles** your app. The resulting artifact will be ready to be published to some registry (e.g. [npm](https://npmjs.com/)). By having that builder, you can invoke the build via a command like: `nx build mylib` (where "mylib" is the name of the lib) which will then produce an optimized bundle in the `dist/mylib` folder. One particularity when generating a library with `--publishable` is that it requires you to also provide an `--importPath`. Your import path is the actual scope of your distributable package (e.g.: `@myorg/mylib`) - which needs to be a [valid npm package name](https://docs.npmjs.com/files/package.json#name). -To publish the library (for example to npm) you can run the CLI command: `npm publish` from the artifact located in the `dist` directory. Setting up some automated script in Nx’s `tools` folder may also come in handy. +To publish the library (for example to npm) you can run the CLI command: `npm publish` from the artifact located in the `dist` directory. Setting up some automated script in Nx's `tools` folder may also come in handy. For more details on the mechanics, remember that Nx is an open source project, so you can see the actual impact of the generator by looking at the source code (the best starting point is probably `packages//src/generators/library/library.ts`). @@ -29,7 +34,7 @@ For more details on the mechanics, remember that Nx is an open source project, s Buildable libraries are similar to "publishable libraries" described above. Their scope however is not to distribute or publish them to some external registry. Thus they might not be optimized for bundling and distribution. -Buildable libraries are mostly used for producing some pre-compiled output that can be directly referenced from an Nx workspace application without the need to again compile it. A typical scenario is to leverage Nx’s incremental building capabilities. +Buildable libraries are mostly used for producing some pre-compiled output that can be directly referenced from an Nx workspace application without the need to again compile it. A typical scenario is to leverage Nx's incremental building capabilities. {% callout type="warning" title="More details" %} In order for a buildable library to be pre-compiled, it can only depend on other buildable libraries. This allows you to take full advantage of incremental builds. diff --git a/docs/shared/concepts/common-tasks.md b/docs/shared/concepts/common-tasks.md index 8a282affa9..0f9f2ddb02 100644 --- a/docs/shared/concepts/common-tasks.md +++ b/docs/shared/concepts/common-tasks.md @@ -1,4 +1,6 @@ --- +title: Common Tasks +description: Learn about standard task naming conventions in Nx projects, including build, serve, test, and lint tasks, for consistent project configuration. keywords: [build, serve, test, lint] --- diff --git a/docs/shared/concepts/daemon.md b/docs/shared/concepts/daemon.md index 7772e5bfec..cccb04d7a2 100644 --- a/docs/shared/concepts/daemon.md +++ b/docs/shared/concepts/daemon.md @@ -1,3 +1,8 @@ +--- +title: Nx Daemon +description: Learn about the Nx Daemon, a background process that speeds up project graph computation in large workspaces by maintaining state between commands. +--- + # Nx Daemon In version 13 we introduced the opt-in Nx Daemon which Nx can leverage to dramatically speed up project graph computation, particularly for large workspaces. diff --git a/docs/shared/concepts/decisions/code-ownership.md b/docs/shared/concepts/decisions/code-ownership.md index 4bbafeda2e..8b8fa0fdf4 100644 --- a/docs/shared/concepts/decisions/code-ownership.md +++ b/docs/shared/concepts/decisions/code-ownership.md @@ -1,3 +1,8 @@ +--- +title: Code Ownership +description: Learn about code ownership challenges in monorepos and how Nx helps manage shared code with tools like CODEOWNERS and module boundary rules. +--- + # Code Ownership One of the most obvious benefits of having a monorepo is that you can easily share code across projects. This enables you to apply the Don't Repeat Yourself principle across the whole codebase. Code sharing could mean using a function or a component in multiple projects. Or code sharing could mean using a typescript interface to define the network API interface for both the front end and back end applications. diff --git a/docs/shared/concepts/decisions/dependency-management.md b/docs/shared/concepts/decisions/dependency-management.md index f11cb0c449..98e6c42fbe 100644 --- a/docs/shared/concepts/decisions/dependency-management.md +++ b/docs/shared/concepts/decisions/dependency-management.md @@ -1,3 +1,8 @@ +--- +title: Dependency Management Strategies +description: Compare independently maintained dependencies versus single version policy approaches for monorepos, with guidance on choosing the right strategy for your team. +--- + # Dependency Management Strategies When working with a monorepo, one of the key architectural decisions is how to manage dependencies across your projects. This document outlines two main strategies and helps you choose the right approach for your team. diff --git a/docs/shared/concepts/decisions/folder-structure.md b/docs/shared/concepts/decisions/folder-structure.md index 475f6d1dfc..7ab89a9042 100644 --- a/docs/shared/concepts/decisions/folder-structure.md +++ b/docs/shared/concepts/decisions/folder-structure.md @@ -1,3 +1,8 @@ +--- +title: Folder Structure +description: Learn about organizing your Nx monorepo with effective folder structures, and how to easily move or remove projects as your organization evolves. +--- + # Folder Structure Nx can work with any folder structure you choose, but it is good to have a plan in place for the folder structure of your monorepo. @@ -51,7 +56,7 @@ libs/ One of the main advantages of using a monorepo is that there is more visibility into code that can be reused across many different applications. Shared projects are a great way to save developers time and effort by reusing a solution to a common problem. -Let’s consider our reference monorepo. The `shared-data-access` project contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions. +Let's consider our reference monorepo. The `shared-data-access` project contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions. ```text libs/ diff --git a/docs/shared/concepts/decisions/monorepo-polyrepo.md b/docs/shared/concepts/decisions/monorepo-polyrepo.md index 6c4fb0ee33..b01a778332 100644 --- a/docs/shared/concepts/decisions/monorepo-polyrepo.md +++ b/docs/shared/concepts/decisions/monorepo-polyrepo.md @@ -1,3 +1,8 @@ +--- +title: Monorepo or Polyrepo +description: Evaluate the organizational considerations for choosing between monorepo and polyrepo approaches, including team agreements on code management and workflows. +--- + # Monorepo or Polyrepo Monorepos have a lot of benefits, but there are also some costs involved. We feel strongly that the [technical challenges](/concepts/decisions/why-monorepos) involved in maintaining large monorepos are fully addressed through the efficient use of Nx and Nx Cloud. Rather, the limiting factors in how large your monorepo grows are interpersonal. diff --git a/docs/shared/concepts/decisions/monorepos.md b/docs/shared/concepts/decisions/monorepos.md index 6b1c79da07..84298b1da5 100644 --- a/docs/shared/concepts/decisions/monorepos.md +++ b/docs/shared/concepts/decisions/monorepos.md @@ -1,3 +1,8 @@ +--- +title: Monorepos +description: Understand the benefits of monorepos including shared code, atomic changes, developer mobility, and consistent dependencies across your organization. +--- + # Monorepos A monorepo is a single git repository that holds the source code for multiple applications and libraries, along with the tooling for them. @@ -8,7 +13,7 @@ A monorepo is a single git repository that holds the source code for multiple ap - **Atomic changes** - Change a server API and modify the downstream applications that consume that API in the same commit. You can change a button component in a shared library and the applications that use that component in the same commit. A monorepo saves the pain of trying to coordinate commits across multiple repositories. -- **Developer mobility** - Get a consistent way of building and testing applications written using different tools and technologies. Developers can confidently contribute to other teams’ applications and verify that their changes are safe. +- **Developer mobility** - Get a consistent way of building and testing applications written using different tools and technologies. Developers can confidently contribute to other teams' applications and verify that their changes are safe. - **Single set of dependencies** - [Use a single version of all third-party dependencies](/concepts/decisions/dependency-management), reducing inconsistencies between applications. Less actively developed applications are still kept up-to-date with the latest version of a framework, library, or build tool. @@ -34,7 +39,7 @@ Nx provides tools to give you the benefits of a monorepo without the drawbacks o - **Consistent Code Generation** - Generators allow you to customize and standardize organizational conventions and structure, removing the need to perform the same manual setup tasks repetitively. -- **Affected Commands** - [Nx’s affected commands](/nx-api/nx/documents/affected) analyze your source code, the context of the changes, and only runs tasks on the affected projects impacted by the source code changes. +- **Affected Commands** - [Nx's affected commands](/nx-api/nx/documents/affected) analyze your source code, the context of the changes, and only runs tasks on the affected projects impacted by the source code changes. - **Remote Caching** - Nx provides local caching and support for remote caching of command executions. With remote caching, when someone on your team runs a command, everyone else gets access to those artifacts to speed up their command executions, bringing them down from minutes to seconds. Nx helps you scale your development to massive applications and libraries even more with distributed task execution and incremental builds. diff --git a/docs/shared/concepts/decisions/project-dependency-rules.md b/docs/shared/concepts/decisions/project-dependency-rules.md index 34765215a0..2d016ea249 100644 --- a/docs/shared/concepts/decisions/project-dependency-rules.md +++ b/docs/shared/concepts/decisions/project-dependency-rules.md @@ -1,3 +1,8 @@ +--- +title: Project Dependency Rules +description: Learn how to organize your Nx workspace with library types like feature, UI, data-access, and utility libraries, and enforce dependency rules between them. +--- + # Project Dependency Rules There are many types of libraries in a workspace. You can identify the type of a library through a naming convention and/or by using the project tagging system. With explicitly defined types, you can also use Nx to enforce project dependency rules based on the types of each project. This article explains one possible way to organize your repository projects by type. Every repository is different and yours may need a different set of types. diff --git a/docs/shared/concepts/decisions/project-size.md b/docs/shared/concepts/decisions/project-size.md index 5595ddb3da..9694db5bca 100644 --- a/docs/shared/concepts/decisions/project-size.md +++ b/docs/shared/concepts/decisions/project-size.md @@ -1,3 +1,8 @@ +--- +title: Project Size +description: Understand the trade-offs of project granularity in Nx, including benefits like faster commands, clearer boundaries, and improved developer experience. +--- + # Project Size Like a lot of decisions in programming, deciding to make a new Nx project or not is all about trade-offs. Each organization will decide on their own conventions, but here are some trade-offs to bear in mind as you have the conversation. diff --git a/docs/shared/concepts/executors-and-configurations.md b/docs/shared/concepts/executors-and-configurations.md index b8cde07aaa..d17fb48cdd 100644 --- a/docs/shared/concepts/executors-and-configurations.md +++ b/docs/shared/concepts/executors-and-configurations.md @@ -1,3 +1,8 @@ +--- +title: Executors and Configurations +description: Learn about Nx executors, pre-packaged node scripts that run tasks consistently across projects, and how to configure them in project.json files. +--- + # Executors and Configurations Executors are pre-packaged node scripts that can be used to run tasks in a consistent way. diff --git a/docs/shared/concepts/how-caching-works.md b/docs/shared/concepts/how-caching-works.md index 3e6e023d15..45d2b3cf7d 100644 --- a/docs/shared/concepts/how-caching-works.md +++ b/docs/shared/concepts/how-caching-works.md @@ -1,3 +1,8 @@ +--- +title: How Caching Works +description: Learn how Nx's computation hashing enables powerful caching, including what factors determine cache validity and how local and remote caches work together. +--- + # How Caching Works Before running any cacheable task, Nx computes its computation hash. As long as the computation hash is the same, the output of @@ -18,11 +23,11 @@ By default, the computation hash for something like `nx test remixapp` includes: After Nx computes the hash for a task, it then checks if it ran this exact computation before. First, it checks locally, and then if it is missing, and if a remote cache is configured, it checks remotely. If a matching computation is found, Nx retrieves and replays it. This includes restoring files. -Nx places the right files in the right folders and prints the terminal output. From the user’s point of view, the command ran the same, just a lot faster. +Nx places the right files in the right folders and prints the terminal output. From the user's point of view, the command ran the same, just a lot faster. ![cache](/shared/images/caching/cache.svg) -If Nx doesn’t find a corresponding computation hash, Nx runs the task, and after it completes, it takes the outputs and the terminal logs and stores them locally (and, if configured, remotely as well). All of this happens transparently, so you don’t have to worry about it. +If Nx doesn't find a corresponding computation hash, Nx runs the task, and after it completes, it takes the outputs and the terminal logs and stores them locally (and, if configured, remotely as well). All of this happens transparently, so you don't have to worry about it. ## Optimizations @@ -96,8 +101,7 @@ Nx cache works on the process level. Regardless of the tools used to build/test/ {% /tab %} -If the `outputs` property for a given target isn't defined in the project' -s `package.json` file, Nx will look at the global, workspace-wide definition in the `targetDefaults` section of `nx.json`: +If the `outputs` property for a given target isn't defined in the project's `package.json` file, Nx will look at the global, workspace-wide definition in the `targetDefaults` section of `nx.json`: ```jsonc {% fileName="nx.json"%} { diff --git a/docs/shared/concepts/inferred-tasks.md b/docs/shared/concepts/inferred-tasks.md index 0d0cb4ebfe..ccec515661 100644 --- a/docs/shared/concepts/inferred-tasks.md +++ b/docs/shared/concepts/inferred-tasks.md @@ -1,3 +1,8 @@ +--- +title: Inferred Tasks (Project Crystal) +description: Learn how Nx plugins automatically infer tasks from tool configurations, enabling caching, task dependencies, and optimized execution without manual setup. +--- + # Inferred Tasks (Project Crystal) In Nx version 18, Nx plugins can automatically infer tasks for your projects based on the configuration of different tools. Many tools have configuration files which determine what a tool does. Nx is able to cache the results of running the tool. Nx plugins use the same configuration files to infer how Nx should [run the task](/features/run-tasks). This includes [fine-tuned cache settings](/features/cache-task-results) and automatic [task dependencies](/concepts/task-pipeline-configuration). diff --git a/docs/shared/concepts/mental-model.md b/docs/shared/concepts/mental-model.md index 7e32aefda1..6a46b9597c 100644 --- a/docs/shared/concepts/mental-model.md +++ b/docs/shared/concepts/mental-model.md @@ -1,3 +1,8 @@ +--- +title: Mental Model +description: Understand how Nx works with project graphs, task graphs, affected commands, and caching to efficiently manage your monorepo development workflow. +--- + # Mental Model Nx is a VSCode of build tools, with a powerful core, driven by metadata, and extensible through [plugins](/concepts/nx-plugins). Nx works with a @@ -6,13 +11,13 @@ with project graphs, task graphs, affected commands, computation hashing and cac ## The project graph -A project graph is used to reflect the source code in your repository and all the external dependencies that aren’t +A project graph is used to reflect the source code in your repository and all the external dependencies that aren't authored in your repository, such as Webpack, React, Angular, and so forth. ![project-graph](/shared/mental-model/project-graph.svg) Nx analyzes your file system to detect projects. Projects are identified by the presence of a `package.json` file or `project.json` file. Projects identification can also be customized through plugins. You can manually define dependencies between -the project nodes, but you don’t have to do it very often. Nx analyzes files’ source code, your installed dependencies, TypeScript +the project nodes, but you don't have to do it very often. Nx analyzes files' source code, your installed dependencies, TypeScript files, and others figuring out these dependencies for you. Nx also stores the cached project graph, so it only reanalyzes the files you have changed. @@ -43,8 +48,8 @@ For instance `nx test lib` creates a task graph with a single node: A task is an invocation of a target. If you invoke the same target twice, you create two tasks. -Nx uses the [project graph](#the-project-graph), but the task graph and project graph aren’t isomorphic, meaning they -aren’t directly connected. In the case above, `app1` and `app2` depend on `lib`, but +Nx uses the [project graph](#the-project-graph), but the task graph and project graph aren't isomorphic, meaning they +aren't directly connected. In the case above, `app1` and `app2` depend on `lib`, but running `nx run-many -t test -p app1 app2 lib`, the created task graph will look like this: {% side-by-side %} @@ -62,11 +67,11 @@ running `nx run-many -t test -p app1 app2 lib`, the created task graph will look {% /graph %} {% /side-by-side %} -Even though the apps depend on `lib`, testing `app1` doesn’t depend on the testing `lib`. This means that the two tasks +Even though the apps depend on `lib`, testing `app1` doesn't depend on the testing `lib`. This means that the two tasks can run in parallel. -Let’s look at the test target relying on its dependencies. +Let's look at the test target relying on its dependencies. ```json { @@ -161,12 +166,12 @@ After Nx computes the hash for a task, it then checks if it ran this exact compu and then if it is missing, and if a remote cache is configured, it checks remotely. If Nx finds the computation, Nx retrieves it and replay it. Nx places the right files in the right folders and prints -the terminal output. So from the user’s point of view, the command ran the same, just a lot faster. +the terminal output. So from the user's point of view, the command ran the same, just a lot faster. ![cache](/shared/mental-model/cache.svg) -If Nx doesn’t find this computation, Nx runs the task, and after it completes, it takes the outputs and the terminal -output and stores it locally (and if configured remotely). All of this happens transparently, so you don’t have to worry +If Nx doesn't find this computation, Nx runs the task, and after it completes, it takes the outputs and the terminal +output and stores it locally (and if configured remotely). All of this happens transparently, so you don't have to worry about it. Although conceptually this is fairly straightforward, Nx optimizes this to make this experience good for you. For @@ -209,7 +214,7 @@ it locally. ## In summary - Nx is able to analyze your source code to create a Project Graph. -- Nx can use the project graph and information about projects’ targets to create a Task Graph. +- Nx can use the project graph and information about projects' targets to create a Task Graph. - Nx is able to perform code-change analysis to create the smallest task graph for your PR. - Nx supports computation caching to never execute the same computation twice. This computation cache is pluggable and can be distributed. diff --git a/docs/shared/concepts/module-federation/faster-builds.md b/docs/shared/concepts/module-federation/faster-builds.md index ef2769aaa4..567b3d7137 100644 --- a/docs/shared/concepts/module-federation/faster-builds.md +++ b/docs/shared/concepts/module-federation/faster-builds.md @@ -1,3 +1,8 @@ +--- +title: Faster Builds with Module Federation +description: Learn how Module Federation in Nx enables faster builds by splitting large SPAs into smaller remote applications while minimizing common downsides. +--- + # Faster Builds with Module Federation As applications grow, builds can become unacceptably slow, which leads to slow CI/CD pipelines and long dev-server diff --git a/docs/shared/concepts/module-federation/manage-library-versions-with-module-federation.md b/docs/shared/concepts/module-federation/manage-library-versions-with-module-federation.md index 144ae3b9fb..30f59b1e62 100644 --- a/docs/shared/concepts/module-federation/manage-library-versions-with-module-federation.md +++ b/docs/shared/concepts/module-federation/manage-library-versions-with-module-federation.md @@ -1,3 +1,8 @@ +--- +title: Manage Library Versions with Module Federation +description: Learn how Module Federation's Shared API prevents dependency conflicts and reduces bundle size by managing shared library versions across federated modules. +--- + # Manage Library Versions with Module Federation Federated modules are bundled and packaged independently with all the dependencies they need to run smoothly in federated applications called _remotes_. This means that if you have a federated module that depends on a library, the library will be bundled with the federated module within a remote. This independence provides much flexibility, allowing individual federated modules to function without relying on external resources. diff --git a/docs/shared/concepts/module-federation/micro-frontend-architecture.md b/docs/shared/concepts/module-federation/micro-frontend-architecture.md index 9b0e0a67da..f0801a6d78 100644 --- a/docs/shared/concepts/module-federation/micro-frontend-architecture.md +++ b/docs/shared/concepts/module-federation/micro-frontend-architecture.md @@ -1,3 +1,8 @@ +--- +title: Micro Frontend Architecture +description: Explore how Nx supports Micro Frontend architecture with Module Federation, enabling independent deployment while managing associated challenges. +--- + # Micro Frontend Architecture Nx provides out-of-the-box [Module Federation](/concepts/module-federation/faster-builds-with-module-federation) support to both diff --git a/docs/shared/concepts/module-federation/module-federation-and-nx.md b/docs/shared/concepts/module-federation/module-federation-and-nx.md index 4f8dc233f2..706a93a48b 100644 --- a/docs/shared/concepts/module-federation/module-federation-and-nx.md +++ b/docs/shared/concepts/module-federation/module-federation-and-nx.md @@ -1,3 +1,8 @@ +--- +title: Module Federation and Nx +description: Learn how Nx provides out-of-the-box support for Module Federation, making it easier to share code between applications in a monorepo environment. +--- + # Module Federation and Nx Module Federation is a technique that allows developers to share code and resources across multiple applications. It has become more popular in recent years since the addition of the [ModuleFederationPlugin](https://webpack.js.org/plugins/module-federation-plugin/) in [Webpack](https://webpack.js.org). diff --git a/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md b/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md index 0484f0411a..bea4e86c89 100644 --- a/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md +++ b/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md @@ -1,3 +1,8 @@ +--- +title: Nx Module Federation Technical Overview +description: Understand the technical details of how Nx implements Module Federation through executors and webpack configuration utilities. +--- + # Nx Module Federation Technical Overview Nx's Module Federation support is provided through a mixture of `executors` and the `withModuleFederation()` util that is used in you `webpack.config` file. Understanding what is happening under the hood can help when developing applications that use Module Federation as well as debugging any potential issues you run into. diff --git a/docs/shared/concepts/nx-plugins.md b/docs/shared/concepts/nx-plugins.md index 009f3b57cb..01e73ba64f 100644 --- a/docs/shared/concepts/nx-plugins.md +++ b/docs/shared/concepts/nx-plugins.md @@ -1,3 +1,8 @@ +--- +title: What Are Nx Plugins? +description: Learn how Nx plugins help developers integrate tools and frameworks with Nx by providing automated configuration, code generation, and dependency management. +--- + # What Are Nx Plugins? Nx plugins help developers use a tool or framework with Nx. They allow the plugin author who knows the best way to use a tool with Nx to codify their expertise and allow the whole community to reuse those solutions. diff --git a/docs/shared/concepts/sync-generators.md b/docs/shared/concepts/sync-generators.md index 803cc336ae..2a0826d505 100644 --- a/docs/shared/concepts/sync-generators.md +++ b/docs/shared/concepts/sync-generators.md @@ -1,3 +1,8 @@ +--- +title: Sync Generators +description: Learn how to use Nx sync generators to maintain repository state and update configuration files based on the project graph before tasks are run. +--- + # Sync Generators In Nx 19.8, you can use sync generators to ensure that your repository is maintained in a correct state. One specific application is to use the project graph to update files. These can be global configuration files or scripts, or at the task level to ensure that files are in sync before a task is run. diff --git a/docs/shared/concepts/task-pipeline-configuration.md b/docs/shared/concepts/task-pipeline-configuration.md index fd886ffd21..81caa1337b 100644 --- a/docs/shared/concepts/task-pipeline-configuration.md +++ b/docs/shared/concepts/task-pipeline-configuration.md @@ -1,3 +1,8 @@ +--- +title: 'What is a Task Pipeline' +description: 'Learn how Nx manages task dependencies and execution order in monorepo workspaces, ensuring proper build sequences for interconnected projects.' +--- + # What is a Task Pipeline If you have a monorepo workspace (or modularized app), you rarely just run one task. Almost certainly there are relationships among the projects in the workspace and hence tasks need to follow a certain order. diff --git a/docs/shared/concepts/types-of-configuration.md b/docs/shared/concepts/types-of-configuration.md index c5df34b55c..368435bdbf 100644 --- a/docs/shared/concepts/types-of-configuration.md +++ b/docs/shared/concepts/types-of-configuration.md @@ -1,3 +1,8 @@ +--- +title: 'Managing Configuration Files' +description: 'Learn how Nx helps manage different types of configuration files in your workspace, including both Nx-specific and tool-specific configurations at global and project levels.' +--- + # Managing Configuration Files Besides providing caching and task orchestration, Nx also helps incorporate numerous tools and frameworks into your repo. With all these pieces of software commingling, you can end up with a lot of configuration files. Nx plugins help to abstract away some of the difficulties of managing this configuration, but the configuration is all still accessible, in case there is a particular setting that you need to change. diff --git a/docs/shared/concepts/typescript-project-linking.md b/docs/shared/concepts/typescript-project-linking.md index 5dbb2059c5..551731947e 100644 --- a/docs/shared/concepts/typescript-project-linking.md +++ b/docs/shared/concepts/typescript-project-linking.md @@ -1,3 +1,8 @@ +--- +title: 'TypeScript Project Linking' +description: 'Learn how to efficiently reference code between TypeScript projects in your monorepo using project linking instead of relative paths.' +--- + # Typescript Project Linking {% youtube src="https://youtu.be/D9D8KNffyBk" title="TypeScript Monorepos Done Right!" /%} diff --git a/docs/shared/deprecated/angular-schematics-builders.md b/docs/shared/deprecated/angular-schematics-builders.md index daa22fe597..40fada6091 100644 --- a/docs/shared/deprecated/angular-schematics-builders.md +++ b/docs/shared/deprecated/angular-schematics-builders.md @@ -1,3 +1,8 @@ +--- +title: 'Angular Schematics and Builders' +description: 'Learn about the deprecation of Angular schematics and builders in Nx 17, and how to handle interoperability between Nx and Angular CLI tools.' +--- + # Angular Schematics and Builders As of Nx 17, official Nx plugins no longer export [schematics](https://angular.dev/tools/cli/schematics) and [builders](https://angular.dev/tools/cli/cli-builder) that can be directly consumed by the Angular CLI. Since Angular CLI users are not a large portion of Nx's user base, it made sense to stop maintaining that code. diff --git a/docs/shared/deprecated/as-provided-vs-derived.md b/docs/shared/deprecated/as-provided-vs-derived.md index 4b85bcd853..d29cb3c7fa 100644 --- a/docs/shared/deprecated/as-provided-vs-derived.md +++ b/docs/shared/deprecated/as-provided-vs-derived.md @@ -1,3 +1,8 @@ +--- +title: 'As Provided vs. Derived Generator Path Options' +description: 'Learn about the transition from derived to as-provided path options in Nx generators, improving transparency and predictability in code generation.' +--- + # As Provided vs. Derived Generator Path Options Nx is moving toward a more transparent and predictable way of determining where code will be generated when you run a generator. The new behavior is to take generator options _as provided_ and place the generated code in the exact folder that you specify. Nx will only use the new behavior in Nx version 20. The directory can be specified with a `--directory` flag or use a fully specified path (i.e. `libs/shared/my-lib/src/my-component`). The `--directory` flag will be calculated relative to where you run the command. diff --git a/docs/shared/deprecated/cacheable-operations.md b/docs/shared/deprecated/cacheable-operations.md index 3278f2eec4..416a98e909 100644 --- a/docs/shared/deprecated/cacheable-operations.md +++ b/docs/shared/deprecated/cacheable-operations.md @@ -1,3 +1,8 @@ +--- +title: 'Cacheable Operations' +description: 'Learn about the transition from cacheableOperations array to the cache property in Nx 17 for defining which tasks are cacheable.' +--- + # cacheableOperations In Nx < 17, the way to define which tasks were cacheable was to add the task name to the `cacheableOperations` array in `nx.json`. This way of defining cacheable tasks required all tasks named `test` to be either cacheable or not cacheable. diff --git a/docs/shared/deprecated/custom-tasks-runner.md b/docs/shared/deprecated/custom-tasks-runner.md index 4f1d96e494..562c22214e 100644 --- a/docs/shared/deprecated/custom-tasks-runner.md +++ b/docs/shared/deprecated/custom-tasks-runner.md @@ -1,3 +1,8 @@ +--- +title: 'Deprecating Custom Tasks Runner' +description: 'Learn about the transition from Custom Tasks Runner to the new plugin-based API in Nx, including pre and post task execution hooks and self-hosted remote cache options.' +--- + # Deprecating Custom Tasks Runner The Nx core has been migrated to Rust. However, the Custom Tasks Runner API is not compatible with this rewrite because it allows modifications to the lifecycle of the Nx command execution, which could break important invariants that Nx depends on. @@ -8,7 +13,7 @@ The custom task runners API was created many years ago and has not been supporte ### Custom Tasks Runner Version -Let’s imagine that you have implemented a custom task runner as follows: +Let's imagine that you have implemented a custom task runner as follows: ```typescript function serializeTasksResults(taskResults: { [taskId: string]: TaskResult }) { @@ -193,7 +198,7 @@ We recognize that many organizations have been using DIY remote cache solutions. ### Example Configuration Change -Enabling a Nx Powerpack plugin will configure it in `nx.json`. The specific modification depends on your repository’s configuration. The following is one example, where a custom tasks runner configuration in `nx.json` will be removed: +Enabling a Nx Powerpack plugin will configure it in `nx.json`. The specific modification depends on your repository's configuration. The following is one example, where a custom tasks runner configuration in `nx.json` will be removed: ```json { diff --git a/docs/shared/deprecated/global-implicit-dependencies.md b/docs/shared/deprecated/global-implicit-dependencies.md index e7e7c3efb9..99d770f6f9 100644 --- a/docs/shared/deprecated/global-implicit-dependencies.md +++ b/docs/shared/deprecated/global-implicit-dependencies.md @@ -1,3 +1,8 @@ +--- +title: 'Global Implicit Dependencies' +description: 'Learn about the transition from global implicit dependencies to inputs and namedInputs in Nx, and how to properly configure project dependencies on global files.' +--- + # Global Implicit Dependencies Since v14.4, Nx supports [`inputs` and `namedInputs`](/recipes/running-tasks/configure-inputs) for setting up implicit dependencies. As of Nx v16, the `implicitDependencies` defined in `nx.json` are ignored and do not influence the affected graph. This field will be removed in v17. The [`implicitDependencies` in the project configuration](/reference/project-configuration#implicitdependencies) are still the best way to manually set up a dependency between two projects that Nx is not able to detect automatically. diff --git a/docs/shared/deprecated/integrated-vs-package-based.md b/docs/shared/deprecated/integrated-vs-package-based.md index b806c57c20..1487585b34 100644 --- a/docs/shared/deprecated/integrated-vs-package-based.md +++ b/docs/shared/deprecated/integrated-vs-package-based.md @@ -1,4 +1,7 @@ -# Integrated Repos vs. Package-Based Repos vs. Standalone Apps +--- +title: 'Integrated Repos vs. Package-Based Repos vs. Standalone Apps' +description: 'Understand the historical differences between integrated, package-based, and standalone repositories in Nx, and how to choose the right approach for your needs.' +--- {% callout type="note" title="" %} As of Nx 20, it is no longer useful to draw a distinction between integrated and package-based repositories. We've removed references to these terms in the rest of the documentation, but this page is kept here to describe the terms for historical reasons. diff --git a/docs/shared/deprecated/legacy-cache.md b/docs/shared/deprecated/legacy-cache.md index 0f3ddc77a8..25d0dd5bda 100644 --- a/docs/shared/deprecated/legacy-cache.md +++ b/docs/shared/deprecated/legacy-cache.md @@ -1,3 +1,8 @@ +--- +title: 'Legacy Cache' +description: 'Learn about the transition from legacy file system cache to the new database cache in Nx 21, including migration options for custom task runners and shared caches.' +--- + # Legacy Cache In Nx 21, the legacy file system cache will be removed in favor of a new database cache. The new database cache stores metadata in a database, rather than blindly trusting the file system. The database cache has the following benefits: diff --git a/docs/shared/deprecated/npm-scope.md b/docs/shared/deprecated/npm-scope.md index 50e4d18451..f92262f459 100644 --- a/docs/shared/deprecated/npm-scope.md +++ b/docs/shared/deprecated/npm-scope.md @@ -1,3 +1,8 @@ +--- +title: 'NPM Scope' +description: 'Learn about the deprecation of npmScope property in nx.json and how to properly configure organization prefixes using package.json name property.' +--- + # NPM Scope The `npmScope` property of the `nx.json` file is deprecated as of version 16.2.0. `npmScope` was used as a prefix for the names of newly created projects. The new recommended way to define the organization prefix is to set the `name` property in the root `package.json` file to `@my-org/root`. Then `@my-org/` will be used as a prefix for all newly created projects. diff --git a/docs/shared/deprecated/rescope.md b/docs/shared/deprecated/rescope.md index 2f18491845..35b51c6ea1 100644 --- a/docs/shared/deprecated/rescope.md +++ b/docs/shared/deprecated/rescope.md @@ -1,3 +1,8 @@ +--- +title: 'Rescoping Packages from @nrwl to @nx' +description: 'Learn about the transition of official Nx plugins from @nrwl to @nx npm scope, and how to update your dependencies accordingly.' +--- + # Rescope Packages from @nrwl to @nx As of version 16, all the official Nx plugins moved from the `@nrwl` npm scope to `@nx`. The goal is for anyone looking through a list of dependencies to easily make the connection between the `nx` package and the `@nx` plugins that are associated with it. diff --git a/docs/shared/deprecated/runtime-cache-inputs.md b/docs/shared/deprecated/runtime-cache-inputs.md index c09ea982dd..757c776437 100644 --- a/docs/shared/deprecated/runtime-cache-inputs.md +++ b/docs/shared/deprecated/runtime-cache-inputs.md @@ -1,3 +1,8 @@ +--- +title: 'Runtime Cache Inputs' +description: 'Learn about the transition from runtimeCacheInputs in tasksRunnerOptions to the new inputs and namedInputs configuration for runtime cache inputs.' +--- + # runtimeCacheInputs The `runtimeCacheInputs` property was used as a way to add extra inputs to the Nx cache, like the version of node on that particular machine. diff --git a/docs/shared/deprecated/v1-nx-plugin-api.md b/docs/shared/deprecated/v1-nx-plugin-api.md index 7795eef0b8..f846c45cd0 100644 --- a/docs/shared/deprecated/v1-nx-plugin-api.md +++ b/docs/shared/deprecated/v1-nx-plugin-api.md @@ -1,3 +1,8 @@ +--- +title: 'Extending the Project Graph (v1 API)' +description: 'Learn about the deprecated v1 API for extending the Nx project graph through project inference and project graph plugins.' +--- + # Extending the Project Graph of Nx (v1 API) {% callout type="caution" title="Experimental" %} diff --git a/docs/shared/deprecated/workspace-executors.md b/docs/shared/deprecated/workspace-executors.md index b46cfbb7cf..02338d8381 100644 --- a/docs/shared/deprecated/workspace-executors.md +++ b/docs/shared/deprecated/workspace-executors.md @@ -1,3 +1,8 @@ +--- +title: 'Workspace Executors' +description: 'Learn how to migrate from workspace executors to local executors in Nx plugins for better build process management.' +--- + # Workspace Executors In Nx 13.10+, local nx plugins can contain executors that are used in the workspace. When creating a custom executor for your workspace, look into the [local executor guide](/extending-nx/recipes/local-executors) to simplify the build process. diff --git a/docs/shared/deprecated/workspace-generators.md b/docs/shared/deprecated/workspace-generators.md index 55206dfd45..9a16219bfc 100644 --- a/docs/shared/deprecated/workspace-generators.md +++ b/docs/shared/deprecated/workspace-generators.md @@ -1,3 +1,8 @@ +--- +title: 'Workspace Generators' +description: 'Learn how to migrate from workspace generators to local generators in Nx plugins for better code generation management.' +--- + # Workspace Generators In Nx 13.10, we introduced the ability to run generators from Nx plugins in the workspace they were created in. diff --git a/docs/shared/deprecated/workspace-json.md b/docs/shared/deprecated/workspace-json.md index 61f7f13412..7fec700c90 100644 --- a/docs/shared/deprecated/workspace-json.md +++ b/docs/shared/deprecated/workspace-json.md @@ -1,3 +1,8 @@ +--- +title: 'workspace.json' +description: 'Learn about the deprecation of workspace.json in Nx and how to migrate to project.json files for better project configuration management.' +--- + # workspace.json Nx used to have a `workspace.json` file at the root of the repo that at various points performed these functions: diff --git a/docs/shared/eslint.md b/docs/shared/eslint.md index 0b220b1d2c..4984f68bf3 100644 --- a/docs/shared/eslint.md +++ b/docs/shared/eslint.md @@ -1,3 +1,8 @@ +--- +title: 'Configuring ESLint with TypeScript' +description: 'Learn how to properly configure ESLint with TypeScript in your Nx workspace, including setting up type-checking and managing parser options for optimal performance.' +--- + # Configuring ESLint with TypeScript ESLint is powerful linter by itself, able to work on the syntax of your source files and assert things about based on the rules you configure. It gets even more powerful, however, when TypeScript type-checker is layered on top of it when analyzing TypeScript files, which is something that `@typescript-eslint` allows us to do. diff --git a/docs/shared/examples/apollo-react.md b/docs/shared/examples/apollo-react.md index 05aec35848..432af8dbaf 100644 --- a/docs/shared/examples/apollo-react.md +++ b/docs/shared/examples/apollo-react.md @@ -1,6 +1,11 @@ +--- +title: 'Using Apollo GraphQL with React' +description: 'Learn how to set up and use Apollo GraphQL with React in an Nx workspace, including API creation with NestJS and code generation from GraphQL schemas.' +--- + # Using Apollo GraphQL with React in an Nx Workspace -In this article, you’ll learn how to: +In this article, you'll learn how to: - Create an Nx workspace for both frontend and backend applications - Create a GraphQL API using NestJS diff --git a/docs/shared/examples/caching.md b/docs/shared/examples/caching.md index 86a17084b1..d685e47bdb 100644 --- a/docs/shared/examples/caching.md +++ b/docs/shared/examples/caching.md @@ -1,3 +1,8 @@ +--- +title: 'Large Next.js Apps Made Faster with Nx' +description: 'Explore how Nx optimizes and speeds up large Next.js applications with shared components, buildable packages, and efficient caching strategies.' +--- + # File Large Next.js Apps Made Faster by Using Nx Repo contains: diff --git a/docs/shared/examples/nx-agents.md b/docs/shared/examples/nx-agents.md index 5c8dfdcddc..d3d2e82591 100644 --- a/docs/shared/examples/nx-agents.md +++ b/docs/shared/examples/nx-agents.md @@ -1,3 +1,8 @@ +--- +title: 'Nx Agents at Scale' +description: 'Learn how Nx distributed task execution can dramatically improve CI performance in large monorepos with multiple applications and shared libraries.' +--- + # Nx Agents at Scale Repo contains: diff --git a/docs/shared/examples/nx-examples.md b/docs/shared/examples/nx-examples.md index d4fab2c77f..4c66b83fa6 100644 --- a/docs/shared/examples/nx-examples.md +++ b/docs/shared/examples/nx-examples.md @@ -1,3 +1,8 @@ +--- +title: 'Nx Micro-Frontend Example' +description: 'Explore a real-world example of a micro-frontend architecture using Nx, combining React and Angular apps with shared web components.' +--- + # Nx Micro-Frontend Example This repository contains a single book store website that serves a React app for some routes and an Angular app for other routes. Both apps make use of web components to share UI. diff --git a/docs/shared/examples/tsc-batch-mode.md b/docs/shared/examples/tsc-batch-mode.md index e6802edd21..0d7722decf 100644 --- a/docs/shared/examples/tsc-batch-mode.md +++ b/docs/shared/examples/tsc-batch-mode.md @@ -1,3 +1,8 @@ +--- +title: 'TSC Batch Mode' +description: 'Learn how Nx TSC batch mode dramatically improves TypeScript compilation speed by leveraging project references and incremental builds while maintaining DX.' +--- + # TSC Batch Mode ![Side by side demo of normal tsc taking 1m48s and batch mode tsc taking 28s](/shared/images/benchmarks/ts-benchmark.gif) diff --git a/docs/shared/features/automate-updating-dependencies.md b/docs/shared/features/automate-updating-dependencies.md index 58767621c8..fefa080098 100644 --- a/docs/shared/features/automate-updating-dependencies.md +++ b/docs/shared/features/automate-updating-dependencies.md @@ -1,4 +1,6 @@ --- +title: Automate Updating Dependencies +description: Learn how to use Nx migrate to automatically update package dependencies, configuration files, and source code to match new package versions. keywords: [update] --- diff --git a/docs/shared/features/cache-task-results.md b/docs/shared/features/cache-task-results.md index 8c8aa95f8f..91b2064408 100644 --- a/docs/shared/features/cache-task-results.md +++ b/docs/shared/features/cache-task-results.md @@ -1,3 +1,8 @@ +--- +title: 'Cache Task Results' +description: 'Learn how to use Nx computation caching to speed up task execution and reduce CI/CD costs by never rebuilding the same code twice.' +--- + # Cache Task Results {% youtube src="https://youtu.be/o-6jb78uuP0" title="Remote Caching with Nx Replay" /%} diff --git a/docs/shared/features/distribute-task-execution.md b/docs/shared/features/distribute-task-execution.md index 1bd8e5590c..ac020e1346 100644 --- a/docs/shared/features/distribute-task-execution.md +++ b/docs/shared/features/distribute-task-execution.md @@ -1,4 +1,6 @@ --- +title: 'Distribute Task Execution (Nx Agents)' +description: 'Learn how to use Nx Agents to distribute task execution across multiple machines, optimizing CI pipeline speed and efficiency through intelligent task allocation.' keywords: [distributed tasks] --- diff --git a/docs/shared/features/enforce-module-boundaries.md b/docs/shared/features/enforce-module-boundaries.md index e9142f7864..417680d07e 100644 --- a/docs/shared/features/enforce-module-boundaries.md +++ b/docs/shared/features/enforce-module-boundaries.md @@ -1,3 +1,8 @@ +--- +title: 'Enforce Module Boundaries' +description: 'Learn how to use Nx module boundaries to maintain a clean architecture by controlling dependencies between projects using tags and ESLint rules.' +--- + # Enforce Module Boundaries If you partition your code into well-defined cohesive units, even a small organization will end up with a dozen apps and dozens or hundreds of libs. If all of them can depend on each other freely, chaos will ensue, and the workspace will become unmanageable. diff --git a/docs/shared/features/enhance-AI.md b/docs/shared/features/enhance-AI.md index a402d11274..2ea8f3b7c0 100644 --- a/docs/shared/features/enhance-AI.md +++ b/docs/shared/features/enhance-AI.md @@ -1,3 +1,8 @@ +--- +title: 'Enhance Your LLM' +description: 'Learn how Nx enhances your AI assistant by providing rich workspace metadata, architectural insights, and project relationships to make your LLM smarter and more context-aware.' +--- + # Enhance Your LLM {% youtube src="https://youtu.be/RNilYmJJzdk?si=et_6zWMMxJPa7lp2" title="We Just Made Your LLM Way Smarter!" /%} diff --git a/docs/shared/features/generate-code.md b/docs/shared/features/generate-code.md index 9046b404a7..f6ec1bf658 100644 --- a/docs/shared/features/generate-code.md +++ b/docs/shared/features/generate-code.md @@ -1,3 +1,8 @@ +--- +title: 'Generate Code' +description: 'Learn how to use Nx code generators to automate repetitive tasks, scaffold new projects, and maintain consistency in your codebase.' +--- + # Generate Code {% youtube src="https://youtu.be/hSM6MgWOYr8" title="Generate Code" /%} diff --git a/docs/shared/features/maintain-typescript-monorepos.md b/docs/shared/features/maintain-typescript-monorepos.md index 9b7f8c3c9f..42dda28912 100644 --- a/docs/shared/features/maintain-typescript-monorepos.md +++ b/docs/shared/features/maintain-typescript-monorepos.md @@ -1,3 +1,8 @@ +--- +title: 'Maintain TypeScript Monorepos' +description: 'Learn how Nx simplifies TypeScript monorepo maintenance by auto-configuring tools, managing project references, and enhancing tooling for better monorepo support.' +--- + # Maintain TypeScript Monorepos Keeping all the industry-standard tools involved in a large TypeScript monorepo correctly configured and working well together is a difficult task. And the more tools you add, the more opportunity there is for tools to conflict with each other in some way. diff --git a/docs/shared/features/manage-releases.md b/docs/shared/features/manage-releases.md index 35d974659a..1d96ed738f 100644 --- a/docs/shared/features/manage-releases.md +++ b/docs/shared/features/manage-releases.md @@ -1,3 +1,8 @@ +--- +title: 'Manage Releases' +description: 'Learn how to use Nx release tools to version, generate changelogs, and publish your projects with confidence using conventional commits.' +--- + # Manage Releases - `nx release` Once you have leveraged Nx's powerful code generation and task running capabilities to build your libraries and applications, you will want to share them with your users. diff --git a/docs/shared/features/powerpack/conformance.md b/docs/shared/features/powerpack/conformance.md index 05e3868395..8059b2a79f 100644 --- a/docs/shared/features/powerpack/conformance.md +++ b/docs/shared/features/powerpack/conformance.md @@ -1,3 +1,8 @@ +--- +title: 'Run Language-Agnostic Conformance Rules' +description: 'Learn how to use Nx Powerpack conformance rules to enforce organizational standards, maintain consistency, and ensure security across your workspace.' +--- + # Run Language-Agnostic Conformance Rules {% youtube src="https://youtu.be/6wg23sLveTQ" title="Nx Powerpack workspace conformance" /%} diff --git a/docs/shared/features/powerpack/custom-caching.md b/docs/shared/features/powerpack/custom-caching.md index 1c194edf40..33b14e61df 100644 --- a/docs/shared/features/powerpack/custom-caching.md +++ b/docs/shared/features/powerpack/custom-caching.md @@ -1,3 +1,8 @@ +--- +title: 'Self-Host the Remote Cache' +description: 'Learn how to use Nx Powerpack plugins to self-host your remote cache on Amazon S3, Google Cloud Storage, Azure, or a shared network drive.' +--- + # Self-Host the Remote Cache {% youtube src="https://youtu.be/vRGAa5SuiTM" title="Nx Powerpack self-hosted cache storage" /%} diff --git a/docs/shared/features/powerpack/free-licenses-and-trials.md b/docs/shared/features/powerpack/free-licenses-and-trials.md index 1c641d49d5..8a0ff458ee 100644 --- a/docs/shared/features/powerpack/free-licenses-and-trials.md +++ b/docs/shared/features/powerpack/free-licenses-and-trials.md @@ -1,3 +1,8 @@ +--- +title: 'Free Licenses and Trials' +description: 'Learn about Nx Powerpack free licenses for small teams and open source projects, as well as trial options and extended evaluation periods.' +--- + # Powerpack Free Licenses and Trials ## Free Licenses Enabling Self-Hosted Remote Cache diff --git a/docs/shared/features/powerpack/index.md b/docs/shared/features/powerpack/index.md index 756236f708..52df7a5eaa 100644 --- a/docs/shared/features/powerpack/index.md +++ b/docs/shared/features/powerpack/index.md @@ -1,3 +1,8 @@ +--- +title: 'Nx Powerpack Features' +description: 'Explore the enterprise-focused features available in Nx Powerpack, including conformance rules, code ownership management, and self-hosted remote caching solutions.' +--- + # Powerpack Features Nx PowerPack is a suite of paid extensions for the Nx CLI specifically designed for enterprises. Powerpack is available for Nx version 19.8 and higher. diff --git a/docs/shared/features/powerpack/owners.md b/docs/shared/features/powerpack/owners.md index d8dd386014..ff46ef25ec 100644 --- a/docs/shared/features/powerpack/owners.md +++ b/docs/shared/features/powerpack/owners.md @@ -1,3 +1,8 @@ +--- +title: 'Define Code Ownership at the Project Level' +description: 'Learn how to use Nx Powerpack owners plugin to manage code ownership at the project level and automatically generate CODEOWNERS files for GitHub, Bitbucket, or GitLab.' +--- + # Define Code Ownership at the Project Level {% youtube src="https://youtu.be/mor6urvw-L0" title="Nx Powerpack Codeowners" /%} diff --git a/docs/shared/features/remote-cache.md b/docs/shared/features/remote-cache.md index 4c2823ef38..ccf4b85004 100644 --- a/docs/shared/features/remote-cache.md +++ b/docs/shared/features/remote-cache.md @@ -1,3 +1,8 @@ +--- +title: 'Remote Caching (Nx Replay)' +description: 'Learn how to use Nx Replay to share computation caches across your team and CI, speeding up builds and saving CI costs.' +--- + # Use Remote Caching (Nx Replay) {% youtube @@ -31,7 +36,7 @@ See the [connect to Nx Cloud recipe](/ci/intro/connect-to-nx-cloud) for all the Nx Replay directly benefits your organization by: -- **Speeding up CI pipelines:** With Nx Replay, tasks that have already been executed in a PR’s initial CI pipeline run can **reuse cached results in subsequent runs**. This reduces the need to re-run unaffected tasks, significantly speeding up the CI process for modified PRs. This benefit complements the [affected command](/ci/features/affected), which optimizes pipelines by only running tasks for projects that could be impacted by code changes. +- **Speeding up CI pipelines:** With Nx Replay, tasks that have already been executed in a PR's initial CI pipeline run can **reuse cached results in subsequent runs**. This reduces the need to re-run unaffected tasks, significantly speeding up the CI process for modified PRs. This benefit complements the [affected command](/ci/features/affected), which optimizes pipelines by only running tasks for projects that could be impacted by code changes. - **Boosting local developer efficiency:** Depending on [how cache permissions](/ci/recipes/security/access-tokens) are set for your workspace, developers can reuse cached results from CI on their local machines. As a result, tasks like builds and tests can complete instantly if they were already executed in CI. This accelerates developer workflows without any extra steps required. diff --git a/docs/shared/features/run-tasks.md b/docs/shared/features/run-tasks.md index 689f02c07e..b38db4d9f0 100644 --- a/docs/shared/features/run-tasks.md +++ b/docs/shared/features/run-tasks.md @@ -1,3 +1,8 @@ +--- +title: 'Run Tasks' +description: 'Learn how to use Nx task runner to efficiently manage and execute tasks across multiple projects in your monorepo, including parallel execution and caching.' +--- + # Run Tasks {% youtube src="https://youtu.be/aEdfYiA5U34" title="Run tasks with Nx" /%} diff --git a/docs/shared/getting-started/editor-setup.md b/docs/shared/getting-started/editor-setup.md index e2665f3409..e5373e577d 100644 --- a/docs/shared/getting-started/editor-setup.md +++ b/docs/shared/getting-started/editor-setup.md @@ -1,3 +1,8 @@ +--- +title: Editor Setup +description: Learn how to set up your editor with Nx Console extensions to enhance your developer experience with features like task visualization, cache management, and generator UI. +--- + # Editor Setup Nx Console editor extensions make your developer experience richer. The extensions diff --git a/docs/shared/getting-started/installation.md b/docs/shared/getting-started/installation.md index 6e3d40611f..7d8886d7b7 100644 --- a/docs/shared/getting-started/installation.md +++ b/docs/shared/getting-started/installation.md @@ -1,3 +1,8 @@ +--- +title: Installation +description: Learn how to install Nx in a new workspace, add it to an existing repository, install it globally, or set it up in a non-JavaScript repository with step-by-step instructions. +--- + # Installation Create a new Nx workspace using the following command: diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md index fbfbbbf93e..6d646b41f5 100644 --- a/docs/shared/getting-started/intro.md +++ b/docs/shared/getting-started/intro.md @@ -1,3 +1,8 @@ +--- +title: Intro to Nx +description: Nx is a powerful open-source build system that enhances developer productivity, optimizes CI performance, and maintains code quality with features like task caching and distribution. +--- + # Intro to Nx Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. [Check out our video](/getting-started/why-nx) to learn more about what Nx is about. diff --git a/docs/shared/getting-started/why-nx.md b/docs/shared/getting-started/why-nx.md index 9bed0cd508..986fbce8cb 100644 --- a/docs/shared/getting-started/why-nx.md +++ b/docs/shared/getting-started/why-nx.md @@ -1,3 +1,8 @@ +--- +title: Why Nx? +description: Discover how Nx helps developers speed up computation, integrate tooling, and scale projects from small teams to entire organizations with powerful caching and CI capabilities. +--- + # Why Nx? {% youtube diff --git a/docs/shared/guides/adding-assets.md b/docs/shared/guides/adding-assets.md index c5c559a601..ac1a5e1c6a 100644 --- a/docs/shared/guides/adding-assets.md +++ b/docs/shared/guides/adding-assets.md @@ -1,3 +1,8 @@ +--- +title: Adding Images, Fonts, and Files +description: Learn how to import and use assets like images, fonts, and files directly in your Nx projects, including special handling for SVGs in React, Next.js, and Vite applications. +--- + # Adding Images, Fonts, and Files With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**. diff --git a/docs/shared/guides/browser-support.md b/docs/shared/guides/browser-support.md index 58213fb49d..dd0f2107d0 100644 --- a/docs/shared/guides/browser-support.md +++ b/docs/shared/guides/browser-support.md @@ -1,3 +1,8 @@ +--- +title: Configuring Browser Support +description: Learn how to configure browser compatibility for your Nx applications using browserslist, optimize bundle size with modern browser targets, and debug your browser support configuration. +--- + # Configuring Browser Support The official Nx plugins rely on [browserslist](https://github.com/browserslist/browserslist) for configuring application browser support. This affects builds, both production and development, and will decide on which transformations will be run on the code when built. diff --git a/docs/shared/guides/define-environment-variables.md b/docs/shared/guides/define-environment-variables.md index e3b5b5ebbc..ad4f7ab7fa 100644 --- a/docs/shared/guides/define-environment-variables.md +++ b/docs/shared/guides/define-environment-variables.md @@ -1,3 +1,8 @@ +--- +title: Define Environment Variables +description: Learn how to set and use environment variables in Nx projects, including file-based configuration, custom env files, and ad-hoc variable definition across different operating systems. +--- + # Define Environment Variables Environment variables are global system variables accessible by all the processes running under the Operating System (OS). diff --git a/docs/shared/guides/js-and-ts.md b/docs/shared/guides/js-and-ts.md index b55d28410f..4420881175 100644 --- a/docs/shared/guides/js-and-ts.md +++ b/docs/shared/guides/js-and-ts.md @@ -1,3 +1,8 @@ +--- +title: JavaScript and TypeScript +description: Learn how to use Nx with both JavaScript and TypeScript, including how to generate JS files, mix languages in your workspace, and build TypeScript packages with advanced features. +--- + # JavaScript and TypeScript Nx is a general-purpose build system and a general-purpose CLI. It works with JavaScript, TypeScript, Java, C#, Go, etc.. The core plugins Nx comes with do work best with JavaScript or TypeScript. diff --git a/docs/shared/guides/nx-and-angular-cli.md b/docs/shared/guides/nx-and-angular-cli.md index 1694ae540c..7cf032e569 100644 --- a/docs/shared/guides/nx-and-angular-cli.md +++ b/docs/shared/guides/nx-and-angular-cli.md @@ -1,3 +1,8 @@ +--- +title: Nx and the Angular CLI +description: Compare Nx and Angular CLI features, understand similarities and differences, and learn how Nx enhances Angular development with improved caching, monorepo support, and advanced tooling. +--- + # Nx and the Angular CLI {% youtube diff --git a/docs/shared/guides/nx-devkit-angular-devkit.md b/docs/shared/guides/nx-devkit-angular-devkit.md index ba7e8b8537..4fb4459e2a 100644 --- a/docs/shared/guides/nx-devkit-angular-devkit.md +++ b/docs/shared/guides/nx-devkit-angular-devkit.md @@ -1,3 +1,8 @@ +--- +title: Nx Devkit and Angular Devkit +description: Compare Nx Devkit and Angular Devkit for creating generators and executors, understand key differences in implementation, and learn how to convert between the two approaches. +--- + # Nx Devkit and Angular Devkit {% callout type="note" title="Nx & Angular" %} diff --git a/docs/shared/guides/performance-profiling.md b/docs/shared/guides/performance-profiling.md index 9b5790dd07..d83357e447 100644 --- a/docs/shared/guides/performance-profiling.md +++ b/docs/shared/guides/performance-profiling.md @@ -1,3 +1,8 @@ +--- +title: Profiling Performance +description: Learn how to profile and optimize Nx task execution performance using Chrome DevTools and environment variables to identify bottlenecks and improve build times. +--- + # Profiling Performance When running an Nx command, many tasks are run at different times in different processes. diff --git a/docs/shared/guides/react-compiler.md b/docs/shared/guides/react-compiler.md index b845afab84..8d38e551e7 100644 --- a/docs/shared/guides/react-compiler.md +++ b/docs/shared/guides/react-compiler.md @@ -1,3 +1,8 @@ +--- +title: React Compiler with Nx +description: Learn how to enable and configure React Compiler in Nx projects to automatically optimize your React code with memoization for better performance. +--- + # React Compiler with Nx React 19 comes with an experimental compiler that optimizes application code to automatically memoize code. Read the [official React Compiler documentation](https://react.dev/learn/react-compiler) for more information. diff --git a/docs/shared/guides/react-native.md b/docs/shared/guides/react-native.md index d54be03ad9..3ac83c0dad 100644 --- a/docs/shared/guides/react-native.md +++ b/docs/shared/guides/react-native.md @@ -1,3 +1,8 @@ +--- +title: React Native with Nx +description: Learn how to develop React Native applications with Nx, including workspace setup, running on simulators, testing, and leveraging Nx's powerful tooling. +--- + # React Native with Nx Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Detox](/nx-api/detox), Storybook, Jest, and more. diff --git a/docs/shared/guides/remix.md b/docs/shared/guides/remix.md index 090ac5193b..214c0ae321 100644 --- a/docs/shared/guides/remix.md +++ b/docs/shared/guides/remix.md @@ -1,3 +1,8 @@ +--- +title: Remix with Nx +description: Learn how to create, build, serve, and test Remix applications within an Nx workspace, leveraging Nx's powerful tooling for modern web development. +--- + # Remix with Nx In this recipe, we'll show you how to create a [Remix](https://remix.run) application with Nx. diff --git a/docs/shared/guides/setup-incremental-builds-angular.md b/docs/shared/guides/setup-incremental-builds-angular.md index aff853c87a..e21f36838f 100644 --- a/docs/shared/guides/setup-incremental-builds-angular.md +++ b/docs/shared/guides/setup-incremental-builds-angular.md @@ -1,6 +1,11 @@ +--- +title: Setup Incremental Builds for Angular Applications +description: Learn how to configure your Angular applications in Nx to use incremental builds, improving build performance by only rebuilding what changed. +--- + # Setup incremental builds for Angular applications -In this guide we’ll specifically look into which changes need to be made to enable incremental builds for Angular +In this guide we'll specifically look into which changes need to be made to enable incremental builds for Angular applications. ## Use buildable libraries @@ -59,7 +64,7 @@ Angular's build time with Esbuild already provides a great performance boost and warrant using incremental builds with Esbuild for Angular {% /callout %} -Change your Angular application’s "build" target executor to Nx's version of builder you're currently using and the " +Change your Angular application's "build" target executor to Nx's version of builder you're currently using and the " serve" target executor to `@nx/angular:dev-server` as shown below. - `@angular-devkit/build-angular:application` -> `@nx/angular:application` diff --git a/docs/shared/guides/troubleshoot-convert-to-inferred.md b/docs/shared/guides/troubleshoot-convert-to-inferred.md index b61d75af85..4032228a24 100644 --- a/docs/shared/guides/troubleshoot-convert-to-inferred.md +++ b/docs/shared/guides/troubleshoot-convert-to-inferred.md @@ -1,3 +1,8 @@ +--- +title: Troubleshoot Convert to Inferred Migration +description: Learn how to resolve common issues when migrating from executor-based tasks to inferred tasks in Nx, with specific solutions for Next.js, Remix, and other frameworks. +--- + # Troubleshoot Convert to Inferred Migration Nx comes with plugins that automatically [infer tasks](/concepts/inferred-tasks) (i.e. Project Crystal) for your diff --git a/docs/shared/guides/unknown-local-cache.md b/docs/shared/guides/unknown-local-cache.md index d7d7ca715c..8bc05b5679 100644 --- a/docs/shared/guides/unknown-local-cache.md +++ b/docs/shared/guides/unknown-local-cache.md @@ -1,3 +1,8 @@ +--- +title: Unknown Local Cache Error +description: Learn how to troubleshoot and resolve Nx cache errors related to machine ID changes, network drives, and understand how Nx ensures cache security. +--- + # Unknown Local Cache Error This document will explain why the following errors happen and how to address them. diff --git a/docs/shared/guides/use-environment-variables-in-angular.md b/docs/shared/guides/use-environment-variables-in-angular.md index b06ecac4c9..14c860b5e6 100644 --- a/docs/shared/guides/use-environment-variables-in-angular.md +++ b/docs/shared/guides/use-environment-variables-in-angular.md @@ -1,3 +1,8 @@ +--- +title: Using Environment Variables in Angular Applications +description: Learn how to configure and use environment variables in Angular applications with Nx, including setup for ESBuild and TypeScript type definitions. +--- + # Using environment variables in Angular applications ## For Angular applications using ESBuild diff --git a/docs/shared/guides/use-environment-variables-in-react.md b/docs/shared/guides/use-environment-variables-in-react.md index 328d4bc8d6..d6922db34b 100644 --- a/docs/shared/guides/use-environment-variables-in-react.md +++ b/docs/shared/guides/use-environment-variables-in-react.md @@ -1,3 +1,8 @@ +--- +title: Using Environment Variables in React Applications +description: Learn how to configure and use environment variables in React applications with Nx, including setup for Vite and Webpack, and handling conflicts between Nx and Vite. +--- + # Using environment variables in React applications ## For React applications using Vite diff --git a/docs/shared/guides/using-tailwind-css-in-react.md b/docs/shared/guides/using-tailwind-css-in-react.md index da8629de1f..b3454b5bdf 100644 --- a/docs/shared/guides/using-tailwind-css-in-react.md +++ b/docs/shared/guides/using-tailwind-css-in-react.md @@ -1,3 +1,8 @@ +--- +title: Using Tailwind CSS in React and Next.js +description: Learn how to set up and configure Tailwind CSS in your React and Next.js applications within an Nx workspace, with both automated and manual installation options. +--- + # Using Tailwind CSS in React and Next.js This guide serves as a quickstart to installing [Tailwind CSS](https://tailwindcss.com) in your React and Next.js app. diff --git a/docs/shared/guides/using-tailwind-css-with-angular-projects.md b/docs/shared/guides/using-tailwind-css-with-angular-projects.md index ada5e9515c..378a078a89 100644 --- a/docs/shared/guides/using-tailwind-css-with-angular-projects.md +++ b/docs/shared/guides/using-tailwind-css-with-angular-projects.md @@ -1,3 +1,8 @@ +--- +title: Using Tailwind CSS with Angular Projects +description: Learn how to set up and configure Tailwind CSS in Angular applications and libraries within an Nx workspace, including dependency management and Module Federation support. +--- + # Using Tailwind CSS with Angular projects The purpose of this page is to cover how to use and configure [Tailwind CSS](https://tailwindcss.com/) diff --git a/docs/shared/installation/troubleshoot-installation.md b/docs/shared/installation/troubleshoot-installation.md index e660478bd6..771c175d45 100644 --- a/docs/shared/installation/troubleshoot-installation.md +++ b/docs/shared/installation/troubleshoot-installation.md @@ -1,3 +1,8 @@ +--- +title: Troubleshoot Nx Installations +description: Learn how to resolve common Nx installation issues, including native module problems, platform compatibility, and Node.js architecture mismatches. +--- + # Troubleshoot Nx Installations Here are some common scenarios we came across while trying to run Nx on CIs diff --git a/docs/shared/migration/adding-to-existing-project.md b/docs/shared/migration/adding-to-existing-project.md index 56829e60bb..b049492194 100644 --- a/docs/shared/migration/adding-to-existing-project.md +++ b/docs/shared/migration/adding-to-existing-project.md @@ -1,3 +1,8 @@ +--- +title: Adding Nx to your Existing Project +description: Learn how to integrate Nx into an existing non-monorepo project to leverage caching capabilities, speed up CI, and improve your development workflow. +--- + # Adding Nx to your Existing Project Nx can be added to any type of project, not just monorepos. A large benefit of Nx is its caching feature for package diff --git a/docs/shared/migration/adding-to-monorepo.md b/docs/shared/migration/adding-to-monorepo.md index bef92d9dbd..28640136d8 100644 --- a/docs/shared/migration/adding-to-monorepo.md +++ b/docs/shared/migration/adding-to-monorepo.md @@ -1,3 +1,8 @@ +--- +title: Adding Nx to NPM/Yarn/PNPM Workspace +description: Learn how to integrate Nx into an existing NPM, Yarn, or PNPM workspace monorepo to gain task scheduling, caching, and improved CI performance. +--- + # Adding Nx to NPM/Yarn/PNPM Workspace {% callout type="note" title="Migrating from Lerna?" %} diff --git a/docs/shared/migration/angular-multiple.md b/docs/shared/migration/angular-multiple.md index 6dd60ba035..19d0be0c27 100644 --- a/docs/shared/migration/angular-multiple.md +++ b/docs/shared/migration/angular-multiple.md @@ -1,3 +1,8 @@ +--- +title: Migrating Multiple Angular CLI Workspaces into an Nx Monorepo +description: Learn strategies for migrating multiple Angular CLI workspaces into a single Nx monorepo, including incremental approaches and version alignment considerations. +--- + # Migrating multiple Angular CLI workspaces into an Nx Monorepo Migrating multiple Angular CLI workspaces into a single Nx monorepo involves some more manual steps and decisions to take. diff --git a/docs/shared/migration/from-turborepo.md b/docs/shared/migration/from-turborepo.md index 121140adb5..cbe1f98be8 100644 --- a/docs/shared/migration/from-turborepo.md +++ b/docs/shared/migration/from-turborepo.md @@ -1,3 +1,8 @@ +--- +title: Migrating from Turborepo to Nx +description: Learn how to migrate from Turborepo to Nx to gain superior performance, better CI capabilities, enhanced developer experience, and enterprise-ready features. +--- + # Migrating from Turborepo to Nx {% callout type="note" title="Already know you want to migrate?" %} diff --git a/docs/shared/migration/import-project.md b/docs/shared/migration/import-project.md index e2048f096f..8405ce5008 100644 --- a/docs/shared/migration/import-project.md +++ b/docs/shared/migration/import-project.md @@ -1,3 +1,8 @@ +--- +title: Import an Existing Project into an Nx Workspace +description: Learn how to use the nx import command to move projects between repositories while preserving git history, managing dependencies, and handling external code references. +--- + # Import an Existing Project into an Nx Workspace {% youtube src="https://youtu.be/hnbwoV2-620" title="Importing an existing project into your monorepo" /%} diff --git a/docs/shared/migration/manual.md b/docs/shared/migration/manual.md index 1543f783cf..bb32836f95 100644 --- a/docs/shared/migration/manual.md +++ b/docs/shared/migration/manual.md @@ -1,3 +1,8 @@ +--- +title: Manual Migration of Existing Code Bases +description: Learn how to manually integrate Nx into your existing codebase by installing dependencies, configuring nx.json, setting up caching, and updating your gitignore file. +--- + # Manual migration of existing code bases The easiest way to start using Nx is to run the `nx init` command. diff --git a/docs/shared/migration/migration-angular.md b/docs/shared/migration/migration-angular.md index e45cc985b7..8a7c48b969 100644 --- a/docs/shared/migration/migration-angular.md +++ b/docs/shared/migration/migration-angular.md @@ -1,3 +1,8 @@ +--- +title: Migrating an Angular CLI Project to Nx +description: Learn how to transform your Angular CLI workspace into an Nx workspace, either as a standalone app or a full monorepo, with automated migration tools. +--- + # Migrating an Angular CLI project to Nx Within an Nx workspace, you gain many capabilities that help you build applications and libraries. If you are currently using an Angular CLI workspace, you can transform it into an Nx workspace. @@ -222,7 +227,7 @@ Learn more about the advantages of Nx in the following guides: ## From Nx Console -Nx Console no longer supports the Angular CLI. Angular CLI users will receive a notice, asking if they want to switch to Nx. When you click this button, we’ll run the `nx init` command to set up the Nx CLI, allowing for cached builds, and for you to share this cache with your teammates via Nx Cloud. +Nx Console no longer supports the Angular CLI. Angular CLI users will receive a notice, asking if they want to switch to Nx. When you click this button, we'll run the `nx init` command to set up the Nx CLI, allowing for cached builds, and for you to share this cache with your teammates via Nx Cloud. If you're not ready to make the change yet, you can come back to this later: diff --git a/docs/shared/migration/preserving-git-histories.md b/docs/shared/migration/preserving-git-histories.md index fe9a65c616..22c6f09015 100644 --- a/docs/shared/migration/preserving-git-histories.md +++ b/docs/shared/migration/preserving-git-histories.md @@ -1,3 +1,8 @@ +--- +title: Preserving Git Histories when Migrating Projects to Nx +description: Learn techniques for maintaining git history when importing standalone projects into your Nx workspace, including proper directory reorganization and merge strategies. +--- + # Preserving Git Histories when Migrating other Projects to your Nx Workspace {% callout type="note" title="Automatically import with 'nx import'" %} diff --git a/docs/shared/monorepo-ci-azure.md b/docs/shared/monorepo-ci-azure.md index e4bd7ade06..95ad3a8a06 100644 --- a/docs/shared/monorepo-ci-azure.md +++ b/docs/shared/monorepo-ci-azure.md @@ -1,3 +1,8 @@ +--- +title: Configuring CI Using Azure Pipelines and Nx +description: Learn how to set up Azure Pipelines for your Nx workspace to run affected commands, retrieve previous successful builds, and optimize CI performance. +--- + # Configuring CI Using Azure Pipelines and Nx Below is an example of an Azure Pipelines setup building and testing only what is affected. diff --git a/docs/shared/monorepo-ci-bitbucket-pipelines.md b/docs/shared/monorepo-ci-bitbucket-pipelines.md index fb40243188..34fe38f44c 100644 --- a/docs/shared/monorepo-ci-bitbucket-pipelines.md +++ b/docs/shared/monorepo-ci-bitbucket-pipelines.md @@ -1,3 +1,8 @@ +--- +title: Configuring CI Using Bitbucket Pipelines and Nx +description: Learn how to set up Bitbucket Pipelines for your Nx workspace to run affected commands, handle pull requests, and optimize CI performance. +--- + # Configuring CI Using Bitbucket Pipelines and Nx Below is an example of a Bitbucket Pipelines, building and testing only what is affected. diff --git a/docs/shared/monorepo-ci-circle-ci.md b/docs/shared/monorepo-ci-circle-ci.md index a0dc7166ea..542e575834 100644 --- a/docs/shared/monorepo-ci-circle-ci.md +++ b/docs/shared/monorepo-ci-circle-ci.md @@ -1,3 +1,8 @@ +--- +title: Configuring CI Using Circle CI and Nx +description: Learn how to set up Circle CI for your Nx workspace using the Nx Orb to track successful builds, run affected commands, and optimize CI performance. +--- + # Configuring CI Using Circle CI and Nx Below is an example of a Circle CI setup, building, and testing only what is affected. diff --git a/docs/shared/monorepo-ci-github-actions.md b/docs/shared/monorepo-ci-github-actions.md index dcbb8080aa..9cd62da24c 100644 --- a/docs/shared/monorepo-ci-github-actions.md +++ b/docs/shared/monorepo-ci-github-actions.md @@ -1,3 +1,8 @@ +--- +title: Configuring CI Using GitHub Actions and Nx +description: Learn how to set up GitHub Actions for your Nx workspace using nx-set-shas to track successful builds, run affected commands, and optimize CI performance. +--- + # Configuring CI Using GitHub Actions and Nx Below is an example of a GitHub Actions setup, building, and testing only what is affected. diff --git a/docs/shared/monorepo-ci-gitlab.md b/docs/shared/monorepo-ci-gitlab.md index 33e5cc33cf..54b7326561 100644 --- a/docs/shared/monorepo-ci-gitlab.md +++ b/docs/shared/monorepo-ci-gitlab.md @@ -1,3 +1,8 @@ +--- +title: Configuring CI Using GitLab and Nx +description: Learn how to set up GitLab CI for your Nx workspace with examples of YAML configuration for building and testing affected projects efficiently. +--- + # Configuring CI Using GitLab and Nx Below is an example of a GitLab setup, building and testing only what is affected. diff --git a/docs/shared/monorepo-ci-jenkins.md b/docs/shared/monorepo-ci-jenkins.md index 737a4461ef..9ad250e3f1 100644 --- a/docs/shared/monorepo-ci-jenkins.md +++ b/docs/shared/monorepo-ci-jenkins.md @@ -1,3 +1,8 @@ +--- +title: Configuring CI Using Jenkins and Nx +description: Learn how to set up Jenkins CI for your Nx workspace with examples of Groovy pipeline configuration for building and testing affected projects efficiently. +--- + # Configuring CI Using Jenkins and Nx Below is an example of a Jenkins setup, building and testing only what is affected. diff --git a/docs/shared/packages/angular/angular-nx-version-matrix.md b/docs/shared/packages/angular/angular-nx-version-matrix.md index 4ba0f4eace..1e21ee8dae 100644 --- a/docs/shared/packages/angular/angular-nx-version-matrix.md +++ b/docs/shared/packages/angular/angular-nx-version-matrix.md @@ -1,3 +1,8 @@ +--- +title: Nx and Angular Versions +description: A comprehensive compatibility matrix showing which Nx versions work with different Angular versions, including recommended versions and supported ranges. +--- + # Nx and Angular Versions The latest version of Nx supports the [actively supported versions of Angular (current and LTS versions)](https://angular.dev/reference/releases#actively-supported-versions). Workspaces in any of those versions are recommended to use the latest version of Nx to benefit from all the new features and fixes. diff --git a/docs/shared/packages/cypress/cypress-component-testing.md b/docs/shared/packages/cypress/cypress-component-testing.md index 0ba40e6d94..cb07901ce3 100644 --- a/docs/shared/packages/cypress/cypress-component-testing.md +++ b/docs/shared/packages/cypress/cypress-component-testing.md @@ -1,3 +1,8 @@ +--- +title: Cypress Component Testing +description: Learn how to set up and use Cypress component testing in your Nx workspace for React, Angular, and Next.js projects, including configuration and test execution. +--- + # Cypress Component Testing > Component testing requires Cypress v10 and above. diff --git a/docs/shared/packages/cypress/cypress-setup-node-events.md b/docs/shared/packages/cypress/cypress-setup-node-events.md index 31a9ebc97d..cb7369ca46 100644 --- a/docs/shared/packages/cypress/cypress-setup-node-events.md +++ b/docs/shared/packages/cypress/cypress-setup-node-events.md @@ -1,3 +1,8 @@ +--- +title: Using setupNodeEvents with Cypress preset +description: Learn how to properly configure and use the setupNodeEvents function with Nx's Cypress preset to customize Cypress behavior while maintaining web server functionality. +--- + # Using setupNodeEvents with Cypress preset The [`setupNodeEvents`](https://docs.cypress.io/guides/references/configuration#setupNodeEvents) function in a Cypress configuration file allows you to tap into the internal behavior of Cypress using the `on` and `config` arguments. diff --git a/docs/shared/packages/cypress/cypress-v11-migration.md b/docs/shared/packages/cypress/cypress-v11-migration.md index 9bc901961a..15b94e5ef7 100644 --- a/docs/shared/packages/cypress/cypress-v11-migration.md +++ b/docs/shared/packages/cypress/cypress-v11-migration.md @@ -1,3 +1,8 @@ +--- +title: Migrating to Cypress V11 +description: A guide to migrating your Nx projects from Cypress v8/v9 to v11, including configuration changes, file renaming, and handling potential edge cases. +--- + # Migrating to Cypress V11 Cypress v10 introduce new features, like component testing, along with some breaking changes. Nx can help you migrate from v8 or v9 of Cypress to v10 and then to v11. diff --git a/docs/shared/packages/detox/detox-plugin.md b/docs/shared/packages/detox/detox-plugin.md index a59bf6a0b9..8ed98c5ca9 100644 --- a/docs/shared/packages/detox/detox-plugin.md +++ b/docs/shared/packages/detox/detox-plugin.md @@ -1,3 +1,8 @@ +--- +title: Detox Plugin for Nx +description: Learn how to set up and use Detox for end-to-end testing of mobile applications in your Nx workspace, including environment setup and configuration options. +--- + Detox is gray box end-to-end testing and automation library for mobile apps. It has a lot of great features: - Cross Platform diff --git a/docs/shared/packages/eslint/dependency-checks.md b/docs/shared/packages/eslint/dependency-checks.md index 7972ee0f17..e0f5a1fa62 100644 --- a/docs/shared/packages/eslint/dependency-checks.md +++ b/docs/shared/packages/eslint/dependency-checks.md @@ -1,3 +1,8 @@ +--- +title: Dependency Checks ESLint Rule +description: Learn how to use the @nx/dependency-checks ESLint rule to identify mismatches between dependencies in package.json and actual project dependencies. +--- + # Dependency Checks rule The `@nx/dependency-checks` ESLint rule enables you to discover mismatches between dependencies specified in a project's `package.json` and the dependencies that your project depends on. If your project is using, for example, the `axios`, but the `package.json` does not specify it as a dependency, your library might not work correctly. This rule helps catch these problems before your users do. diff --git a/docs/shared/packages/eslint/enforce-module-boundaries.md b/docs/shared/packages/eslint/enforce-module-boundaries.md index ba951d72fb..f20eed5ab2 100644 --- a/docs/shared/packages/eslint/enforce-module-boundaries.md +++ b/docs/shared/packages/eslint/enforce-module-boundaries.md @@ -1,3 +1,8 @@ +--- +title: Enforce Module Boundaries ESLint Rule +description: Learn how to use the @nx/enforce-module-boundaries ESLint rule to define strict rules for accessing resources between different projects in your Nx workspace. +--- + # Enforce module boundaries rule The `@nx/enforce-module-boundaries` ESLint rule enables you to define strict rules for accessing resources between diff --git a/docs/shared/packages/eslint/eslint-plugin.md b/docs/shared/packages/eslint/eslint-plugin.md index 297855bec6..7f7b8da42a 100644 --- a/docs/shared/packages/eslint/eslint-plugin.md +++ b/docs/shared/packages/eslint/eslint-plugin.md @@ -1,3 +1,8 @@ +--- +title: Nx ESLint Plugin +description: An overview of the @nx/eslint-plugin package, which provides recommended ESLint configurations and Nx-specific rules for enforcing module boundaries and dependency checks. +--- + The `@nx/eslint-plugin` package is an ESLint plugin that contains a collection of recommended ESLint rule configurations which you can extend from in your own ESLint configs, as well as the following Nx-specific ESLint rules: - [enforce-module-boundaries](#enforce-module-boundaries-rule) diff --git a/docs/shared/packages/eslint/eslint.md b/docs/shared/packages/eslint/eslint.md index d6facce4a1..cf1202fcba 100644 --- a/docs/shared/packages/eslint/eslint.md +++ b/docs/shared/packages/eslint/eslint.md @@ -1,3 +1,8 @@ +--- +title: ESLint Plugin for Nx +description: Learn how to set up and use the @nx/eslint plugin to integrate ESLint with Nx, enabling caching and providing code generators for ESLint configuration. +--- + The ESLint plugin integrates [ESLint](https://eslint.org/) with Nx. It allows you to run ESLint through Nx with caching enabled. It also includes code generators to help you set up ESLint in your workspace. ## Setting Up @nx/eslint diff --git a/docs/shared/packages/expo/expo-plugin.md b/docs/shared/packages/expo/expo-plugin.md index e98b5ea894..e85ff4dbf2 100644 --- a/docs/shared/packages/expo/expo-plugin.md +++ b/docs/shared/packages/expo/expo-plugin.md @@ -1,3 +1,8 @@ +--- +title: Expo Plugin for Nx +description: Learn how to use the @nx/expo plugin to manage Expo applications and libraries within an Nx workspace, including setup, configuration, and task inference. +--- + Expo is an open-source framework for apps that run natively on Android, iOS, and the web. Expo brings together the best of mobile and the web and enables many important features for building and scaling an app. Expo is a set of tools built on top of React Native. The Nx Plugin for Expo contains generators for managing Expo applications and libraries within an Nx workspace. diff --git a/docs/shared/packages/express/express-plugin.md b/docs/shared/packages/express/express-plugin.md index 5e2b837e7b..28cd40be66 100644 --- a/docs/shared/packages/express/express-plugin.md +++ b/docs/shared/packages/express/express-plugin.md @@ -1,3 +1,8 @@ +--- +title: Express Plugin for Nx +description: Learn how to use the @nx/express plugin to create and manage Express applications in your Nx workspace, including setup and common recipes. +--- + [Express](https://expressjs.com/) is a mature, minimal, and an open source web framework for making web applications and apis. diff --git a/docs/shared/packages/nest/nest-plugin.md b/docs/shared/packages/nest/nest-plugin.md index 07b49ac3fc..4af2ceaa4a 100644 --- a/docs/shared/packages/nest/nest-plugin.md +++ b/docs/shared/packages/nest/nest-plugin.md @@ -1,3 +1,8 @@ +--- +title: Nest.js Plugin for Nx +description: Learn how to use the @nx/nest plugin to create and manage Nest.js applications and libraries in your Nx workspace, including setup and generators. +--- + Nest.js is a framework designed for building scalable server-side applications. In many ways, Nest is familiar to Angular developers: - It has excellent TypeScript support. diff --git a/docs/shared/packages/node/node-plugin.md b/docs/shared/packages/node/node-plugin.md index 425175150c..fc9dd49384 100644 --- a/docs/shared/packages/node/node-plugin.md +++ b/docs/shared/packages/node/node-plugin.md @@ -1,3 +1,8 @@ +--- +title: Node.js Plugin for Nx +description: Learn how to use the @nx/node plugin to create and manage Node.js applications and libraries in your Nx workspace, including setup, building, and testing. +--- + The Node Plugin contains generators and executors to manage Node applications within an Nx workspace. It provides: ## Setting Up @nx/node diff --git a/docs/shared/packages/plugin/plugin.md b/docs/shared/packages/plugin/plugin.md index 30179db3da..c22c609a43 100644 --- a/docs/shared/packages/plugin/plugin.md +++ b/docs/shared/packages/plugin/plugin.md @@ -1,3 +1,8 @@ +--- +title: Nx Plugin Development +description: Learn about the @nx/plugin package, which provides tooling to help create and maintain Nx plugins with generators and executors. +--- + Nx plugins are npm packages that contain [generators](/features/generate-code) and [executors](/concepts/executors-and-configurations) to extend a Nx workspace. This package contains tooling to help plugin authors create and maintain plugins. diff --git a/docs/shared/packages/powerpack-conformance/create-conformance-rule.md b/docs/shared/packages/powerpack-conformance/create-conformance-rule.md index 4eb7718ac5..689ba6532a 100644 --- a/docs/shared/packages/powerpack-conformance/create-conformance-rule.md +++ b/docs/shared/packages/powerpack-conformance/create-conformance-rule.md @@ -1,3 +1,8 @@ +--- +title: Create a Conformance Rule +description: Learn how to create custom conformance rules for Nx Powerpack to enforce standards and best practices across your Nx workspace. +--- + # Create a Conformance Rule For local conformance rules, the resolution utilities from `@nx/js` are used in the same way they are for all other JavaScript/TypeScript files in Nx. Therefore, you can simply reference an adhoc JavaScript file or TypeScript file in your `"rule"` property (as long as the path is resolvable based on your package manager and/or tsconfig setup), and the rule will be loaded/transpiled as needed. The rule implementation file should also have a `schema.json` file next to it that defines the available rule options, if any. diff --git a/docs/shared/packages/react/react-plugin.md b/docs/shared/packages/react/react-plugin.md index 4099c70688..d917ba6340 100644 --- a/docs/shared/packages/react/react-plugin.md +++ b/docs/shared/packages/react/react-plugin.md @@ -1,3 +1,8 @@ +--- +title: React Plugin for Nx +description: Learn how to use the @nx/react plugin to create and manage React applications and libraries in your Nx workspace, including components, hooks, and more. +--- + The React plugin contains executors and generators for managing React applications and libraries within an Nx workspace. It provides: diff --git a/docs/shared/packages/web/web-plugin.md b/docs/shared/packages/web/web-plugin.md index 423c96727c..35cc04286a 100644 --- a/docs/shared/packages/web/web-plugin.md +++ b/docs/shared/packages/web/web-plugin.md @@ -1,3 +1,8 @@ +--- +title: Web Plugin for Nx +description: Learn how to use the @nx/web plugin to create and manage Web Component applications and libraries in your Nx workspace, including testing and building. +--- + The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides: - Integration with libraries such as Jest, Cypress, and Storybook. diff --git a/docs/shared/packages/workspace/nx-compatibility-matrix.md b/docs/shared/packages/workspace/nx-compatibility-matrix.md index 3b8eb6e73f..2b5d1ade49 100644 --- a/docs/shared/packages/workspace/nx-compatibility-matrix.md +++ b/docs/shared/packages/workspace/nx-compatibility-matrix.md @@ -1,3 +1,8 @@ +--- +title: Nx, NodeJS and TypeScript Compatibility Matrix +description: A reference table showing which versions of Node.js and TypeScript are compatible with different major versions of Nx. +--- + # Nx, NodeJS and TypeScript Compatibility Matrix Below is a reference table that matches versions the latest major versions of Nx to the version TypeScript that it uses diff --git a/docs/shared/packages/workspace/workspace-plugin.md b/docs/shared/packages/workspace/workspace-plugin.md index 53a97b2c87..93e1a386ca 100644 --- a/docs/shared/packages/workspace/workspace-plugin.md +++ b/docs/shared/packages/workspace/workspace-plugin.md @@ -1,3 +1,8 @@ +--- +title: Workspace Plugin for Nx +description: Learn about the core workspace plugin that provides essential executors and generators for any Nx workspace, including tools for project management. +--- + 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. ## Creating Local Generators diff --git a/docs/shared/plugins/intro.md b/docs/shared/plugins/intro.md index 95a09f7849..8d37978dc9 100644 --- a/docs/shared/plugins/intro.md +++ b/docs/shared/plugins/intro.md @@ -1,3 +1,8 @@ +--- +title: Extending Nx with Plugins +description: Learn how to create custom Nx plugins to enforce best practices, integrate tools, and share functionality across your organization's repositories. +--- + # Extending Nx with Plugins Nx's core functionality focuses on task running and understanding your project and task graph. Nx plugins leverage that functionality to enforce best practices, seamlessly integrate tooling and allow developers to get up and running quickly. diff --git a/docs/shared/plugins/organization-specific-plugin.md b/docs/shared/plugins/organization-specific-plugin.md index 0695fe6645..5c2688642f 100644 --- a/docs/shared/plugins/organization-specific-plugin.md +++ b/docs/shared/plugins/organization-specific-plugin.md @@ -1,3 +1,8 @@ +--- +title: Enforce Organizational Best Practices with a Local Plugin +description: Learn how to create a custom Nx plugin that encodes your organization's best practices into code generators for consistent project creation. +--- + # Enforce Organizational Best Practices with a Local Plugin Every repository has a unique set of conventions and best practices that developers need to learn in order to write code that integrates well with the rest of the code base. It is important to document those best practices, but developers don't always read the documentation and even if they have read the documentation, they don't consistently follow the documentation every time they perform a task. Nx allows you to encode these best practices in code generators that have been tailored to your specific repository. diff --git a/docs/shared/plugins/tooling-plugin.md b/docs/shared/plugins/tooling-plugin.md index 45a558c92a..1a5d7a1032 100644 --- a/docs/shared/plugins/tooling-plugin.md +++ b/docs/shared/plugins/tooling-plugin.md @@ -1,3 +1,8 @@ +--- +title: Integrate a New Tool with a Tooling Plugin +description: Learn how to create a custom Nx plugin that integrates a tool or framework into an Nx repository, using Astro as an example. +--- + # Integrate a New Tool into an Nx Repository with a Tooling Plugin Nx Plugins can be used to easily integrate a tool or framework into an Nx repository. If there is no plugin available for your favorite tool or framework, you can write your own. diff --git a/docs/shared/recipes/add-stack/add-astro.md b/docs/shared/recipes/add-stack/add-astro.md index 8affc1c836..630dd8d26f 100644 --- a/docs/shared/recipes/add-stack/add-astro.md +++ b/docs/shared/recipes/add-stack/add-astro.md @@ -1,3 +1,8 @@ +--- +title: Add an Astro Project +description: Learn how to integrate Astro with Nx, including setting up caching, running tasks, and using other Nx plugins alongside your Astro application. +--- + # Add an Astro Project The code for this example is available on GitHub: diff --git a/docs/shared/recipes/add-stack/add-dotnet.md b/docs/shared/recipes/add-stack/add-dotnet.md index df053df8ef..3842e7f8df 100644 --- a/docs/shared/recipes/add-stack/add-dotnet.md +++ b/docs/shared/recipes/add-stack/add-dotnet.md @@ -1,3 +1,8 @@ +--- +title: Add a New .NET Project +description: Learn how to integrate .NET projects with Nx using the @nx-dotnet/core plugin, including setup, configuration, and leveraging Nx features. +--- + # Add a New .NET Project **Supported Features** diff --git a/docs/shared/recipes/add-stack/add-express.md b/docs/shared/recipes/add-stack/add-express.md index f51c3def66..9ab5b72015 100644 --- a/docs/shared/recipes/add-stack/add-express.md +++ b/docs/shared/recipes/add-stack/add-express.md @@ -1,3 +1,8 @@ +--- +title: Add a New Express Project +description: Learn how to create and configure Express applications and libraries in your Nx workspace using the @nx/express plugin. +--- + # Add a New Express Project **Supported Features** diff --git a/docs/shared/recipes/add-stack/add-fastify.md b/docs/shared/recipes/add-stack/add-fastify.md index 3664af134e..8e33d29d19 100644 --- a/docs/shared/recipes/add-stack/add-fastify.md +++ b/docs/shared/recipes/add-stack/add-fastify.md @@ -1,3 +1,8 @@ +--- +title: Add a New Fastify Project +description: Learn how to create and configure Fastify applications and libraries in your Nx workspace using the @nx/node plugin. +--- + # Add a New Fastify Project {% youtube diff --git a/docs/shared/recipes/add-stack/add-lit.md b/docs/shared/recipes/add-stack/add-lit.md index 5338e51d23..99b9673d8d 100644 --- a/docs/shared/recipes/add-stack/add-lit.md +++ b/docs/shared/recipes/add-stack/add-lit.md @@ -1,3 +1,8 @@ +--- +title: Add a New Lit Project +description: Learn how to integrate Lit with Nx, including setting up applications, configuring build systems, and leveraging Nx features with manual configuration. +--- + # Add a New Lit Project The code for this example is available on GitHub: diff --git a/docs/shared/recipes/add-stack/add-qwik.md b/docs/shared/recipes/add-stack/add-qwik.md index 35d841f736..23f3bd6ea1 100644 --- a/docs/shared/recipes/add-stack/add-qwik.md +++ b/docs/shared/recipes/add-stack/add-qwik.md @@ -1,3 +1,8 @@ +--- +title: Add a New Qwik Project +description: Learn how to integrate Qwik with Nx using the qwik-nx plugin, including creating applications, libraries, and leveraging Nx features. +--- + # Add a New Qwik Project The code for this example is available on GitHub: diff --git a/docs/shared/recipes/add-stack/add-rust.md b/docs/shared/recipes/add-stack/add-rust.md index 6e7b17fbf4..667366a68d 100644 --- a/docs/shared/recipes/add-stack/add-rust.md +++ b/docs/shared/recipes/add-stack/add-rust.md @@ -1,3 +1,8 @@ +--- +title: Add a New Rust Project +description: Learn how to integrate Rust with Nx using the @monodon/rust plugin, including creating applications, libraries, and leveraging Nx features. +--- + # Add a New Rust Project The code for this example is available on GitHub: diff --git a/docs/shared/recipes/add-stack/add-solid.md b/docs/shared/recipes/add-stack/add-solid.md index ca56659204..aac0eedac0 100644 --- a/docs/shared/recipes/add-stack/add-solid.md +++ b/docs/shared/recipes/add-stack/add-solid.md @@ -1,3 +1,8 @@ +--- +title: Add a New Solid Project +description: Learn how to integrate SolidJS with Nx, including setting up applications, configuring build systems, and leveraging Nx features with manual configuration. +--- + # Add a New Solid Project The code for this example is available on GitHub: diff --git a/docs/shared/recipes/add-stack/add-svelte.md b/docs/shared/recipes/add-stack/add-svelte.md index b91fa39bd8..edf34e283c 100644 --- a/docs/shared/recipes/add-stack/add-svelte.md +++ b/docs/shared/recipes/add-stack/add-svelte.md @@ -1,3 +1,8 @@ +--- +title: Add a Svelte Project +description: Learn how to integrate Svelte with Nx, including setting up applications, configuring build systems, and leveraging Nx features with manual configuration. +--- + # Add a Svelte Project The code for this example is available on GitHub: diff --git a/docs/shared/recipes/advanced-update.md b/docs/shared/recipes/advanced-update.md index c94f2b4bda..d1c103b57e 100644 --- a/docs/shared/recipes/advanced-update.md +++ b/docs/shared/recipes/advanced-update.md @@ -1,3 +1,8 @@ +--- +title: Advanced Update Process +description: Learn advanced techniques for updating Nx and workspace dependencies, including step-by-step migration strategies, managing complex updates, and troubleshooting common issues. +--- + # Advanced update process This guide describes advanced scenarios when it comes to updating Nx and the workspaces dependencies. It starts with a summary of the [standard update process](/features/automate-updating-dependencies) and continues with those advanced use cases. diff --git a/docs/shared/recipes/analyze-source-files.md b/docs/shared/recipes/analyze-source-files.md index ea97200083..65946cc117 100644 --- a/docs/shared/recipes/analyze-source-files.md +++ b/docs/shared/recipes/analyze-source-files.md @@ -1,3 +1,8 @@ +--- +title: Disable Graph Links Created from Analyzing Source Files +description: Learn how to configure Nx to only use dependencies defined in package.json instead of detecting dependencies from source code analysis. +--- + # Disable Graph Links Created from Analyzing Source Files If you want to disable detecting dependencies from source code and want to only use the dependencies as defined in `package.json` (the same way yarn does), you can add the following configuration to your `nx.json` file: diff --git a/docs/shared/recipes/ban-dependencies-with-tags.md b/docs/shared/recipes/ban-dependencies-with-tags.md index c43e666d41..771075fa8d 100644 --- a/docs/shared/recipes/ban-dependencies-with-tags.md +++ b/docs/shared/recipes/ban-dependencies-with-tags.md @@ -1,3 +1,8 @@ +--- +title: Ban Dependencies with Certain Tags +description: Learn how to use the notDependOnLibsWithTags property to prevent projects from depending on libraries with specific tags in your Nx workspace. +--- + # Ban Dependencies with Certain Tags Specifying which tags a project is allowed to depend on can sometimes lead to a long list of possible options: diff --git a/docs/shared/recipes/ban-external-imports.md b/docs/shared/recipes/ban-external-imports.md index ba1d649d88..33fb18386e 100644 --- a/docs/shared/recipes/ban-external-imports.md +++ b/docs/shared/recipes/ban-external-imports.md @@ -1,3 +1,8 @@ +--- +title: Ban External Imports +description: Learn how to use ESLint module boundary constraints to prevent projects from importing specific external packages and enforce separation of concerns. +--- + # Ban External Imports **This constraint is only available for projects using ESLint.** diff --git a/docs/shared/recipes/ci-deployment.md b/docs/shared/recipes/ci-deployment.md index 5eac10bf70..d3a144757a 100644 --- a/docs/shared/recipes/ci-deployment.md +++ b/docs/shared/recipes/ci-deployment.md @@ -1,3 +1,8 @@ +--- +title: Prepare Applications for Deployment via CI +description: Learn how to generate package.json and pruned lock files for your Nx applications to optimize container-based deployments in CI environments. +--- + # Prepare applications for deployment via CI A common approach to deploying applications is via docker containers. Some applications can be built into bundles that are environment agnostic, while others depend on OS-specific packages being installed. For these situations, having just bundled code is not enough, we also need to have `package.json`. diff --git a/docs/shared/recipes/console-generate-command.md b/docs/shared/recipes/console-generate-command.md index d0393ba635..c20ffe0470 100644 --- a/docs/shared/recipes/console-generate-command.md +++ b/docs/shared/recipes/console-generate-command.md @@ -1,3 +1,8 @@ +--- +title: Nx Console Generate Command +description: Learn how to use the Nx Console Generate UI to create projects, libraries, and components with a visual form interface that provides real-time previews. +--- + # Nx Console Generate Command The `Generate` action allows you to choose a generator and then opens a form listing out all the options for that generator. As you make changes to the form, the generator is executed in `--dry-run` mode in a terminal so you can preview the results of running the generator in real time. diff --git a/docs/shared/recipes/console-nx-cloud.md b/docs/shared/recipes/console-nx-cloud.md index 8ffcde4e6e..a0c4b03227 100644 --- a/docs/shared/recipes/console-nx-cloud.md +++ b/docs/shared/recipes/console-nx-cloud.md @@ -1,3 +1,8 @@ +--- +title: Nx Console & Nx Cloud Integration +description: Learn how Nx Console integrates with Nx Cloud to provide CI pipeline visibility, notifications, and quick access to build results directly from your editor. +--- + # Nx Console & Nx Cloud Integration Nx Console for VSCode is integrated with Nx Cloud to help you stay on top of your CI Pipelines without leaving the editor. diff --git a/docs/shared/recipes/console-project-details.md b/docs/shared/recipes/console-project-details.md index b08c42901e..ec6c61f7e3 100644 --- a/docs/shared/recipes/console-project-details.md +++ b/docs/shared/recipes/console-project-details.md @@ -1,3 +1,8 @@ +--- +title: Nx Console Project Details View +description: Learn how to use Nx Console's Project Details View to explore project information, run tasks, and navigate the dependency graph directly from your editor. +--- + # Nx Console Project Details View Nx Console provides seamless integration with the [Project Details View](features/explore-graph#explore-projects-in-your-workspace). diff --git a/docs/shared/recipes/console-run-command.md b/docs/shared/recipes/console-run-command.md index f5daa755c2..047c85779a 100644 --- a/docs/shared/recipes/console-run-command.md +++ b/docs/shared/recipes/console-run-command.md @@ -1,3 +1,8 @@ +--- +title: Nx Console Run Command +description: Learn how to use the Nx Console Run Command to execute project targets and customize command options directly from your editor's Command Palette. +--- + # Nx Console Run Command You can construct the executor command options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `Nx: Run`. After choosing a project, select a target and any of the listed options to modify the executor command options. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list. diff --git a/docs/shared/recipes/console-telemetry.md b/docs/shared/recipes/console-telemetry.md index 6e77094cda..56c6aed3b9 100644 --- a/docs/shared/recipes/console-telemetry.md +++ b/docs/shared/recipes/console-telemetry.md @@ -1,3 +1,8 @@ +--- +title: Nx Console Telemetry +description: Learn about the telemetry data collected by Nx Console extensions, what information is gathered, and how to disable telemetry collection in different editors. +--- + ## Nx Console Telemetry To ensure that we focus on creating features that benefit your day-to-day workflow, we collect some data from the Nx Console extensions. diff --git a/docs/shared/recipes/console-troubleshooting.md b/docs/shared/recipes/console-troubleshooting.md index 661867268f..c3ac71e150 100644 --- a/docs/shared/recipes/console-troubleshooting.md +++ b/docs/shared/recipes/console-troubleshooting.md @@ -1,3 +1,8 @@ +--- +title: Troubleshoot Nx Console Issues +description: Learn how to resolve common issues with Nx Console, including Node.js version conflicts with nvm and WSL configuration in JetBrains IDEs. +--- + # Troubleshoot Nx Console Issues Often, issues with Nx Console are the result of underlying issues with Nx. Make sure to read the [Nx installation troubleshooting docs](/troubleshooting/troubleshoot-nx-install-issues) for more help. diff --git a/docs/shared/recipes/database/mongo-fastify.md b/docs/shared/recipes/database/mongo-fastify.md index 4ee4e627c1..969eb1e10e 100644 --- a/docs/shared/recipes/database/mongo-fastify.md +++ b/docs/shared/recipes/database/mongo-fastify.md @@ -1,6 +1,11 @@ +--- +title: Using MongoDB with Fastify in Nx +description: Learn how to set up and configure MongoDB with Fastify in an Nx workspace, including project scaffolding and database integration. +--- + # Using MongoDB with Fastify in an Nx Workspace -In this example repo, you’ll learn how to: +In this example repo, you'll learn how to: - Leverage Nx generators to scaffold out project configurations - Setup MongoDB with Fastify diff --git a/docs/shared/recipes/database/nestjs-prisma.md b/docs/shared/recipes/database/nestjs-prisma.md index 13b20ccfe4..1d50fdb23f 100644 --- a/docs/shared/recipes/database/nestjs-prisma.md +++ b/docs/shared/recipes/database/nestjs-prisma.md @@ -1,6 +1,11 @@ +--- +title: Using Prisma with NestJS in Nx +description: Learn how to integrate Prisma with NestJS in an Nx workspace, including managing multiple Prisma schemas and extending generated Prisma clients for NestJS. +--- + # Using Prisma with NestJS in an Nx Workspace -In this example repo, you’ll learn how to: +In this example repo, you'll learn how to: - Leverage Nx generators to scaffold out project configurations - Use multiple Prisma schemas in an Nx Workspace diff --git a/docs/shared/recipes/database/postgres-fastify.md b/docs/shared/recipes/database/postgres-fastify.md index 6cf3364834..86b6099207 100644 --- a/docs/shared/recipes/database/postgres-fastify.md +++ b/docs/shared/recipes/database/postgres-fastify.md @@ -1,6 +1,11 @@ +--- +title: Using Postgres with Fastify in Nx +description: Learn how to set up and configure PostgreSQL with Fastify in an Nx workspace, including project scaffolding and database integration. +--- + # Using Postgres with Fastify in an Nx Workspace -In this example repo, you’ll learn how to: +In this example repo, you'll learn how to: - Setup Fastify to use Postgres - Leverage Nx generators to scaffold out projects diff --git a/docs/shared/recipes/database/redis-fastify.md b/docs/shared/recipes/database/redis-fastify.md index 41b20f728e..f1d13aadc4 100644 --- a/docs/shared/recipes/database/redis-fastify.md +++ b/docs/shared/recipes/database/redis-fastify.md @@ -1,6 +1,11 @@ +--- +title: Using Redis with Fastify in Nx +description: Learn how to integrate Redis with Fastify in an Nx workspace, including project scaffolding, basic Redis integration, and using Redis modules like RediSearch. +--- + # Using Redis with Fastify in an Nx Workspace -In this example repo, you’ll learn how to: +In this example repo, you'll learn how to: - Leverage Nx generators to scaffold out project configurations - Use Redis with Fastify diff --git a/docs/shared/recipes/database/serverless-fastify-planetscale.md b/docs/shared/recipes/database/serverless-fastify-planetscale.md index 053d5c3e64..084ba0c05a 100644 --- a/docs/shared/recipes/database/serverless-fastify-planetscale.md +++ b/docs/shared/recipes/database/serverless-fastify-planetscale.md @@ -1,6 +1,11 @@ +--- +title: Using PlanetScale with Serverless Fastify +description: Learn how to integrate PlanetScale database with Fastify in a serverless environment using Netlify functions in an Nx workspace. +--- + # Using PlanetScale with Serverless Fastify -In this example repo, you’ll learn how to: +In this example repo, you'll learn how to: - Use Netlify serverless functions - Integrate Fastify with Netlify functions diff --git a/docs/shared/recipes/deployment/deploy-nextjs-to-vercel.md b/docs/shared/recipes/deployment/deploy-nextjs-to-vercel.md index 48b2d5b2b7..58172640a1 100644 --- a/docs/shared/recipes/deployment/deploy-nextjs-to-vercel.md +++ b/docs/shared/recipes/deployment/deploy-nextjs-to-vercel.md @@ -1,3 +1,8 @@ +--- +title: Deploying Next.js Applications to Vercel +description: Learn how to configure and deploy Next.js applications from an Nx workspace to Vercel, including setting up build commands and implementing affected-based deployment. +--- + # Deploying Next.js applications to Vercel Starting from Nx 11, your Next.js application should already be ready for deployment to Vercel. diff --git a/docs/shared/recipes/deployment/node-aws-lambda.md b/docs/shared/recipes/deployment/node-aws-lambda.md index 2273f88d9f..4aed51babd 100644 --- a/docs/shared/recipes/deployment/node-aws-lambda.md +++ b/docs/shared/recipes/deployment/node-aws-lambda.md @@ -1,3 +1,8 @@ +--- +title: Deploying AWS Lambda Functions in Node.js +description: Learn how to set up, develop, and deploy AWS Lambda functions in an Nx workspace using the @nx/aws-lambda plugin. +--- + # Deploying AWS Lambda Functions in Node.js {% callout type="warning" title="deprecated" %} diff --git a/docs/shared/recipes/deployment/node-server-fly-io.md b/docs/shared/recipes/deployment/node-server-fly-io.md index da83a947ac..1d7e6e44f3 100644 --- a/docs/shared/recipes/deployment/node-server-fly-io.md +++ b/docs/shared/recipes/deployment/node-server-fly-io.md @@ -1,3 +1,8 @@ +--- +title: Deploying a Node App to Fly.io +description: Learn how to deploy a Node.js backend application from an Nx workspace to Fly.io, including Docker setup and automating the deployment process. +--- + # Deploying a Node App to Fly.io This recipe guides you through deploying your Nx based Node backend application to [Fly.io](https://fly.io/). diff --git a/docs/shared/recipes/deployment/node-serverless-functions-netlify.md b/docs/shared/recipes/deployment/node-serverless-functions-netlify.md index f4565d90fe..25c0446144 100644 --- a/docs/shared/recipes/deployment/node-serverless-functions-netlify.md +++ b/docs/shared/recipes/deployment/node-serverless-functions-netlify.md @@ -1,3 +1,8 @@ +--- +title: Add and Deploy Netlify Edge Functions with Node +description: Learn how to set up, develop, and deploy Node.js serverless functions to Netlify from an Nx workspace, including local development and production deployment. +--- + # Add and Deploy Netlify Edge Functions with Node Deploying Node.js serverless functions to Netlify involves a few steps. diff --git a/docs/shared/recipes/enable-tsc-batch-mode.md b/docs/shared/recipes/enable-tsc-batch-mode.md index 91320b64b3..e0658bd9a9 100644 --- a/docs/shared/recipes/enable-tsc-batch-mode.md +++ b/docs/shared/recipes/enable-tsc-batch-mode.md @@ -1,3 +1,8 @@ +--- +title: Enable TypeScript Batch Mode +description: Learn how to use TypeScript's batch mode in Nx to significantly improve build performance by batching TypeScript compilation tasks into a single process. +--- + # Enable Typescript Batch Mode {% callout type="check" title="Available since Nx 16.6.0" %} diff --git a/docs/shared/recipes/generators/composing-generators.md b/docs/shared/recipes/generators/composing-generators.md index 9876963ec5..2aee81aa30 100644 --- a/docs/shared/recipes/generators/composing-generators.md +++ b/docs/shared/recipes/generators/composing-generators.md @@ -1,3 +1,8 @@ +--- +title: Composing Generators +description: Learn how to combine and reuse Nx generators to build complex workflows from simpler building blocks, including using Nx Devkit generators and jscodeshift codemods. +--- + # Composing Generators Generators are useful individually, but reusing and composing generators allows you to build whole workflows out of simpler building blocks. diff --git a/docs/shared/recipes/generators/create-sync-generator.md b/docs/shared/recipes/generators/create-sync-generator.md index 134d517b45..4f4c022e77 100644 --- a/docs/shared/recipes/generators/create-sync-generator.md +++ b/docs/shared/recipes/generators/create-sync-generator.md @@ -1,3 +1,8 @@ +--- +title: Create a Sync Generator +description: Learn how to create and register sync generators in Nx to ensure your file system is in the correct state before tasks run, including global and task-specific sync generators. +--- + # Create a Sync Generator Sync generators are generators that are used to ensure that your file system is in the correct state before a task is run or the CI process is started. From a technical perspective, a sync generator is no different from any other generator, but it has some additional performance considerations and needs to be registered in a particular way. diff --git a/docs/shared/recipes/generators/creating-files.md b/docs/shared/recipes/generators/creating-files.md index f222e6c341..e28c4104c2 100644 --- a/docs/shared/recipes/generators/creating-files.md +++ b/docs/shared/recipes/generators/creating-files.md @@ -1,3 +1,8 @@ +--- +title: Creating Files with a Generator +description: Learn how to create, update, and manage files in your Nx workspace using generators, including working with static and dynamic file templates. +--- + # Creating files with a generator Generators provide an API for managing files within your workspace. You can use generators to do things such as create, update, move, and delete files. Files with static or dynamic content can also be created. diff --git a/docs/shared/recipes/generators/generator-options.md b/docs/shared/recipes/generators/generator-options.md index 04e260205c..30cf4438dc 100644 --- a/docs/shared/recipes/generators/generator-options.md +++ b/docs/shared/recipes/generators/generator-options.md @@ -1,3 +1,8 @@ +--- +title: Customizing Generator Options +description: Learn how to define and customize options for Nx generators, including TypeScript schemas, static options, and dynamic prompts for user input. +--- + # Customizing generator options ## Adding a TypeScript schema diff --git a/docs/shared/recipes/generators/local-generators.md b/docs/shared/recipes/generators/local-generators.md index df538bc629..fed83786ae 100644 --- a/docs/shared/recipes/generators/local-generators.md +++ b/docs/shared/recipes/generators/local-generators.md @@ -1,3 +1,8 @@ +--- +title: Local Generators +description: Learn how to create, run, and customize local generators in your Nx workspace to automate common development tasks and standardize workflows. +--- + # Local Generators Local plugin generators provide a way to automate many tasks you regularly perform as part of your development workflow. Whether it is scaffolding out components, features, or ensuring libraries are generated and structured in a certain way, generators help you standardize these tasks in a consistent, and predictable manner. diff --git a/docs/shared/recipes/generators/modifying-files.md b/docs/shared/recipes/generators/modifying-files.md index 83d3504a28..8e4c140a8e 100644 --- a/docs/shared/recipes/generators/modifying-files.md +++ b/docs/shared/recipes/generators/modifying-files.md @@ -1,3 +1,8 @@ +--- +title: Modifying Files with a Generator +description: Learn different approaches to modify existing files in your Nx workspace using generators, from simple JSON updates to advanced AST manipulation. +--- + # Modifying Files with a Generator Modifying existing files is an order of magnitude harder than creating new files, so care should be taken when trying to automate this process. When the situation merits it, automating a process can lead to tremendous benefits across the organization. Here are some approaches listed from simplest to most complex. diff --git a/docs/shared/recipes/identify-dependencies-between-folders.md b/docs/shared/recipes/identify-dependencies-between-folders.md index c689b82fe2..984e4804a5 100644 --- a/docs/shared/recipes/identify-dependencies-between-folders.md +++ b/docs/shared/recipes/identify-dependencies-between-folders.md @@ -1,3 +1,8 @@ +--- +title: Identify Dependencies Between Folders +description: Learn how to analyze and visualize dependencies between folders in your Nx workspace to help identify which code should be extracted into separate libraries. +--- + # Identify Dependencies Between Folders As projects grow in size, you often need to split out a particular folder in that project into its own library. In order to do this properly, you need to: diff --git a/docs/shared/recipes/include-all-packagejson.md b/docs/shared/recipes/include-all-packagejson.md index ade05793d4..41e4c4ce3b 100644 --- a/docs/shared/recipes/include-all-packagejson.md +++ b/docs/shared/recipes/include-all-packagejson.md @@ -1,3 +1,8 @@ +--- +title: Include All package.json Files as Projects +description: Learn how to configure Nx to include all package.json files as projects in your workspace graph, not just those referenced in workspaces configuration. +--- + # Include All package.json Files as Projects As of Nx 15.0.11, we only include any `package.json` file that is referenced in the `workspaces` property of the root `package.json` file in the graph. (`lerna.json` for Lerna repos or `pnpm-workspaces.yml` for pnpm repos) diff --git a/docs/shared/recipes/include-assets-in-build.md b/docs/shared/recipes/include-assets-in-build.md index 28f7e5a283..105b407c69 100644 --- a/docs/shared/recipes/include-assets-in-build.md +++ b/docs/shared/recipes/include-assets-in-build.md @@ -1,3 +1,8 @@ +--- +title: Including Assets in Your Build +description: Learn how to configure Nx executors to include and copy assets into your output bundle using regex patterns or object format for precise control. +--- + # Including Assets in Your Build All the official Nx executors with an `assets` option have the same syntax. diff --git a/docs/shared/recipes/installation/activate-powerpack.md b/docs/shared/recipes/installation/activate-powerpack.md index c859724a03..5c6abb30c2 100644 --- a/docs/shared/recipes/installation/activate-powerpack.md +++ b/docs/shared/recipes/installation/activate-powerpack.md @@ -1,3 +1,8 @@ +--- +title: Activate Nx Powerpack +description: Learn how to obtain and register an Nx Powerpack license to unlock enterprise features like conformance rules, code ownership, and custom caching solutions. +--- + # Activate Powerpack Nx Powerpack unlocks features of Nx that are particularly useful for larger organizations. Powerpack is available for Nx version 19.8 and higher. The features include the ability to: diff --git a/docs/shared/recipes/installation/install-non-javascript.md b/docs/shared/recipes/installation/install-non-javascript.md index 5c2a946b4e..a3d25ffb34 100644 --- a/docs/shared/recipes/installation/install-non-javascript.md +++ b/docs/shared/recipes/installation/install-non-javascript.md @@ -1,3 +1,8 @@ +--- +title: Install Nx in a Non-JavaScript Repository +description: Learn how to install and use Nx in repositories that don't contain JavaScript or TypeScript code, such as .NET or Java-based workspaces. +--- + # Install Nx in a Non-Javascript Repo Nx can manage its own installation without requiring a `package.json` file or a `node_modules` folder. This type of installation is useful for repositories that may not contain any JavaScript or TypeScript (e.g. .Net or Java based workspaces that want to leverage Nx features). In this setup, the Nx CLI is all contained within a `.nx` folder. diff --git a/docs/shared/recipes/installation/update-global-installation.md b/docs/shared/recipes/installation/update-global-installation.md index 0405353ea3..a8681a023c 100644 --- a/docs/shared/recipes/installation/update-global-installation.md +++ b/docs/shared/recipes/installation/update-global-installation.md @@ -1,3 +1,8 @@ +--- +title: Update Your Global Nx Installation +description: Learn how to update your global Nx installation to avoid common errors when the workspace structure changes, including steps to identify and remove outdated installations. +--- + # Update Your Global Nx Installation There are some cases where an issue could arise when using an outdated global installation of Nx. If the structure of your Nx workspace no longer matches up with what the globally installed copy of Nx expects, it may fail to hand off to your local installation properly and instead error. This commonly results in errors such as: diff --git a/docs/shared/recipes/module-federation-with-ssr.md b/docs/shared/recipes/module-federation-with-ssr.md index 421298f112..521b1cf601 100644 --- a/docs/shared/recipes/module-federation-with-ssr.md +++ b/docs/shared/recipes/module-federation-with-ssr.md @@ -1,3 +1,8 @@ +--- +title: Module Federation with Server-Side Rendering +description: Learn how to set up Module Federation with Server-Side Rendering (SSR) for Angular and React applications using Nx generators. +--- + # Setup Module Federation with SSR for Angular and React This guide will walk you through creating a Module Federated setup with Server Side Rendering (SSR) for Angular and React using Nx and its generators. diff --git a/docs/shared/recipes/module-federation/creating-a-host.md b/docs/shared/recipes/module-federation/creating-a-host.md index 4872bda908..89910d1dc9 100644 --- a/docs/shared/recipes/module-federation/creating-a-host.md +++ b/docs/shared/recipes/module-federation/creating-a-host.md @@ -1,3 +1,8 @@ +--- +title: Creating a Module Federation Host +description: Learn how to generate and configure a host application for Module Federation in React and Angular using Nx generators. +--- + # Creating a Host A `host` is the term within [Module Federation](https://module-federation.io/docs/en/mf-docs/0.2/getting-started/) given diff --git a/docs/shared/recipes/module-federation/creating-a-remote.md b/docs/shared/recipes/module-federation/creating-a-remote.md index 85ada5efcf..f45ea58d98 100644 --- a/docs/shared/recipes/module-federation/creating-a-remote.md +++ b/docs/shared/recipes/module-federation/creating-a-remote.md @@ -1,3 +1,8 @@ +--- +title: Creating a Module Federation Remote +description: Learn how to generate and configure a remote application for Module Federation in React and Angular using Nx generators. +--- + # Creating a Remote In the concept of Module Federation a `remote` is the term given to an application that exposes modules that can be diff --git a/docs/shared/recipes/module-federation/dynamic-mfe-angular.md b/docs/shared/recipes/module-federation/dynamic-mfe-angular.md index 682d7159de..2c761c2e1a 100644 --- a/docs/shared/recipes/module-federation/dynamic-mfe-angular.md +++ b/docs/shared/recipes/module-federation/dynamic-mfe-angular.md @@ -1,12 +1,17 @@ +--- +title: Advanced Angular Micro Frontends with Dynamic Module Federation +description: Learn how to implement Dynamic Module Federation in Angular applications to achieve "Build once, deploy everywhere" with Nx, enabling runtime determination of remote application locations. +--- + # Advanced Angular Micro Frontends with Dynamic Module Federation -Dynamic Module Federation is a technique that allows an application to determine the location of its remote applications at runtime. It helps to achieve the use case of **“Build once, deploy everywhere”**. +Dynamic Module Federation is a technique that allows an application to determine the location of its remote applications at runtime. It helps to achieve the use case of **"Build once, deploy everywhere"**. -“Build once, deploy everywhere” is the concept of being able to create a single build artifact of your application and deploy it to multiple environments such as staging and production. +"Build once, deploy everywhere" is the concept of being able to create a single build artifact of your application and deploy it to multiple environments such as staging and production. The difficulty in achieving this with a Micro Frontend Architecture using Static Module Federation is that our Remote applications will have a different location (or URL) in each environment. Previously, to account for this, we would have had to specify the deployed location of the Remote applications and rebuild the application for the target environment. -This guide will walk through how the concept of “Build once, deploy everywhere” can be easily achieved in a Micro Frontend Architecture that uses Dynamic Module Federation. +This guide will walk through how the concept of "Build once, deploy everywhere" can be easily achieved in a Micro Frontend Architecture that uses Dynamic Module Federation. ## Aim @@ -16,7 +21,7 @@ The aim of this guide is three-fold. We want to be able to: - Transform an existing Static Module Federation setup to use Dynamic Federation - Generate a new Micro Frontend application that uses Dynamic Federation -## What we’ll build +## What we'll build To achieve the aims, we will do the following: @@ -435,7 +440,7 @@ There are 3 steps involved with this: Perhaps one of the easiest methods of fetching the Remote Definitions at runtime is to store them in a JSON file that can be present in each environment. The Host application then only has to make a GET request to the JSON file. -We’ll start by creating this file. Add a `module-federation.manifest.json` file to the `src/public/` folder in our **Dashboard** application with the following content: +We'll start by creating this file. Add a `module-federation.manifest.json` file to the `src/public/` folder in our **Dashboard** application with the following content: ```json {% fileName="apps/dashboard/src/public/module-federation.manifest.json" %} { @@ -454,7 +459,7 @@ fetch('/module-federation.manifest.json') .then(() => import('./bootstrap').catch((err) => console.error(err))); ``` -You’ll notice that we fetch the JSON file and provide its contents to the `setRemoteDefinitions` function we invoke next. This tells webpack where each of our remote applications has been deployed to! +You'll notice that we fetch the JSON file and provide its contents to the `setRemoteDefinitions` function we invoke next. This tells webpack where each of our remote applications has been deployed to! ### Change how Remotes are loaded @@ -497,7 +502,7 @@ The `loadRemoteModule` helper method simply hides some logic that will check if ### Summary -That’s all the changes required to replace Static Module Federation with Dynamic Module Federation. +That's all the changes required to replace Static Module Federation with Dynamic Module Federation. Running: @@ -507,7 +512,7 @@ nx serve dashboard --devRemotes=login Should result in the same behaviour as before, except that our **Dashboard** application is waiting until runtime to find out the deployed location of our **Login** application. -In the next section, we will see how Nx’s generators can be used to automate a lot of this process for us! +In the next section, we will see how Nx's generators can be used to automate a lot of this process for us! --- @@ -515,7 +520,7 @@ In the next section, we will see how Nx’s generators can be used to automate a Nx provides generators that aim to streamline the process of setting up a Dynamic Micro Frontend architecture. -To showcase this, let’s create a new Host application that will use our previous **Login** application as well as a new **Todo** Remote application. +To showcase this, let's create a new Host application that will use our previous **Login** application as well as a new **Todo** Remote application. ### Generate the Employee Host application @@ -537,13 +542,13 @@ You should take a look at the files generated and see how the **Login** Remote a ### Generate the Todo Remote application -We’re going to demonstrate how when specifying a dynamic Host when adding a new Remote application, the Remote application will be added to the Host’s Micro Frontend Manifest file correctly. +We're going to demonstrate how when specifying a dynamic Host when adding a new Remote application, the Remote application will be added to the Host's Micro Frontend Manifest file correctly. ```shell nx g @nx/angular:remote apps/todo --host=employee ``` -You’ll note that this will generate the same output as the **Login** Remote application in the previous guide. There’s one difference. Because the Host application is using Dynamic Federation, the new Remote will be added to the Host’s `module-federation.manifest.json`. +You'll note that this will generate the same output as the **Login** Remote application in the previous guide. There's one difference. Because the Host application is using Dynamic Federation, the new Remote will be added to the Host's `module-federation.manifest.json`. ### Summary diff --git a/docs/shared/recipes/module-federation/federate-a-module.md b/docs/shared/recipes/module-federation/federate-a-module.md index 1d0b0a2a36..2e958d80d1 100644 --- a/docs/shared/recipes/module-federation/federate-a-module.md +++ b/docs/shared/recipes/module-federation/federate-a-module.md @@ -1,3 +1,8 @@ +--- +title: Federate a Module +description: Learn how to share code between applications at runtime using Module Federation in Nx, including creating and configuring modules to be federated in React and Angular applications. +--- + # Federate a Module Module Federation is a concept that allows developers to share code between applications at run-time. It is a way of doing micro-frontends, but it can also be used to share code between applications that are not micro-frontends. diff --git a/docs/shared/recipes/node/application-proxies.md b/docs/shared/recipes/node/application-proxies.md index 69b3754788..98eb7cb8f7 100644 --- a/docs/shared/recipes/node/application-proxies.md +++ b/docs/shared/recipes/node/application-proxies.md @@ -1,3 +1,8 @@ +--- +title: Set Up Application Proxies +description: Learn how to configure proxies for your frontend applications to communicate with backend services during local development, avoiding CORS issues with Webpack, Vite, and Nx executors. +--- + # Set Up App Proxies It is useful to set up frontend proxies to your backend app during local development. By proxying requests, you won't need to set up [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) when communicating with the backend. diff --git a/docs/shared/recipes/node/wait-for-tasks.md b/docs/shared/recipes/node/wait-for-tasks.md index 87c62411bf..1407b4ed29 100644 --- a/docs/shared/recipes/node/wait-for-tasks.md +++ b/docs/shared/recipes/node/wait-for-tasks.md @@ -1,3 +1,8 @@ +--- +title: Wait for Tasks +description: Learn how to ensure dependent tasks are completed before running a primary task in Nx, using dependsOn property or the waitUntilTargets option for Node executors. +--- + # Wait for Tasks There are a couple ways to ensure that a set up task has been run before you run a particular task. diff --git a/docs/shared/recipes/nx-release/automate-github-releases.md b/docs/shared/recipes/nx-release/automate-github-releases.md index d15436331a..29e6bc427c 100644 --- a/docs/shared/recipes/nx-release/automate-github-releases.md +++ b/docs/shared/recipes/nx-release/automate-github-releases.md @@ -1,3 +1,8 @@ +--- +title: Automate GitHub Releases +description: Learn how to configure Nx Release to automatically create GitHub releases with changelogs generated from your conventional commits, for both workspace and project-level releases. +--- + # Automate GitHub Releases Nx Release can automate the creation of [GitHub releases](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository) for you. GitHub releases are a great way to communicate the changes in your projects to your users. diff --git a/docs/shared/recipes/nx-release/automatically-version-with-conventional-commits.md b/docs/shared/recipes/nx-release/automatically-version-with-conventional-commits.md index 254836365b..62dcafb27d 100644 --- a/docs/shared/recipes/nx-release/automatically-version-with-conventional-commits.md +++ b/docs/shared/recipes/nx-release/automatically-version-with-conventional-commits.md @@ -1,3 +1,8 @@ +--- +title: Automatically Version with Conventional Commits +description: Learn how to configure Nx Release to automatically determine version bumps based on conventional commit messages, enabling automated versioning in CI/CD pipelines. +--- + # Automatically Version with Conventional Commits If you wish to bypass the versioning prompt, you can configure Nx Release to defer to the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) standard to determine the version bump automatically. This is useful for automating the versioning process in a CI/CD pipeline. diff --git a/docs/shared/recipes/nx-release/build-before-versioning.md b/docs/shared/recipes/nx-release/build-before-versioning.md index 4426fcfec3..da665ae9f4 100644 --- a/docs/shared/recipes/nx-release/build-before-versioning.md +++ b/docs/shared/recipes/nx-release/build-before-versioning.md @@ -1,3 +1,8 @@ +--- +title: Build Before Versioning +description: Learn how to configure Nx Release to build your projects before applying version updates, ensuring that distribution files are properly generated before publishing. +--- + # Build Before Versioning In order to ensure that projects are built before the new version is applied to their package manifest, you can use the `preVersionCommand` property in `nx.json`: diff --git a/docs/shared/recipes/nx-release/configuration-version-prefix.md b/docs/shared/recipes/nx-release/configuration-version-prefix.md index f13db81bea..052492082f 100644 --- a/docs/shared/recipes/nx-release/configuration-version-prefix.md +++ b/docs/shared/recipes/nx-release/configuration-version-prefix.md @@ -1,6 +1,11 @@ +--- +title: Configure Version Prefix for Dependencies +description: Learn how to set up custom version prefixes in Nx Release to control how dependency versions are specified in your package.json files, with options for exact, patch, or minor-level compatibility. +--- + # Configuring Version Prefix for Dependency Versions -This guide explains how to configure a custom version prefix in Nx Release using the `versionPrefix` option. The version prefix allows you to automatically add a specific prefix format to dependencies, providing control over how dependency versions are specified in your project’s `package.json` files. +This guide explains how to configure a custom version prefix in Nx Release using the `versionPrefix` option. The version prefix allows you to automatically add a specific prefix format to dependencies, providing control over how dependency versions are specified in your project's `package.json` files. ## The `versionPrefix` Option diff --git a/docs/shared/recipes/nx-release/configure-changelog-format.md b/docs/shared/recipes/nx-release/configure-changelog-format.md index 986ddd18e4..35c5d4ae9d 100644 --- a/docs/shared/recipes/nx-release/configure-changelog-format.md +++ b/docs/shared/recipes/nx-release/configure-changelog-format.md @@ -1,3 +1,8 @@ +--- +title: Configure Changelog Format +description: Learn how to customize the format of changelogs generated by Nx Release, including options to control author information, commit references, and version title dates. +--- + # Configure Changelog Format The default changelog renderer for `nx release` generates a changelog entry for each released project similar to the following: diff --git a/docs/shared/recipes/nx-release/configure-custom-registries.md b/docs/shared/recipes/nx-release/configure-custom-registries.md index 027a1068ee..67ffb6ef85 100644 --- a/docs/shared/recipes/nx-release/configure-custom-registries.md +++ b/docs/shared/recipes/nx-release/configure-custom-registries.md @@ -1,3 +1,8 @@ +--- +title: Configure Custom Registries +description: Learn how to configure Nx Release to publish packages to custom npm registries, including setting up multiple registries for different package scopes and per-package registry configuration. +--- + # Configure Custom Registries To publish JavaScript packages, Nx Release uses the `npm` CLI under the hood, which defaults to publishing to the `npm` registry (`https://registry.npmjs.org/`). If you need to publish to a different registry, you can configure the registry in the `.npmrc` file in the root of your workspace or at the project level in the project configuration. diff --git a/docs/shared/recipes/nx-release/customize-conventional-commit-types.md b/docs/shared/recipes/nx-release/customize-conventional-commit-types.md index f709f2cb68..bb93453a41 100644 --- a/docs/shared/recipes/nx-release/customize-conventional-commit-types.md +++ b/docs/shared/recipes/nx-release/customize-conventional-commit-types.md @@ -1,3 +1,8 @@ +--- +title: Customize Conventional Commit Types +description: Learn how to configure Nx Release to customize how different conventional commit types affect versioning and changelog generation, including changing semver bump types and section titles. +--- + # Customize Conventional Commit Types [Nx release](/features/manage-releases) allows you to leverage the [conventional commits](/recipes/nx-release/automatically-version-with-conventional-commits) standard to automatically determine the next version increment. diff --git a/docs/shared/recipes/nx-release/file-based-versioning-version-plans.md b/docs/shared/recipes/nx-release/file-based-versioning-version-plans.md index 0a3bb78ca9..c14cc3f525 100644 --- a/docs/shared/recipes/nx-release/file-based-versioning-version-plans.md +++ b/docs/shared/recipes/nx-release/file-based-versioning-version-plans.md @@ -1,3 +1,8 @@ +--- +title: File Based Versioning (Version Plans) +description: Learn how to use Nx Release's version plans feature to track version bumps in separate files, similar to Changesets or Beachball, allowing for more flexible versioning workflows. +--- + # File Based Versioning ("Version Plans") Tools such as Changesets and Beachball helped popularize the concept of tracking the desired semver version bump in a separate file on disk (which is committed to your repository alongside your code changes). This has the advantage of separating the desired bump from your git commits themselves, which can be very useful if you are not able to enforce that all contributors follow a strict commit message format ([e.g. Conventional Commits](/recipes/nx-release/automatically-version-with-conventional-commits)), or if you want multiple commits to be included in the same version bump and therefore not map commits 1:1 with changelog entries. diff --git a/docs/shared/recipes/nx-release/get-started-with-nx-release.md b/docs/shared/recipes/nx-release/get-started-with-nx-release.md index bfd24933e0..7ce1d1d137 100644 --- a/docs/shared/recipes/nx-release/get-started-with-nx-release.md +++ b/docs/shared/recipes/nx-release/get-started-with-nx-release.md @@ -1,3 +1,8 @@ +--- +title: Get Started with Nx Release +description: Learn how to use Nx Release to version packages, generate changelogs, and publish packages in your JavaScript monorepo with a step-by-step guide. +--- + # Get Started with Nx Release This recipe guides you through versioning packages, generating changelogs, and publishing packages in a JavaScript monorepo with Nx Release. diff --git a/docs/shared/recipes/nx-release/publish-in-ci-cd.md b/docs/shared/recipes/nx-release/publish-in-ci-cd.md index 3e25a4ec8a..abccb32299 100644 --- a/docs/shared/recipes/nx-release/publish-in-ci-cd.md +++ b/docs/shared/recipes/nx-release/publish-in-ci-cd.md @@ -1,3 +1,8 @@ +--- +title: Publish in CI/CD +description: Learn how to configure Nx Release to automate your package publishing process in CI/CD pipelines, including authentication, environment setup, and workflow examples. +--- + # Publish in CI/CD Nx Release makes it easy to move your publishing process into your CI/CD pipeline. diff --git a/docs/shared/recipes/nx-release/publish-rust-crates.md b/docs/shared/recipes/nx-release/publish-rust-crates.md index 2d959adb51..25f74fcf11 100644 --- a/docs/shared/recipes/nx-release/publish-rust-crates.md +++ b/docs/shared/recipes/nx-release/publish-rust-crates.md @@ -1,3 +1,8 @@ +--- +title: Using Nx Release with Rust +description: Learn how to version Rust libraries, generate changelogs, and publish Rust crates in a monorepo using Nx Release with a step-by-step guide. +--- + # Using Nx Release with Rust This recipe guides you through versioning Rust libraries, generating changelogs, and publishing Rust crates in a monorepo with Nx Release. diff --git a/docs/shared/recipes/nx-release/release-projects-independently.md b/docs/shared/recipes/nx-release/release-projects-independently.md index ba69c467f1..dd2d9577c0 100644 --- a/docs/shared/recipes/nx-release/release-projects-independently.md +++ b/docs/shared/recipes/nx-release/release-projects-independently.md @@ -1,3 +1,8 @@ +--- +title: Release Projects Independently +description: Learn how to configure Nx Release to version and publish projects independently in your monorepo, allowing different release schedules for different projects. +--- + # Release Projects Independently Nx Release supports releasing projects independently. This is useful when you have a monorepo with projects that are not released on the same schedule. diff --git a/docs/shared/recipes/nx-release/update-local-registry-setup.md b/docs/shared/recipes/nx-release/update-local-registry-setup.md index 338052e5cb..5a1074519d 100644 --- a/docs/shared/recipes/nx-release/update-local-registry-setup.md +++ b/docs/shared/recipes/nx-release/update-local-registry-setup.md @@ -1,3 +1,8 @@ +--- +title: Update Your Local Registry Setup to use Nx Release +description: Learn how to update your existing local registry setup to use Nx Release for publishing packages during end-to-end testing, replacing older publish target approaches. +--- + # Update Your Local Registry Setup to use Nx Release Nx will create a `tools/start-local-registry.ts` script for starting a local registry and publishing packages to it in preparation for running end to end tests. If you have an existing `tools/start-local-registry.ts` script from a previous version of Nx, you should update it to use Nx Release to publish packages to the local registry. This will ensure that newly generated libraries are published appropriately when running end to end tests. diff --git a/docs/shared/recipes/nx-release/updating-version-references.md b/docs/shared/recipes/nx-release/updating-version-references.md index afdc9c2c9e..4488a239f1 100644 --- a/docs/shared/recipes/nx-release/updating-version-references.md +++ b/docs/shared/recipes/nx-release/updating-version-references.md @@ -1,3 +1,8 @@ +--- +title: Updating Version References in Manifest Files +description: Learn how to configure Nx Release to update version references in package.json and other manifest files, including strategies for source files, custom dist directories, and local dependency references. +--- + # Updating Version References in Manifest Files (e.g. package.json) The versioning stage of Nx Release is customizable and programming language agnostic, but some of its capabilities are dictated by the tooling you are using. This is particularly true when it comes to updating version references in manifest files, such as `package.json`. diff --git a/docs/shared/recipes/plugins/compose-executors.md b/docs/shared/recipes/plugins/compose-executors.md index 7584590e50..8c89fa8e05 100644 --- a/docs/shared/recipes/plugins/compose-executors.md +++ b/docs/shared/recipes/plugins/compose-executors.md @@ -1,3 +1,8 @@ +--- +title: Compose Executors +description: Learn how to compose and chain Nx executors together, including how to invoke other targets and executors from within your custom executors. +--- + # Compose executors An executor is just a function, so you can import and invoke it directly, as follows: diff --git a/docs/shared/recipes/plugins/create-install-package.md b/docs/shared/recipes/plugins/create-install-package.md index 19ccdd4882..7222fcb5c4 100644 --- a/docs/shared/recipes/plugins/create-install-package.md +++ b/docs/shared/recipes/plugins/create-install-package.md @@ -1,3 +1,8 @@ +--- +title: Creating an Install Package +description: Learn how to create a custom "create-x" package for your Nx plugin to provide a seamless project bootstrapping experience with npm, yarn, or other package managers. +--- + # Creating an Install Package {% youtube diff --git a/docs/shared/recipes/plugins/create-preset.md b/docs/shared/recipes/plugins/create-preset.md index 4a10787f48..aea8d51632 100644 --- a/docs/shared/recipes/plugins/create-preset.md +++ b/docs/shared/recipes/plugins/create-preset.md @@ -1,3 +1,8 @@ +--- +title: Create a Custom Plugin Preset +description: Learn how to create a custom preset generator for your Nx plugin that can be used with create-nx-workspace to generate customized workspaces. +--- + # Create a Custom Plugin Preset When you create a new nx workspace, you run the command: [`npx create-nx-workspace`](/nx-api/nx/documents/create-nx-workspace). diff --git a/docs/shared/recipes/plugins/local-executors.md b/docs/shared/recipes/plugins/local-executors.md index cbc1e75e5f..8dabde1155 100644 --- a/docs/shared/recipes/plugins/local-executors.md +++ b/docs/shared/recipes/plugins/local-executors.md @@ -1,3 +1,8 @@ +--- +title: Write a Simple Executor +description: Learn how to create, run, and customize local executors in your Nx workspace to standardize development, building, and deployment tasks. +--- + # Write a Simple Executor Creating Executors for your workspace standardizes scripts that are run during your development/building/deploying tasks in order to provide guidance in the terminal with `--help` and when invoking with [Nx Console](/getting-started/editor-setup) @@ -92,7 +97,7 @@ export default async function echoExecutor( ## Running your Executor -Our last step is to add this executor to a given project’s `targets` object in your project's `project.json` file: +Our last step is to add this executor to a given project's `targets` object in your project's `project.json` file: ```jsonc {% fileName="project.json" highlightLines=["5-10"] %} { @@ -133,9 +138,9 @@ Nx uses the paths from `tsconfig.base.json` when running plugins locally, but us ## Using Node Child Process -[Node’s `childProcess`](https://nodejs.org/api/child_process.html) is often useful in executors. +[Node's `childProcess`](https://nodejs.org/api/child_process.html) is often useful in executors. -Part of the power of the executor API is the ability to compose executors via existing targets. This way you can combine other executors from your workspace into one which could be helpful when the process you’re scripting is a combination of other existing executors provided by the CLI or other custom executors in your workspace. +Part of the power of the executor API is the ability to compose executors via existing targets. This way you can combine other executors from your workspace into one which could be helpful when the process you're scripting is a combination of other existing executors provided by the CLI or other custom executors in your workspace. Here's an example of this (from a hypothetical project), that serves an api (project name: "api") in watch mode, then serves a frontend app (project name: "web-client") in watch mode: diff --git a/docs/shared/recipes/plugins/migration-generators.md b/docs/shared/recipes/plugins/migration-generators.md index efdc1d4730..a8bfa6c43b 100644 --- a/docs/shared/recipes/plugins/migration-generators.md +++ b/docs/shared/recipes/plugins/migration-generators.md @@ -1,3 +1,8 @@ +--- +title: Migration Generators +description: Learn how to create migration generators for your Nx plugin to automatically update configuration files when your plugin makes breaking changes. +--- + # Migration Generators When your plugin is being used in other repos, it is helpful to provide migration generators to automatically update configuration files when your plugin makes a breaking change. diff --git a/docs/shared/recipes/plugins/project-graph-plugins.md b/docs/shared/recipes/plugins/project-graph-plugins.md index a0dfceaeef..f74b391bb1 100644 --- a/docs/shared/recipes/plugins/project-graph-plugins.md +++ b/docs/shared/recipes/plugins/project-graph-plugins.md @@ -1,3 +1,8 @@ +--- +title: Extending the Project Graph +description: Learn how to create project graph plugins for Nx to add custom nodes and dependencies, enabling support for additional languages and technologies. +--- + # Extending the Project Graph of Nx The Project Graph is the representation of the source code in your repo. Projects can have files associated with them. Projects can have dependencies on each other. @@ -146,7 +151,7 @@ async function createNodesInternal( By checking for the presence of a `project.json` or `package.json` file, the plugin can be more confident that the project it is modifying is an existing Nx project. -When extending an existing project, its important to consider how Nx will merge the returned project configurations. In general, plugins are run in the order they are listed in `nx.json`, and then Nx's built-in plugins are run last. Plugins overwrite information that was identified by plugins that run before them if a merge is not possible. +When extending an existing project, its important to consider how Nx will merge the returned project configurations. In general, plugins are run in the order they are listed in `nx.json`, and then Nx's built-in plugins are run last. Plugins overwrite information that was identified by plugins that ran before them if a merge is not possible. Nx considers two identified projects to be the same if and only if they have the same root. If two projects are identified with the same name, but different roots, there will be an error. diff --git a/docs/shared/recipes/plugins/publish-plugin.md b/docs/shared/recipes/plugins/publish-plugin.md index 13a854b59d..bdfb41ab2c 100644 --- a/docs/shared/recipes/plugins/publish-plugin.md +++ b/docs/shared/recipes/plugins/publish-plugin.md @@ -1,3 +1,8 @@ +--- +title: Publish Your Nx Plugin +description: Learn how to publish your Nx plugin to npm and get it listed in the official Nx plugin registry so others can discover and use it. +--- + # Publish your Nx Plugin In order to use your plugin in other workspaces or share it with the community, you will need to publish it to an npm registry. To publish your plugin follow these steps: diff --git a/docs/shared/recipes/resolve-circular-dependencies.md b/docs/shared/recipes/resolve-circular-dependencies.md index f08562d28f..7e31ea07be 100644 --- a/docs/shared/recipes/resolve-circular-dependencies.md +++ b/docs/shared/recipes/resolve-circular-dependencies.md @@ -1,3 +1,8 @@ +--- +title: Resolve Circular Dependencies +description: Learn how to identify and fix circular dependencies in your Nx workspace to improve code organization and make the affected algorithm more effective. +--- + # Resolve Circular Dependencies A circular dependency is when a project transitively depends on itself. This can cause problems in the design of your software and also makes Nx's affected algorithm less effective. The lint rule, `@nx/enforce-module-boundaries`, will produce an error if any circular dependencies are created and ensures that any `import` statements going across projects only `import` from the defined public apis in a project's root `index.ts` file. diff --git a/docs/shared/recipes/running-tasks/change-cache-location.md b/docs/shared/recipes/running-tasks/change-cache-location.md index 8c3dd56191..d00015d1bd 100644 --- a/docs/shared/recipes/running-tasks/change-cache-location.md +++ b/docs/shared/recipes/running-tasks/change-cache-location.md @@ -1,3 +1,8 @@ +--- +title: Change Cache Location +description: Learn how to customize where Nx stores its cache files by modifying the cacheDirectory setting in your nx.json configuration. +--- + # Change Cache Location By default the cache is stored locally in `.nx/cache`. Cache results are stored for a week before they get deleted. You can customize the cache location in the `nx.json` file: diff --git a/docs/shared/recipes/running-tasks/convert-to-inferred.md b/docs/shared/recipes/running-tasks/convert-to-inferred.md index 1acc78d6e1..44a111a938 100644 --- a/docs/shared/recipes/running-tasks/convert-to-inferred.md +++ b/docs/shared/recipes/running-tasks/convert-to-inferred.md @@ -1,3 +1,8 @@ +--- +title: Migrate to Inferred Tasks (Project Crystal) +description: Learn how to convert your Nx workspace from explicit executor configuration to using inferred tasks for reduced configuration and improved caching. +--- + # Migrate to Inferred Tasks (Project Crystal) In this recipe, you'll learn how to migrate an existing Nx workspace from using executors in `project.json` to using [inferred tasks](/concepts/inferred-tasks). diff --git a/docs/shared/recipes/running-tasks/reduce-repetitive-configuration.md b/docs/shared/recipes/running-tasks/reduce-repetitive-configuration.md index 41a55d7183..2c575e6603 100644 --- a/docs/shared/recipes/running-tasks/reduce-repetitive-configuration.md +++ b/docs/shared/recipes/running-tasks/reduce-repetitive-configuration.md @@ -1,3 +1,8 @@ +--- +title: Reduce Repetitive Configuration +description: Learn how to use Nx's targetDefaults, namedInputs, and other features to minimize duplicate configuration across projects in your workspace. +--- + # Reduce Repetitive Configuration Nx can help you dramatically reduce the lines of configuration code that you need to maintain. diff --git a/docs/shared/recipes/running-tasks/root-level-scripts.md b/docs/shared/recipes/running-tasks/root-level-scripts.md index c2dd19d919..e05e77215b 100644 --- a/docs/shared/recipes/running-tasks/root-level-scripts.md +++ b/docs/shared/recipes/running-tasks/root-level-scripts.md @@ -1,3 +1,8 @@ +--- +title: Run Root-Level NPM Scripts with Nx +description: Learn how to run npm scripts from your root package.json using Nx to benefit from caching, task orchestration, and other Nx features. +--- + # Run Root-Level NPM Scripts with Nx {% youtube diff --git a/docs/shared/recipes/running-tasks/run-tasks-in-parallel.md b/docs/shared/recipes/running-tasks/run-tasks-in-parallel.md index 7d0dfc5dd2..1b57c771e2 100644 --- a/docs/shared/recipes/running-tasks/run-tasks-in-parallel.md +++ b/docs/shared/recipes/running-tasks/run-tasks-in-parallel.md @@ -1,3 +1,8 @@ +--- +title: Run Tasks in Parallel +description: Learn how to configure Nx to run multiple tasks simultaneously by adjusting the parallel option in the command line or nx.json configuration. +--- + # Run Tasks in Parallel If you want to increase the number of processes running tasks to, say, 5 (by default, it is 3), pass the following: diff --git a/docs/shared/recipes/running-tasks/running-custom-commands.md b/docs/shared/recipes/running-tasks/running-custom-commands.md index 1058f03bfe..494ca5c30e 100644 --- a/docs/shared/recipes/running-tasks/running-custom-commands.md +++ b/docs/shared/recipes/running-tasks/running-custom-commands.md @@ -1,3 +1,8 @@ +--- +title: Running Custom Commands +description: Learn how to run custom terminal commands with Nx to make them cacheable, distributable, and compatible with Nx's affected commands. +--- + # Running Custom Commands You can easily run any command with the Nx toolchain. The main benefit is to make the [operation cacheable](/concepts/how-caching-works), [distributable](/ci/features/distribute-task-execution) as well as being able to use it [with Nx's affected commands](/ci/features/affected). diff --git a/docs/shared/recipes/running-tasks/skipping-cache.md b/docs/shared/recipes/running-tasks/skipping-cache.md index deada64696..9fb21ce644 100644 --- a/docs/shared/recipes/running-tasks/skipping-cache.md +++ b/docs/shared/recipes/running-tasks/skipping-cache.md @@ -1,3 +1,8 @@ +--- +title: Skip Task Caching +description: Learn how to bypass Nx's caching mechanism for specific tasks, skip remote caching from Nx Cloud, and reset the cache when needed. +--- + # Skip Task Caching There are times when you might want to bypass the [caching mechanism](/features/cache-task-results), either locally or remotely. diff --git a/docs/shared/recipes/running-tasks/workspace-watching.md b/docs/shared/recipes/running-tasks/workspace-watching.md index 11fd92626c..3601f45cee 100644 --- a/docs/shared/recipes/running-tasks/workspace-watching.md +++ b/docs/shared/recipes/running-tasks/workspace-watching.md @@ -1,3 +1,8 @@ +--- +title: Workspace Watching +description: Learn how to use Nx's workspace watching feature to automatically execute commands when files change, improving development workflow and productivity. +--- + # Workspace Watching {% youtube src="https://youtu.be/0eVplUl1zBE?si=KtmiyRm1AcYc01td" title="Workspace watching" /%} diff --git a/docs/shared/recipes/tag-multiple-dimensions.md b/docs/shared/recipes/tag-multiple-dimensions.md index 7144d79c07..a157a162b0 100644 --- a/docs/shared/recipes/tag-multiple-dimensions.md +++ b/docs/shared/recipes/tag-multiple-dimensions.md @@ -1,3 +1,8 @@ +--- +title: Tag in Multiple Dimensions +description: Learn how to use multiple tag dimensions in Nx to create more sophisticated module boundary constraints, controlling dependencies between projects based on scope, type, and other attributes. +--- + # Tag in Multiple Dimensions The example listed in [Enforce Module Boundaries](/features/enforce-module-boundaries#tags) shows using a single dimension: `scope`. It's the most commonly used one. But you can find other dimensions useful. You can define which projects contain components, state management code, and features, so you, for instance, can disallow projects containing presentational UI components to depend on state management code. You can define which projects are experimental and which are stable, so stable applications cannot depend on experimental projects etc. You can define which projects have server-side code and which have client-side code to make sure your node app doesn't bundle in your frontend framework. diff --git a/docs/shared/recipes/tags-allow-list.md b/docs/shared/recipes/tags-allow-list.md index 39262d8ac3..dffa50c4f1 100644 --- a/docs/shared/recipes/tags-allow-list.md +++ b/docs/shared/recipes/tags-allow-list.md @@ -1,3 +1,8 @@ +--- +title: Tags Allow List +description: Learn how to create exceptions to your module boundary rules by configuring allow lists that permit specific imports that would otherwise be restricted. +--- + # Tags Allow List Sometimes there are specific situations where you want to break the tag rules you've set up for project dependencies. diff --git a/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md b/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md index 3b663af534..b3bed19826 100644 --- a/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md +++ b/docs/shared/recipes/tips-n-tricks/compile-multiple-formats.md @@ -1,3 +1,8 @@ +--- +title: Compile TypeScript Libraries to Multiple Formats +description: Learn how to use Nx with Rollup to compile TypeScript libraries to both ESM and CommonJS formats for maximum compatibility. +--- + # Compile Typescript Libraries to Multiple Formats {% youtube diff --git a/docs/shared/recipes/tips-n-tricks/define-secondary-entrypoints.md b/docs/shared/recipes/tips-n-tricks/define-secondary-entrypoints.md index 2fdf932170..27316b0e01 100644 --- a/docs/shared/recipes/tips-n-tricks/define-secondary-entrypoints.md +++ b/docs/shared/recipes/tips-n-tricks/define-secondary-entrypoints.md @@ -1,3 +1,8 @@ +--- +title: Define Secondary Entry Points for TypeScript Packages +description: Learn how to configure multiple entry points for your TypeScript packages using Nx, allowing consumers to import specific parts of your library. +--- + # Define Secondary Entry Points for Typescript Packages If you have a package where you want people to be able to access more than just the `main` file, you can define an `exports` property in the `package.json` file. Like this: diff --git a/docs/shared/recipes/tips-n-tricks/keep-nx-versions-in-sync.md b/docs/shared/recipes/tips-n-tricks/keep-nx-versions-in-sync.md index 80c18db7b9..ceabd2f3ec 100644 --- a/docs/shared/recipes/tips-n-tricks/keep-nx-versions-in-sync.md +++ b/docs/shared/recipes/tips-n-tricks/keep-nx-versions-in-sync.md @@ -1,3 +1,8 @@ +--- +title: Keep Nx Versions in Sync +description: Learn how to ensure all Nx plugins in your repository are using the same version to avoid compatibility issues and debugging challenges. +--- + # Keep Nx Versions in Sync If your Nx plugin versions do not match the version of `nx` in your repository, you can encounter some difficult to debug errors. To get your Nx plugins back in sync, follow the steps below: diff --git a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md index a075d3da03..7301e818cf 100644 --- a/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md +++ b/docs/shared/recipes/tips-n-tricks/migrating-to-flat-eslint.md @@ -1,3 +1,8 @@ +--- +title: Switching to ESLint's Flat Config Format +description: Learn how to migrate your Nx workspace to ESLint's new flat configuration format, understanding the benefits and implementation details. +--- + # Switching to ESLint's flat config format Version 8 of ESLint introduced a new configuration format called [Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new). The next major version will use this config format by default. The purpose of this format is to: diff --git a/docs/shared/recipes/tips-n-tricks/standalone-to-monorepo.md b/docs/shared/recipes/tips-n-tricks/standalone-to-monorepo.md index 4e5d34e17c..7707f582b5 100644 --- a/docs/shared/recipes/tips-n-tricks/standalone-to-monorepo.md +++ b/docs/shared/recipes/tips-n-tricks/standalone-to-monorepo.md @@ -1,3 +1,8 @@ +--- +title: Convert from a Standalone Repository to a Monorepo +description: Learn how to transform your standalone Nx repository into a full monorepo structure by moving your root-level application into the apps directory. +--- + # Convert from a Standalone Repository to a Monorepo You can always add another app to a standalone repository the same way you would in a monorepo. But at some point, you may want to move the primary app out of the root of your repo because the repo is no longer primarily focused on that one app. There are other apps that are equally important and you want the folder structure to align with the new reality. diff --git a/docs/shared/recipes/tips-n-tricks/switch-to-workspaces-project-references.md b/docs/shared/recipes/tips-n-tricks/switch-to-workspaces-project-references.md index d3b65d1032..34661b5bed 100644 --- a/docs/shared/recipes/tips-n-tricks/switch-to-workspaces-project-references.md +++ b/docs/shared/recipes/tips-n-tricks/switch-to-workspaces-project-references.md @@ -1,3 +1,8 @@ +--- +title: Switch to Workspaces and Project References +description: Learn how to migrate from TypeScript path aliases to package manager workspaces for project linking, enabling TypeScript project references for better performance. +--- + # Switch to Workspaces and Project References If you want to take advantage of the [performance benefits](/concepts/typescript-project-linking#typescript-project-references-performance-benefits) of TypeScript project references, it is recommended to use package manager workspaces for local [project linking](/concepts/typescript-project-linking). If you are currently using TypeScript path aliases for project linking, follow the steps in this guide to switch to workspaces project linking and enable TypeScript project references. diff --git a/docs/shared/recipes/troubleshoot-cache-misses.md b/docs/shared/recipes/troubleshoot-cache-misses.md index ba1423221e..8617652de5 100644 --- a/docs/shared/recipes/troubleshoot-cache-misses.md +++ b/docs/shared/recipes/troubleshoot-cache-misses.md @@ -1,3 +1,8 @@ +--- +title: Troubleshoot Cache Misses +description: Learn how to diagnose and fix issues when Nx tasks are not being replayed from cache as expected, using project configuration checks and Nx Cloud tools. +--- + # Troubleshoot Cache Misses Problem: A task is being executed when you expect it to be replayed from the cache. diff --git a/docs/shared/recipes/yarn-pnp.md b/docs/shared/recipes/yarn-pnp.md index 59f9e0b517..545e26306a 100644 --- a/docs/shared/recipes/yarn-pnp.md +++ b/docs/shared/recipes/yarn-pnp.md @@ -1,3 +1,8 @@ +--- +title: Using Yarn Plug'n'Play with Nx +description: Learn how to configure and use Yarn Plug'n'Play (PnP) in your Nx workspace to improve installation speed, reduce disk usage, and enforce dependency constraints. +--- + # Using Yarn Plug'n'Play Plug'n'Play (PnP) is an innovative installation strategy for Node that tries to solve the challenges of using `node_modules` for storing installed packages: diff --git a/docs/shared/reference/commands.md b/docs/shared/reference/commands.md index 152f8d6471..6d56f53515 100644 --- a/docs/shared/reference/commands.md +++ b/docs/shared/reference/commands.md @@ -1,3 +1,8 @@ +--- +title: Nx Commands +description: A comprehensive reference of all available Nx CLI commands for modifying code, running tasks, displaying information, and integrating with Nx Cloud. +--- + # Nx Commands The Nx CLI provides many commands. They are organized here into commands that: diff --git a/docs/shared/reference/environment-variables.md b/docs/shared/reference/environment-variables.md index 24abbfb0f2..93d2c99e01 100644 --- a/docs/shared/reference/environment-variables.md +++ b/docs/shared/reference/environment-variables.md @@ -1,3 +1,8 @@ +--- +title: Environment Variables +description: A comprehensive reference of all environment variables that can be used to configure and control Nx behavior in different environments. +--- + # Environment Variables The following environment variables are ones that you can set to change the behavior of Nx in different environments. diff --git a/docs/shared/reference/glossary.md b/docs/shared/reference/glossary.md index 7af227d01e..00333c3f2f 100644 --- a/docs/shared/reference/glossary.md +++ b/docs/shared/reference/glossary.md @@ -1,3 +1,8 @@ +--- +title: Nx Glossary +description: A comprehensive reference of Nx-specific terminology to help you understand the concepts and features of the Nx ecosystem. +--- + # Glossary This is a short list of Nx-specific terms that will help you understand the rest of the documentation. diff --git a/docs/shared/reference/inputs.md b/docs/shared/reference/inputs.md index 5792246eea..b76a950b70 100644 --- a/docs/shared/reference/inputs.md +++ b/docs/shared/reference/inputs.md @@ -1,3 +1,8 @@ +--- +title: Inputs and Named Inputs +description: Learn how Nx uses inputs to compute cache hashes for tasks, including file sets, runtime inputs, and environment variables that affect task outputs. +--- + # Inputs and Named Inputs When Nx [computes the hash for a given operation](/concepts/how-caching-works), it takes into account the `inputs` of the target. diff --git a/docs/shared/reference/nx-json.md b/docs/shared/reference/nx-json.md index 2fdcb9f0e6..6a1b8500eb 100644 --- a/docs/shared/reference/nx-json.md +++ b/docs/shared/reference/nx-json.md @@ -1,3 +1,8 @@ +--- +title: nx.json Reference +description: A comprehensive reference for the nx.json configuration file, which controls Nx CLI behavior, project defaults, and workspace settings. +--- + # nx.json The `nx.json` file configures the Nx CLI and project defaults. The full [machine readable schema](https://github.com/nrwl/nx/blob/master/packages/nx/schemas/nx-schema.json) is available on GitHub. diff --git a/docs/shared/reference/nxignore.md b/docs/shared/reference/nxignore.md index 0cd6155b6f..7e7f5c1107 100644 --- a/docs/shared/reference/nxignore.md +++ b/docs/shared/reference/nxignore.md @@ -1,3 +1,8 @@ +--- +title: .nxignore Reference +description: Learn how to use the .nxignore file to specify files in your workspace that should be completely ignored by Nx during affected calculations. +--- + # .nxignore You may optionally add an `.nxignore` file to the root. This file is used to specify files in your workspace that should diff --git a/docs/shared/reference/project-configuration.md b/docs/shared/reference/project-configuration.md index 8b2ab8588a..b306a0f2a0 100644 --- a/docs/shared/reference/project-configuration.md +++ b/docs/shared/reference/project-configuration.md @@ -1,5 +1,6 @@ --- keywords: [project.json] +description: Learn how Nx constructs project configuration from inferred tasks, workspace defaults, and project-level files, with detailed explanations of task definitions and configuration options. --- # Project Configuration diff --git a/docs/shared/reference/releases.md b/docs/shared/reference/releases.md index ae36911978..ea82272a8d 100644 --- a/docs/shared/reference/releases.md +++ b/docs/shared/reference/releases.md @@ -1,3 +1,8 @@ +--- +title: Nx Release Schedule and Support Policy +description: Information about Nx package releases, including version support timelines, LTS policy, and deprecation guidelines for the nx and @nx/* packages. +--- + # Releases of the nx and @nx/\* packages {% callout type="info" title="Looking for guidance on releasing your projects with Nx Release?" %} diff --git a/docs/shared/showcase/example-repos.md b/docs/shared/showcase/example-repos.md index 65c757836a..9d145df355 100644 --- a/docs/shared/showcase/example-repos.md +++ b/docs/shared/showcase/example-repos.md @@ -1,3 +1,8 @@ +--- +title: Nx Integration with Technologies and Frameworks +description: Explore example repositories demonstrating how Nx integrates with various technologies and frameworks across different platforms. +--- + # Nx Integration with Technologies and Frameworks ## Examples across platforms diff --git a/docs/shared/using-nx/affected.md b/docs/shared/using-nx/affected.md index cfd09c0daa..dd764e974f 100644 --- a/docs/shared/using-nx/affected.md +++ b/docs/shared/using-nx/affected.md @@ -1,3 +1,8 @@ +--- +title: Run Only Tasks Affected by a PR +description: Learn how to use Nx's affected command to determine and run tasks only on projects affected by your changes, improving CI speed and efficiency. +--- + # Run Only Tasks Affected by a PR {% youtube diff --git a/nx.json b/nx.json index f874b8559c..31606f232d 100644 --- a/nx.json +++ b/nx.json @@ -253,7 +253,7 @@ "rule": "@nx/workspace-plugin/conformance-rules/blog-description", "projects": ["docs"], "options": { - "mdGlobPattern": "{blog,shared}/**/*.md" + "mdGlobPattern": "{blog,shared}/**/!(sitemap).md" } }, {