From d2d18a6cb48111dba642d6f6610676e82df3b8b1 Mon Sep 17 00:00:00 2001 From: Juri Date: Tue, 10 Jun 2025 20:44:31 +0200 Subject: [PATCH] docs(core): update getting started pages --- README.md | 2 +- ...er-location-with-netlify-edge-functions.md | 2 +- ...ergreen-tooling-more-than-just-codemods.md | 2 +- docs/blog/2023-08-15-qwikify-your-dev.md | 2 +- docs/blog/2023-10-13-nx-conf-2023-recap.md | 2 +- docs/blog/2023-12-28-highlights-2023.md | 2 +- ...-01-31-over-the-air-updates-with-zephyr.md | 2 +- ...025-02-17-monorepos-are-ai-future-proof.md | 2 +- docs/courses/explore-nx/lessons/01-why-nx.md | 2 +- docs/generated/manifests/ci.json | 2 +- docs/generated/manifests/menus.json | 24 ++- docs/generated/manifests/nx.json | 68 ++++++-- docs/generated/manifests/tags.json | 76 +++++---- .../angular/documents/nx-and-angular.md | 6 +- docs/map.json | 23 ++- docs/nx-cloud/intro/ci-with-nx.md | 16 +- docs/shared/getting-started/ai-setup.md | 48 ++++++ docs/shared/getting-started/editor-setup.md | 4 +- docs/shared/getting-started/installation.md | 8 +- docs/shared/getting-started/intro.md | 147 +++++++----------- docs/shared/getting-started/quick-start.md | 104 +++++++++++++ .../getting-started/start-new-project.md | 89 +++++++++++ .../start-with-existing-project.md | 34 ++++ docs/shared/getting-started/why-nx.md | 62 -------- docs/shared/guides/nx-and-angular-cli.md | 6 +- docs/shared/reference/sitemap.md | 6 +- docs/shared/tutorials/angular-monorepo.md | 2 +- docs/shared/tutorials/react-monorepo.md | 2 - .../feature-doc-viewer/src/lib/doc-viewer.tsx | 2 +- nx-dev/nx-dev/redirect-rules.js | 13 +- nx-dev/ui-common/src/lib/footer.tsx | 17 ++ .../src/lib/headers/documentation-header.tsx | 17 ++ .../ui-community/src/lib/connect-with-us.tsx | 51 ++++-- nx-dev/ui-markdoc/src/index.ts | 6 + .../src/lib/tags/cards.component.tsx | 8 +- .../src/lib/tags/steps.component.tsx | 60 +++++++ .../ui-markdoc/src/lib/tags/steps.schema.ts | 21 +++ 37 files changed, 681 insertions(+), 259 deletions(-) create mode 100644 docs/shared/getting-started/ai-setup.md create mode 100644 docs/shared/getting-started/quick-start.md create mode 100644 docs/shared/getting-started/start-new-project.md create mode 100644 docs/shared/getting-started/start-with-existing-project.md delete mode 100644 docs/shared/getting-started/why-nx.md create mode 100644 nx-dev/ui-markdoc/src/lib/tags/steps.component.tsx create mode 100644 nx-dev/ui-markdoc/src/lib/tags/steps.schema.ts diff --git a/README.md b/README.md index c17f2ad5ec..46c8377a84 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ npx create-nx-workspace npx nx init ``` -to add Nx to your existing workspace to get faster task scheduling, caching and more. More [in the docs](https://nx.dev/getting-started/intro#try-nx-yourself). +to add Nx to your existing workspace to get faster task scheduling, caching and more. More [in the docs](https://nx.dev/getting-started/intro). ## Learn about CI with Nx Cloud diff --git a/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md b/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md index ae38eca6bb..30b7518548 100644 --- a/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md +++ b/docs/blog/2023-05-26-determine-your-user-location-with-netlify-edge-functions.md @@ -101,7 +101,7 @@ By following these steps, you've successfully used `@nx/netlify` serverless func ### Wrapping up -Never used Nx before? Learn more about Nx [here](/getting-started/why-nx). +Never used Nx before? Learn more about Nx [here](/getting-started/intro). [Official recipe from Nx](/technologies/node/recipes/node-serverless-functions-netlify) [Github example](https://github.com/ndcunningham/nx-netlify-serverless) diff --git a/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md b/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md index 064921e0b6..78cd0efa15 100644 --- a/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md +++ b/docs/blog/2023-07-26-evergreen-tooling-more-than-just-codemods.md @@ -148,7 +148,7 @@ Nx’s modular design helps as each plugin is responsible for a particular area ![](/blog/images/2023-07-26/LNYWLmdgxQ07bqyt.avif) -_(Source:_ [_/getting-started/why-nx_](/getting-started/why-nx)_)_ +_(Source:_ [_/getting-started/intro_](/getting-started/intro)_)_ These plugins are usually technology-specific, like a plugin to help you manage React, Next, Remix, or Angular projects and tooling like ESLint, Cypress, Playwright, Vite, Jest, and so on. There are no limits as you can [create your own](/extending-nx/intro/getting-started). They are **optional**, in that you can use Nx and React and set everything up on your own. But it might be worth relying on them for some better DX and automation, such as the update mechanism we’re currently looking at. diff --git a/docs/blog/2023-08-15-qwikify-your-dev.md b/docs/blog/2023-08-15-qwikify-your-dev.md index 77412b55af..7bcb8260fa 100644 --- a/docs/blog/2023-08-15-qwikify-your-dev.md +++ b/docs/blog/2023-08-15-qwikify-your-dev.md @@ -11,7 +11,7 @@ In the ever-evolving web development landscape, efficiency and modularity have b Qwik is a modern web framework that focuses on application performance by reducing the amount of JavaScript that needs to be shipped to the browser. You can learn more about how Qwik achieves this with [Resumability in their docs](https://qwik.dev/docs/concepts/resumable/). -Nx is a powerful tool that helps you build extensible and maintainable codebases that scale as your application and team grows. Nx utilises computation cache and workspace analysis to ensure maximum efficiency and developer experience. You can [learn more about Nx here](/getting-started/why-nx). +Nx is a powerful tool that helps you build extensible and maintainable codebases that scale as your application and team grows. Nx utilises computation cache and workspace analysis to ensure maximum efficiency and developer experience. You can [learn more about Nx here](/getting-started/intro). In this blog post, we'll explore how to combine the strengths of Nx and Qwik to create a todo app. To do this, we'll take advantage of an Nx Plugin that was created by the Qwikifiers team to maximise the integration between Qwik and Nx, called [`qwik-nx`](https://github.com/qwikifiers/qwik-nx). diff --git a/docs/blog/2023-10-13-nx-conf-2023-recap.md b/docs/blog/2023-10-13-nx-conf-2023-recap.md index ffb55a6ac1..b3dfe436e0 100644 --- a/docs/blog/2023-10-13-nx-conf-2023-recap.md +++ b/docs/blog/2023-10-13-nx-conf-2023-recap.md @@ -17,7 +17,7 @@ The 3rd edition of [Nx Conf](/conf), this year live from New York City. If you m {% youtube src="https://www.youtube.com/watch?v=WSqivWlEDFw" /%} -Juri Strumpflohner (me 😅) opens the keynote. He focuses on the Nx ecosystem, how it is [much more than monorepos](/getting-started/why-nx) by helping you integrate your framework of choice (whether that is Angular, React, or Vue) with tooling such as ESLint, Playwright, Cypress, Webpack, ESBuild, Vite etc. +Juri Strumpflohner (me 😅) opens the keynote. He focuses on the Nx ecosystem, how it is [much more than monorepos](/getting-started/intro) by helping you integrate your framework of choice (whether that is Angular, React, or Vue) with tooling such as ESLint, Playwright, Cypress, Webpack, ESBuild, Vite etc. ![](/blog/images/2023-10-13/bodyimg1.webp) diff --git a/docs/blog/2023-12-28-highlights-2023.md b/docs/blog/2023-12-28-highlights-2023.md index e0a7ea8d7b..67e9cc4b0e 100644 --- a/docs/blog/2023-12-28-highlights-2023.md +++ b/docs/blog/2023-12-28-highlights-2023.md @@ -318,7 +318,7 @@ We also poured a lot of [effort into the docs](/getting-started/intro). We restr - [**Tutorials**](/getting-started/tutorials) — for when you just want to sit down and follow along, step by step to learn how to use Nx in a certain context. - [**Reference**](/reference) and [**API docs**](/reference/core-api) — pure, raw and to the point. -We created a brand new ["Why Nx"](/getting-started/why-nx) page explaining the overall architecture of Nx including a [brand new video](https://www.youtube.com/watch?v=-_4WMl-Fn0w) giving you a holistic overview of what Nx is capable of. +We created a brand new ["Why Nx"](/getting-started/intro) page explaining the overall architecture of Nx including a [brand new video](https://www.youtube.com/watch?v=-_4WMl-Fn0w) giving you a holistic overview of what Nx is capable of. We also refreshed our [entry pages](/getting-started/intro), including dedicated examples of using Nx with popular stacks: diff --git a/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md b/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md index f1fd26bc3c..8df2be506f 100644 --- a/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md +++ b/docs/blog/2025-01-31-over-the-air-updates-with-zephyr.md @@ -60,7 +60,7 @@ Beyond just mitigating risk of changing dependencies that can cause runtime erro If you sprinkle [Nx Cloud](/ci/intro/why-nx-cloud) on top - you can ensure your CI remains fast as you scale out your application through [Nx Replay](/ci/features/remote-cache#use-remote-caching-nx-replay) and [Nx Agents](/ci/features/distribute-task-execution). Increased scalability does not come with an increased maintenance cost of managing CI machines manually thanks to declarative [config files](/ci/recipes/set-up/monorepo-ci-github-actions). -You can learn more about Why to use Nx beyond Module Federation support [here](/getting-started/why-nx). +You can learn more about Why to use Nx beyond Module Federation support [here](/getting-started/intro). ## Setting up a Super App with Nx diff --git a/docs/blog/2025-02-17-monorepos-are-ai-future-proof.md b/docs/blog/2025-02-17-monorepos-are-ai-future-proof.md index 37a822a495..5bc618d7db 100644 --- a/docs/blog/2025-02-17-monorepos-are-ai-future-proof.md +++ b/docs/blog/2025-02-17-monorepos-are-ai-future-proof.md @@ -140,7 +140,7 @@ And this is just the beginning. While Nx already understands your local monorepo ## Try It Out Yourself -If you want to test this out, [create a new Nx workspace](/getting-started/intro#try-nx-yourself) and make sure you have [Nx Console](/getting-started/editor-setup) installed or updated to the latest version. +If you want to test this out, [create a new Nx workspace](/getting-started/start-new-project) and make sure you have [Nx Console](/getting-started/editor-setup) installed or updated to the latest version. > If you already have an existing NPM/Yarn/PNPM workspace, you can add Nx with `nx init`. Check out [our free course](/courses/pnpm-nx-next) to learn more. diff --git a/docs/courses/explore-nx/lessons/01-why-nx.md b/docs/courses/explore-nx/lessons/01-why-nx.md index 13868e98ce..2803905462 100644 --- a/docs/courses/explore-nx/lessons/01-why-nx.md +++ b/docs/courses/explore-nx/lessons/01-why-nx.md @@ -16,4 +16,4 @@ This video gives you a birds-eye view of Nx in ~10 minutes. It covers topics suc - Abstracting low-level configs - Automated Code Updates -Read more [in our docs](/getting-started/why-nx) +Read more [in our docs](/getting-started/intro) diff --git a/docs/generated/manifests/ci.json b/docs/generated/manifests/ci.json index e9674f2fef..a254433da0 100644 --- a/docs/generated/manifests/ci.json +++ b/docs/generated/manifests/ci.json @@ -4,7 +4,7 @@ "name": "Intro", "description": "Learn about basic Nx Cloud knowledge.", "mediaImage": "", - "file": "", + "file": "nx-cloud/intro/ci-with-nx", "itemList": [ { "id": "ci-with-nx", diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 45678bf67f..7e894af363 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -9,7 +9,7 @@ "isExternal": false, "children": [ { - "name": "Intro to Nx", + "name": "Introduction", "path": "/getting-started/intro", "id": "intro", "isExternal": false, @@ -25,9 +25,17 @@ "disableCollapsible": false }, { - "name": "Why Nx?", - "path": "/getting-started/why-nx", - "id": "why-nx", + "name": "Start a new project", + "path": "/getting-started/start-new-project", + "id": "start-new-project", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "Add to existing project", + "path": "/getting-started/adding-to-existing", + "id": "adding-to-existing", "isExternal": false, "children": [], "disableCollapsible": false @@ -40,6 +48,14 @@ "children": [], "disableCollapsible": false }, + { + "name": "AI Integration", + "path": "/getting-started/ai-integration", + "id": "ai-integration", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Tutorials", "path": "/getting-started/tutorials", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index da517f91f7..f717c1bfda 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -4,11 +4,11 @@ "name": "Getting Started", "description": "Get started with basic information, concepts and tutorials.", "mediaImage": "", - "file": "", + "file": "shared/getting-started/quick-start", "itemList": [ { "id": "intro", - "name": "Intro to Nx", + "name": "Introduction", "description": "", "mediaImage": "", "file": "shared/getting-started/intro", @@ -29,16 +29,27 @@ "tags": [] }, { - "id": "why-nx", - "name": "Why Nx?", + "id": "start-new-project", + "name": "Start a new project", "description": "", "mediaImage": "", - "file": "shared/getting-started/why-nx", + "file": "shared/getting-started/start-new-project", "itemList": [], "isExternal": false, - "path": "/getting-started/why-nx", + "path": "/getting-started/start-new-project", "tags": [] }, + { + "id": "adding-to-existing", + "name": "Add to existing project", + "description": "", + "mediaImage": "", + "file": "shared/getting-started/start-with-existing-project", + "itemList": [], + "isExternal": false, + "path": "/getting-started/adding-to-existing", + "tags": ["init"] + }, { "id": "editor-setup", "name": "Editor Integration", @@ -50,6 +61,17 @@ "path": "/getting-started/editor-setup", "tags": ["editor-setup"] }, + { + "id": "ai-integration", + "name": "AI Integration", + "description": "Learn about how to integrate Nx with your favorite AI assistant.", + "mediaImage": "", + "file": "shared/getting-started/ai-setup", + "itemList": [], + "isExternal": false, + "path": "/getting-started/ai-integration", + "tags": ["ai-integration"] + }, { "id": "tutorials", "name": "Tutorials", @@ -113,7 +135,7 @@ }, "/getting-started/intro": { "id": "intro", - "name": "Intro to Nx", + "name": "Introduction", "description": "", "mediaImage": "", "file": "shared/getting-started/intro", @@ -133,17 +155,28 @@ "path": "/getting-started/installation", "tags": [] }, - "/getting-started/why-nx": { - "id": "why-nx", - "name": "Why Nx?", + "/getting-started/start-new-project": { + "id": "start-new-project", + "name": "Start a new project", "description": "", "mediaImage": "", - "file": "shared/getting-started/why-nx", + "file": "shared/getting-started/start-new-project", "itemList": [], "isExternal": false, - "path": "/getting-started/why-nx", + "path": "/getting-started/start-new-project", "tags": [] }, + "/getting-started/adding-to-existing": { + "id": "adding-to-existing", + "name": "Add to existing project", + "description": "", + "mediaImage": "", + "file": "shared/getting-started/start-with-existing-project", + "itemList": [], + "isExternal": false, + "path": "/getting-started/adding-to-existing", + "tags": ["init"] + }, "/getting-started/editor-setup": { "id": "editor-setup", "name": "Editor Integration", @@ -155,6 +188,17 @@ "path": "/getting-started/editor-setup", "tags": ["editor-setup"] }, + "/getting-started/ai-integration": { + "id": "ai-integration", + "name": "AI Integration", + "description": "Learn about how to integrate Nx with your favorite AI assistant.", + "mediaImage": "", + "file": "shared/getting-started/ai-setup", + "itemList": [], + "isExternal": false, + "path": "/getting-started/ai-integration", + "tags": ["ai-integration"] + }, "/getting-started/tutorials": { "id": "tutorials", "name": "Tutorials", diff --git a/docs/generated/manifests/tags.json b/docs/generated/manifests/tags.json index cd547c83eb..95dcdf3b44 100644 --- a/docs/generated/manifests/tags.json +++ b/docs/generated/manifests/tags.json @@ -1,4 +1,41 @@ { + "init": [ + { + "description": "", + "file": "shared/getting-started/start-with-existing-project", + "id": "adding-to-existing", + "name": "Add to existing project", + "path": "/getting-started/adding-to-existing" + }, + { + "description": "", + "file": "shared/migration/adding-to-monorepo", + "id": "adding-to-monorepo", + "name": "NPM/Yarn/PNPM workspaces", + "path": "/recipes/adopting-nx/adding-to-monorepo" + }, + { + "description": "", + "file": "shared/migration/adding-to-existing-project", + "id": "adding-to-existing-project", + "name": "Add to any Project", + "path": "/recipes/adopting-nx/adding-to-existing-project" + }, + { + "description": "", + "file": "shared/migration/migration-angular", + "id": "angular", + "name": "Migrating from Angular CLI", + "path": "/technologies/angular/migration/angular" + }, + { + "description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.", + "file": "generated/packages/nx/documents/init", + "id": "init", + "name": "init", + "path": "/reference/core-api/nx/documents/init" + } + ], "editor-setup": [ { "description": "Learn about Nx Console, an extension for VS Code and WebStorm. (formerly Editor Setup)", @@ -50,6 +87,15 @@ "path": "/recipes/nx-console/console-migrate-ui" } ], + "ai-integration": [ + { + "description": "Learn about how to integrate Nx with your favorite AI assistant.", + "file": "shared/getting-started/ai-setup", + "id": "ai-integration", + "name": "AI Integration", + "path": "/getting-started/ai-integration" + } + ], "run-tasks": [ { "description": "Learn about the various ways you can use Nx to run tasks in your workspace.", @@ -817,36 +863,6 @@ "path": "/recipes/running-tasks/self-hosted-caching" } ], - "init": [ - { - "description": "", - "file": "shared/migration/adding-to-monorepo", - "id": "adding-to-monorepo", - "name": "NPM/Yarn/PNPM workspaces", - "path": "/recipes/adopting-nx/adding-to-monorepo" - }, - { - "description": "", - "file": "shared/migration/adding-to-existing-project", - "id": "adding-to-existing-project", - "name": "Add to any Project", - "path": "/recipes/adopting-nx/adding-to-existing-project" - }, - { - "description": "", - "file": "shared/migration/migration-angular", - "id": "angular", - "name": "Migrating from Angular CLI", - "path": "/technologies/angular/migration/angular" - }, - { - "description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.", - "file": "generated/packages/nx/documents/init", - "id": "init", - "name": "init", - "path": "/reference/core-api/nx/documents/init" - } - ], "import": [ { "description": "", diff --git a/docs/generated/packages/angular/documents/nx-and-angular.md b/docs/generated/packages/angular/documents/nx-and-angular.md index 540651d984..adf9c00ad7 100644 --- a/docs/generated/packages/angular/documents/nx-and-angular.md +++ b/docs/generated/packages/angular/documents/nx-and-angular.md @@ -10,7 +10,7 @@ src="https://www.youtube.com/embed/bwPkz4MrPDI?si=OLPUENWXLkQ9GRtR" title="Nx vs Angular CLI - The Showdown" width="100%" /%} -Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/why-nx#how-does-nx-work). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project. +Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/intro#start-small-extend-as-you-grow). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project. ## TL;DR: Why should I use Nx for my Angular project? @@ -397,9 +397,9 @@ Learn more about the [graph features here](/features/explore-graph). ### Extensible and Customizable: Make it fit your own needs -Nx is [built to be extensible](/getting-started/why-nx#how-does-nx-work). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors). +Nx is [built to be extensible](/getting-started/intro#start-small-extend-as-you-grow). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors). -And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/getting-started/intro#pick-your-stack). +And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/technologies). ## Migrate from the Angular CLI? diff --git a/docs/map.json b/docs/map.json index c2425ef888..1fbc6a654f 100644 --- a/docs/map.json +++ b/docs/map.json @@ -12,9 +12,10 @@ "name": "Getting Started", "id": "getting-started", "description": "Get started with basic information, concepts and tutorials.", + "file": "shared/getting-started/quick-start", "itemList": [ { - "name": "Intro to Nx", + "name": "Introduction", "id": "intro", "file": "shared/getting-started/intro" }, @@ -24,9 +25,15 @@ "file": "shared/getting-started/installation" }, { - "name": "Why Nx?", - "id": "why-nx", - "file": "shared/getting-started/why-nx" + "name": "Start a new project", + "id": "start-new-project", + "file": "shared/getting-started/start-new-project" + }, + { + "name": "Add to existing project", + "id": "adding-to-existing", + "tags": ["init"], + "file": "shared/getting-started/start-with-existing-project" }, { "name": "Editor Integration", @@ -35,6 +42,13 @@ "tags": ["editor-setup"], "file": "shared/getting-started/editor-setup" }, + { + "name": "AI Integration", + "description": "Learn about how to integrate Nx with your favorite AI assistant.", + "id": "ai-integration", + "tags": ["ai-integration"], + "file": "shared/getting-started/ai-setup" + }, { "name": "Tutorials", "id": "tutorials", @@ -2487,6 +2501,7 @@ "name": "Intro", "id": "intro", "description": "Learn about basic Nx Cloud knowledge.", + "file": "nx-cloud/intro/ci-with-nx", "itemList": [ { "name": "CI with Nx", diff --git a/docs/nx-cloud/intro/ci-with-nx.md b/docs/nx-cloud/intro/ci-with-nx.md index a6c78a5807..122cf536e7 100644 --- a/docs/nx-cloud/intro/ci-with-nx.md +++ b/docs/nx-cloud/intro/ci-with-nx.md @@ -2,13 +2,17 @@ Implementing an efficient CI setup for monorepos - while crucial - can be challenging and maintenance heavy. That is [not your fault, though](/ci/intro/why-nx-cloud). Nx Cloud comes with a series of features that help make CI for monorepos faster, more reliable and more cost-effective. -## Core Features +## How Can Nx Improve Your CI Pipeline? -- Test only the code that might have been [affected](/ci/features/affected) by a PR -- Never run the same task on the same code twice with [remote caching](/ci/features/remote-cache) -- Efficiently [distribute task execution across multiple machines](/ci/features/distribute-task-execution) -- Quickly troubleshoot errors that occur in CI -- Create a simple but powerful pipeline configuration that easily scales with your codebase +The benefits of Nx are not restricted to local development. Nx Cloud helps scale your project on CI by making it simple to create and maintain a pipeline that [eliminates wasted time](/ci/concepts/reduce-waste) and [efficiently parallelizes work](/ci/concepts/parallelization-distribution). + +Your CI pipeline with Nx can: + +- Run only tasks [affected](/ci/features/affected) by that PR +- [Share the task cache](/ci/features/remote-cache) to dramatically speed up your PRs (Nx Replay) +- [Distribute task execution](/ci/features/distribute-task-execution) across multiple agent machines (Nx Agents) +- Automatically [split long e2e tasks](/ci/features/split-e2e-tasks) into smaller tasks (Atomizer) +- Identify and Re-run [Flaky Tasks](/ci/features/flaky-tasks) ## Try Nx Cloud Yourself! diff --git a/docs/shared/getting-started/ai-setup.md b/docs/shared/getting-started/ai-setup.md new file mode 100644 index 0000000000..3e58b2dbaa --- /dev/null +++ b/docs/shared/getting-started/ai-setup.md @@ -0,0 +1,48 @@ +--- +title: Integrate Nx with your Coding Assistant +description: Set up Nx MCP server to give AI assistants deep workspace context, terminal integration, and enhanced development capabilities. +--- + +# Integrate Nx with your Coding Assistant + +Nx provides deep integration with AI coding assistants through the **Nx Model Context Protocol (MCP) server**, giving your AI assistant comprehensive understanding of your monorepo structure, running processes, and development workflows. + +## Setup and Configuration + +### Automatic Setup with Nx Console + +Make sure you have **Nx Console** [installed in your editor](/getting-started/editor-setup), as it automatically exposes the Nx MCP server. Once Nx Console is installed and you open an Nx workspace, you'll receive a notification to **"Improve Copilot/AI agent with Nx-specific context"** - click **"Yes"** to automatically configure it. + +![VS Code showing the Nx MCP installation prompt](/blog/images/articles/copilot-mcp-install.avif) + +If you miss the notification, you can manually run the configuration by opening the command palette (`Ctrl/Cmd + Shift + P`) and running `nx.configureMcpServer`. + +### Manual Setup for Other AI Clients + +For MCP-compatible clients like **Claude Desktop**, **Cursor**, or other AI assistants, add the following configuration: + +```json {% fileName="mcp.json" %} +{ + "servers": { + "nx-mcp": { + "command": "npx", + "args": ["nx-mcp@latest", "/path/to/your/workspace"] + } + } +} +``` + +Replace `/path/to/your/workspace` with your actual workspace path. + +## What This Integration Enables + +The Nx AI integration provides your coding assistant with powerful capabilities: + +- **[Workspace Structure Understanding](/blog/nx-mcp-vscode-copilot)** - Deep architectural awareness of your monorepo, project relationships, and dependencies +- **[Real-time Terminal Integration](/blog/nx-terminal-integration-ai)** - AI can read your terminal output, running processes, and error messages without copy-pasting +- **[CI Pipeline Context](/blog/nx-editor-ci-llm-integration)** - Access to build failures, test results, and deployment status from your CI/CD processes +- **[Enhanced Code Generation](/blog/nx-generators-ai-integration)** - AI-powered generator suggestions and custom scaffolding with intelligent defaults +- **Cross-project Impact Analysis** - Understanding the implications of changes across your entire monorepo +- **Autonomous Error Debugging** - AI independently accesses context to help fix development issues + +Learn more about [why Nx and AI work so well together](/blog/nx-and-ai-why-they-work-together). diff --git a/docs/shared/getting-started/editor-setup.md b/docs/shared/getting-started/editor-setup.md index 58d55e2ab9..3c1d64ad18 100644 --- a/docs/shared/getting-started/editor-setup.md +++ b/docs/shared/getting-started/editor-setup.md @@ -1,11 +1,11 @@ --- title: Editor Integration -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. +description: Set up Nx Console in VSCode or JetBrains for visual UI, task management, code generation, and enhanced AI assistance in your Nx workspace. --- # Editor Integration -Nx Console editor extensions make your developer experience richer. The extensions +Nx Console editor extensions make your developer experience richer. The extensions: - [enhance AI integrations](/features/enhance-AI) by providing workspace-level context and up-to-date docs - show [inferred tasks](/concepts/inferred-tasks) and help you invoke them via the Project Details View diff --git a/docs/shared/getting-started/installation.md b/docs/shared/getting-started/installation.md index 4c13272ded..0b1de1bae4 100644 --- a/docs/shared/getting-started/installation.md +++ b/docs/shared/getting-started/installation.md @@ -1,6 +1,6 @@ --- 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. +description: Install Nx globally via npm, Homebrew, Chocolatey, or apt. Add Nx to existing repos with nx init and keep dependencies updated automatically. --- # Installation @@ -42,9 +42,9 @@ sudo apt install nx {% /tab %} {% /tabs %} -## Adding Nx Into Your Repository +## Adding Nx to Your Repository -To add Nx to an existing repository run: +To add Nx to an existing repository, run: ```shell nx init @@ -80,7 +80,7 @@ To avoid potential issues, it is [recommended to update one major version of Nx ## Tutorials -Try one of these tutorials for a full walkthrough of what to do after you install Nx +Try one of these tutorials for a full walkthrough of what to do after you install Nx: - [TypeScript Monorepo Tutorial](/getting-started/tutorials/typescript-packages-tutorial) - [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial) diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md index e7fba8bfbd..f8fe9168e6 100644 --- a/docs/shared/getting-started/intro.md +++ b/docs/shared/getting-started/intro.md @@ -1,118 +1,81 @@ --- 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. +description: 'Nx is an AI-first build platform that connects everything from your editor to CI Helping you deliver fast, without breaking things.' --- -# Intro to Nx +# What is 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. +Nx is a powerful, open source, technology-agnostic build platform designed to efficiently manage codebases of any scale. From small single projects to large enterprise monorepos, Nx is designed to **streamline your development workflows**, **minimize errors** and **dramatically reduce waste** by [saving engineering time](https://youtu.be/2BLqiNnBPuU) and cutting compute costs. -{% github-repository title="Star Nx on GitHub" url="https://github.com/nrwl/nx" /%} +{% youtube +src="https://www.youtube.com/embed/-_4WMl-Fn0w" +title="What is Nx?" +width="100%" /%} -## Core Features +As teams and codebases grow, productivity bottlenecks multiply: build times increase, CI becomes flaky, and code sharing becomes complex. **Nx reduces friction across your entire development cycle.** -- **Run Tasks Efficiently**: Nx [runs tasks in parallel](/features/run-tasks) and orders the tasks based on the dependencies between them. -- **Distribute Tasks in CI**: Nx scales your CI by [distributing tasks](/ci/features/distribute-task-execution) across many VMs. Your CI is fast no matter how big your repository is. -- **Cache Locally & Remotely**: With [local](/features/cache-task-results) and [remote caching](/ci/features/remote-cache), Nx prevents unnecessary re-runs of tasks, saving you valuable dev time. -- **Split E2E Tests and Rerun Flaky Tests**: Nx [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across VMs. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks). -- **Automate Dependency Updates**: if you leverage [Nx plugins](/concepts/nx-plugins) you gain additional features such as [code generation](/features/generate-code) and tools to [automatically upgrade](features/automate-updating-dependencies) your codebase and dependencies. -- **Make it Your Own**: Nx is highly customizable and extensible. Fine-tune it by [creating a plugin for your organization](/extending-nx/tutorials/organization-specific-plugin) or [creating a tooling plugin](/extending-nx/tutorials/tooling-plugin). +## Start small, extend as you grow - +Nx is built in a modular fashion, allowing you to adopt as little or as much as you'd like at any moment in your development lifecycle. You can **start with just the core and add additional capabilities incrementally** as your needs grow and complexity increases. -Find out more about [why you should use Nx](/getting-started/why-nx) or browse our [features](/features). +At the **foundation is Nx Core**, a Rust-based, technology-agnostic task runner. Nx Core creates a knowledge graph of your workspace, understanding project relationships and dependencies. This enables highly optimized and fast task execution regardless of technology stack. It runs `package.json` scripts in [TypeScript monorepos](/technologies/typescript/introduction) or Gradle tasks in [Java projects](/technologies/java/introduction) or [can be extended](/extending-nx/intro/getting-started) to meet your projects specific needs -## Try Nx Yourself! +{% callout type="deepdive" title="What do you mean by 'running NPM scripts'?" %} -{% side-by-side %} +At the very core, Nx is a super fast, intelligent task runner. Let's take the example of an NPM workspace. This could be a project's `package.json`: -```shell {% title="Create a new workspace" %} -npx create-nx-workspace +```json +{ + "name": "my-project", + "scripts": { + "build": "tsc", + "test": "jest" + } +} ``` -```shell {% title="Add Nx to an existing workspace" %} -npx nx init +Then you can simply add Nx to your root `package.json`: + +```json +{ + "devDependencies": { + "nx": "latest" + } +} ``` -{% /side-by-side %} +And once that's done, you can run your tasks via Nx. -Also, here are some recipes that give you more details based on the technology stack you're using: +```shell +nx build my-project +``` -{% cards cols="2" mdCols="4" smCols="2" moreLink="/recipes/adopting-nx" %} +This will execute the `build` script from `my-project`'s `package.json`, equivalent to running `npm run build` in that project directory. -{% link-card title="Add to Existing Monorepo" appearance="small" url="/recipes/adopting-nx/adding-to-monorepo" icon="pnpm" /%} +Similarly you [can run tasks across all projects](/features/run-tasks), just specific ones or just those from projects you touched. -{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%} +From there, you can gradually enhance your setup by adding features like [task caching](/features/cache-task-results), adding [plugins](/technologies), optimizing your CI via [task distribution](/ci/features/distribute-task-execution), and many more powerful capabilities as your needs grow. -{% link-card title="Migrate from Angular CLI" appearance="small" url="technologies/angular/migration/angular" icon="angular" /%} +{% /callout %} -{% link-card title="Import Projects into Your Nx Workspace" appearance="small" url="/recipes/adopting-nx/import-project" icon="ArrowDownOnSquareStackIcon" /%} +Nx Core works great alone, but you can incrementally add capabilities as needed. Speed up your CI with [**Nx Cloud**](/ci) through remote caching and distributed task execution. Add [**Nx Console**](/getting-started/editor-setup) integrating Nx with your editor, giving you powerful autocomplete support, project graph visualization, CI run notifications and an MCP to [make your AI coding assistant smarter](/features/enhance-AI). Add [**Nx Plugins**](/technologies) for technology-specific automation and DX improvements and build custom capabilities using [Nx Devkit](/extending-nx/intro/getting-started). + +## Where to go from here? + +{% cards %} + +{% card title="Get set up and ready with Nx" description="Dive right in with our getting started steps to install Nx, set up your editor, and create your first project" type="documentation" url="/getting-started" icon="RocketLaunchIcon" /%} + +{% card title="Step by step with our tutorials" description="Learn more about Nx through hands-on tutorials for different technology stacks" type="documentation" url="/getting-started/tutorials" icon="AcademicCapIcon" /%} + +{% card title="Learn with our video courses" description="Dive deeper with comprehensive video courses that walk you through Nx concepts" type="documentation" url="/courses" icon="PlayCircleIcon" /%} + +{% card title="Dive deep into Nx features" description="Discover all the powerful features that Nx provides to streamline your workflow" type="documentation" url="/features" icon="SparklesIcon" /%} + +{% card title="Understand underlying concepts" description="Improve your understanding of the core concepts of how Nx works under the hood" type="documentation" url="/concepts" icon="LightBulbIcon" /%} + +{% card title="Explore Technologies" description="Explore Nx's technology integrations and how it can support your specific stack" type="documentation" url="/technologies" icon="CodeBracketIcon" /%} {% /cards %} -## Learn Nx - -{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %} - -{% link-card title="Nx in 10 minutes!" type="video" url="https://youtu.be/-_4WMl-Fn0w" icon="nx" /%} - -{% link-card title="What is Nx Cloud?" type="video" url="https://youtu.be/4VI-q943J3o" icon="nxcloud" /%} - -{% link-card title="PNPM Workspaces to Distributed CI" type="course" url="/courses/pnpm-nx-next" icon="pnpm" /%} - -{% link-card title="More On Youtube" type="video" url="https://www.youtube.com/@nxdevtools" icon="youtube" /%} - -{% /cards %} - -{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %} - -{% link-card title="TypeScript Monorepo" type="tutorial" url="/getting-started/tutorials/typescript-packages-tutorial" icon="jsMono" /%} - -{% link-card title="React Monorepo" type="tutorial" url="/getting-started/tutorials/react-monorepo-tutorial" icon="reactMono" /%} - -{% link-card title="Angular Monorepo" type="tutorial" url="/getting-started/tutorials/angular-monorepo-tutorial" icon="angularMono" /%} - -{% link-card title="Gradle Monorepo" type="tutorial" url="/getting-started/tutorials/gradle-tutorial" icon="gradle" /%} - -{% /cards %} - -## Pick Your Stack! - -{% cards cols="3" lgCols="8" mdCols="6" smCols="5" moreLink="/showcase/example-repos" %} - -{% link-card title="Express" appearance="small" url="/technologies/node/express" icon="express" /%} -{% link-card title="Vue" appearance="small" url="/technologies/vue/introduction" icon="vue" /%} -{% link-card title="Next" appearance="small" url="/technologies/react/next" icon="nextjs" /%} -{% link-card title="Nuxt" appearance="small" url="/technologies/vue/nuxt/introduction" icon="nuxt" /%} -{% link-card title="Nest" appearance="small" url="/technologies/node/nest" icon="nestjs" /%} -{% link-card title="Remix" appearance="small" url="/technologies/react/remix" icon="remix" /%} -{% link-card title="Expo" appearance="small" url="/technologies/react/expo" icon="expo" /%} -{% link-card title="React Native" appearance="small" url="/technologies/react/react-native" icon="react" /%} -{% link-card title="Fastify" appearance="small" url="/showcase/example-repos/mongo-fastify" icon="fastify" /%} -{% link-card title="Svelte" appearance="small" url="/showcase/example-repos/add-svelte" icon="svelte" /%} -{% link-card title="Solid" appearance="small" url="/showcase/example-repos/add-solid" icon="solid" /%} -{% link-card title="Lit" appearance="small" url="/showcase/example-repos/add-lit" icon="lit" /%} -{% link-card title="Astro" appearance="small" url="/showcase/example-repos/add-astro" icon="astro" /%} -{% link-card title="Qwik" appearance="small" url="/showcase/example-repos/add-qwik" icon="qwik" /%} - -{% link-card title="Rust" appearance="small" url="/showcase/example-repos/add-rust" icon="rust" /%} -{% link-card title="Go" appearance="small" url="https://github.com/nrwl/nx-recipes/blob/main/go/README.md" icon="go" /%} -{% link-card title=".NET" appearance="small" url="https://github.com/nrwl/nx-recipes/tree/main/dot-net-standalone" icon="dotnet" /%} -{% link-card title="Cypress" appearance="small" url="/technologies/test-tools/cypress/introduction" icon="cypress" /%} -{% link-card title="Playwright" appearance="small" url="/technologies/test-tools/playwright/introduction" icon="playwright" /%} -{% link-card title="Vite" appearance="small" url="/technologies/build-tools/vite" icon="vite" /%} -{% link-card title="Storybook" appearance="small" url="/technologies/test-tools/storybook" icon="storybook" /%} -{% link-card title="Jest" appearance="small" url="/technologies/test-tools/jest/introduction" icon="jest" /%} -{% link-card title="Rspack" appearance="small" url="/technologies/build-tools/rspack/introduction" icon="rspack" /%} - -{% /cards %} - -## Connect With Us - -Connect on our channels and with the Nx Community to ask questions, get help and keep up to date with the latest news. - -- ⭐️ [Star us on GitHub](https://github.com/nrwl/nx) to show your support and stay updated on new releases! -- Join our [Discord Community](https://go.nx.dev/community) -- Subscribe to our [Youtube Channel](https://www.youtube.com/@nxdevtools) -- Follow us on [Twitter](https://twitter.com/nxdevtools) -- Subscribe [to our tech newsletter](https://go.nrwl.io/nx-newsletter) +**Stay up to date** with our latest news by [⭐️ starring us on Github](https://github.com/nrwl/nx), [subscribing to our Youtube channel](https://www.youtube.com/@nxdevtools), [joining our Discord](https://go.nx.dev/community), [subscribe to our monthly tech newsletter](https://go.nrwl.io/nx-newsletter) or follow us [on X](https://x.com/nxdevtools), [Bluesky](https://bsky.app/profile/nx.dev) and [LinkedIn](https://www.linkedin.com/company/nxdevtools). diff --git a/docs/shared/getting-started/quick-start.md b/docs/shared/getting-started/quick-start.md new file mode 100644 index 0000000000..d5259da8d7 --- /dev/null +++ b/docs/shared/getting-started/quick-start.md @@ -0,0 +1,104 @@ +--- +title: Quickstart with Nx +description: Get up and running with Nx in minutes - install Nx, set up your editor, configure AI assistance, and choose your development path. +--- + +# Getting Started + +Get up and running with Nx in just a few minutes by following these simple steps. + +{% steps %} + +{% step title="Install Nx" %} + +To install Nx on your machine, choose one of the following methods based on your operating system and package manager. You can also use `npx` to run Nx without installing it globally. + +{% tabs %} +{% tab label="npm" %} + +```shell +npm add --global nx +``` + +**Note:** You can also use Yarn, pnpm, or Bun + +{% /tab %} +{% tab label="Homebrew (macOS, Linux)" %} + +```shell +brew install nx +``` + +{% /tab %} +{% tab label="Chocolatey (Windows)" %} + +```shell +choco install nx +``` + +{% /tab %} +{% tab label="apt (Ubuntu)" %} + +```shell +sudo add-apt-repository ppa:nrwl/nx +sudo apt update +sudo apt install nx +``` + +{% /tab %} +{% /tabs %} + +{% /step %} + +{% step title="Set Up Your Editor" %} + +Nx Console is an editor extension that integrates Nx seamlessly into your development workflow with project details views, visual migration UI, command palette integration, and CI pipeline notifications. + +{% install-nx-console /%} + +{% /step %} + +{% step title="Configure Your AI Assistant" %} + +Nx Console automatically configures and exposes the Nx MCP server. You'll receive a notification to "Improve Copilot/AI agent with Nx-specific context" - click "Yes" to automatically configure it. + +![VS Code showing the Nx MCP installation prompt](/blog/images/articles/copilot-mcp-install.avif) + +If you miss the notification, run `nx.configureMcpServer` from the command palette (`Ctrl/Cmd + Shift + P`). + +For other MCP-compatible clients like Claude Desktop: + +```json {% fileName="mcp.json" %} +{ + "servers": { + "nx-mcp": { + "command": "npx", + "args": ["nx-mcp@latest", "/path/to/your/workspace"] + } + } +} +``` + +Replace `/path/to/your/workspace` with your workspace path. Learn more about how Nx improves [your AI assistant](/features/enhance-AI). + +{% /step %} + +{% step title="Choose Your Path" %} + +Now that you have Nx installed and your development environment configured, choose how you want to proceed: + +{% cards %} + +{% card title="Create a New Project" description="Start fresh with a new Nx workspace using your preferred technology stack" type="documentation" url="/getting-started/start-new-project" /%} + +{% card title="Add to Existing Project" description="Integrate Nx into your existing repository to leverage caching and speed up CI" type="documentation" url="/getting-started/adding-to-existing" /%} + +{% card title="Follow a Tutorial" description="Learn Nx through hands-on tutorials for different technology stacks" type="documentation" url="/getting-started/tutorials" /%} + +{% card title="Explore Nx Features" description="Discover all the powerful features that Nx offers" type="documentation" url="/features" /%} + +{% /cards %} + +{% /step %} + +{% /steps %} diff --git a/docs/shared/getting-started/start-new-project.md b/docs/shared/getting-started/start-new-project.md new file mode 100644 index 0000000000..345c66fa87 --- /dev/null +++ b/docs/shared/getting-started/start-new-project.md @@ -0,0 +1,89 @@ +--- +title: Start a new project with Nx +description: Create a new Nx workspace manually with your favorite CLI or use the guided setup with presets for various technology stacks and configurations. +--- + +# Start a new project with Nx + +When you start a new project with Nx, you have two options. + +## Option 1: Manual setup + +In a nutshell, this means using your favorite CLI to create your initial project setup and then adding Nx to it. + +Let's take the example of an NPM workspace. Create a new root-level `package.json` like: + +```json +{ + "name": "my-workspace", + "version": "1.0.0", + "private": true, + "workspaces": ["packages/*", "apps/*"] +} +``` + +Then you can add Nx to it by using: + +```shell +nx init +``` + +_(Note, make sure you have [Nx installed globally](/getting-started/installation) or use `npx` if you're in a JavaScript environment)_ + +Nx will detect the underlying workspace configuration, ask you a couple of questions and install itself into the workspace. As you keep going, you can incrementally add functionality, like: + +- [configure caching](/features/cache-task-results) +- [adding Nx plugins to help refine your workflows](/plugin-registry) +- [optimizing your CI](/ci/intro/ci-with-nx) + +## Option 2: Guided setup (JavaScript only) + +Alternatively, you can choose a more guided approach by leveraging some of the presets Nx comes with. + +Run the following command to get started: + +```shell +npx create-nx-workspace@latest +``` + +This interactive command will guide you through the setup process, allowing you to: + +- **Choose your workspace name** - This will be the name of your root directory +- **Select your preferred package manager** - npm, yarn, or pnpm +- **Pick a preset** - Choose from various technology stacks and configurations +- **Configure additional options** - Such as styling solutions, testing frameworks, and more + +Choose a preset that matches your technology stack. This gives you a fully configured workspace. + +You can also choose **an empty workspace preset** which sets up the bare minimum configuration including Nx itself. This allows you to add technologies and features incrementally over time as you need them. + + diff --git a/docs/shared/getting-started/start-with-existing-project.md b/docs/shared/getting-started/start-with-existing-project.md new file mode 100644 index 0000000000..469af79a24 --- /dev/null +++ b/docs/shared/getting-started/start-with-existing-project.md @@ -0,0 +1,34 @@ +--- +title: Start with an existing project +description: Add Nx to any existing project with a single command. Start with Nx Core and gradually adopt plugins, CI integrations, and other capabilities. +--- + +# Add Nx to an existing project + +In many situations, you have an existing codebase and want to improve it with Nx using an **incremental adoption approach**. + +Thanks to [Nx's modular architecture](/getting-started/intro), you can start with just **Nx Core** and then gradually add [technology-specific plugins](/technologies), [CI integrations](/ci), or other capabilities as your requirements evolve. + +Getting started is remarkably simple. You can add Nx to any existing project with a single command: + +```shell +nx init +``` + +_(Note, make sure you have [Nx installed globally](/getting-started/installation) or use `npx` if you're in a JavaScript environment)_ + +This command automatically detects your underlying workspace structure, whether it's a monorepo, a single project, or something in between. Nx will then ask you a series of targeted questions about your setup and preferences, using your answers to auto-configure itself seamlessly into your existing workspace. This intelligent setup process ensures you get the benefits of Nx with minimal configuration changes or disruption to your current development workflow. + +Here are some guides that give you more details based on the technology stack you're using: + +{% cards cols="2" mdCols="4" smCols="2" moreLink="/recipes/adopting-nx" %} + +{% link-card title="Add to Existing Monorepo" appearance="small" url="/recipes/adopting-nx/adding-to-monorepo" icon="pnpm" /%} + +{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%} + +{% link-card title="Migrate from Angular CLI" appearance="small" url="technologies/angular/migration/angular" icon="angular" /%} + +{% link-card title="Import Projects into Your Nx Workspace" appearance="small" url="/recipes/adopting-nx/import-project" icon="ArrowDownOnSquareStackIcon" /%} + +{% /cards %} diff --git a/docs/shared/getting-started/why-nx.md b/docs/shared/getting-started/why-nx.md deleted file mode 100644 index 986fbce8cb..0000000000 --- a/docs/shared/getting-started/why-nx.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -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 -src="https://www.youtube.com/embed/-_4WMl-Fn0w" -title="What is Nx?" -width="100%" /%} - -We created Nx because developers struggle to configure, maintain and especially integrate various tools and frameworks. Setting up a system that works well for a handful of developers and at the same time, easily scales up to an entire organization is hard. This includes setting up low-level build tooling, configuring fast CI, and keeping your codebase healthy, up-to-date, and maintainable. - -We wanted to provide a solution that is easy to adopt and scale. - -## How Does Nx Help You? - -In a nutshell, Nx helps to: **speed up your computation** (e.g. builds, tests etc), locally and on CI and to **integrate and automate your tooling** via its plugins. All of this can be adopted incrementally. You can use plugins, but you don't have to. Look at the Nx architecture in the next section to learn more. - -You can use Nx to - -- speed up your existing project's builds and tests, locally and on CI (whether that's a monorepo or standalone application) -- quickly scaffold a new project (using Nx plugins) without having to configure any lower-level build tools -- easily integrate new tooling (e.g., Storybook, Tailwind etc), into your project. -- ensure consistency and code quality with custom generators and lint rules -- update your frameworks and tools and keep your workspace evergreen using the automated code migration feature - -## How Does Nx Work? - -Nx is built in a modular fashion to let you only use the features you need. - -![High-level Nx architecture](/shared/images/nx-architecture.svg) - -- The **Nx** package provides fundamental technology-agnostic capabilities such as: [workspace analysis](/features/explore-graph), [task running](/features/run-tasks), [caching](/features/cache-task-results), [distribution](/ci/features/distribute-task-execution), [code generation](/features/generate-code) and [automated code migrations](/features/automate-updating-dependencies). -- **Plugins** are NPM packages that build on top of the fundamental capabilities provided by the Nx package. Nx plugins contain [code generators](/features/generate-code), [executors](/concepts/executors-and-configurations) (to abstract lower-level build tooling) and automated code migrations for keeping your tools up to date. Contrary to the Nx package, which works the same way with any JS or non-JS project, plugins are usually technology specific. For instance, `@nx/react` adds support for building React apps and libs, `@nx/cypress` adds e2e testing capabilities with Cypress. Plugins make developers more productive by removing any friction of integrating different tools with each other and by providing utilities to keep them up to date. The Nx team maintains plugins for React, Next, Remix, Angular, Jest, Cypress, Storybook and more. You can use the `@nx/plugin` package to easily [scaffold a new plugin](/extending-nx/intro/getting-started) or even just [automate your local workspace](/extending-nx/recipes/local-generators). There are also more than 80 [community plugins](/plugin-registry). -- **Devkit** is a set of utilities for [building Nx plugins](/extending-nx/intro/getting-started). -- **Nx Console** is an extension for **VSCode, IntelliJ and VIM**. It provides code autocompletion, interactive generators, workspace visualizations, powerful refactorings and more. You can [install it here](/getting-started/editor-setup). - -## How Can Nx Improve Your CI Pipeline? - -The benefits of Nx are not restricted to local development. [Nx Cloud](https://nx.app) helps scale your project on CI by making it simple to create and maintain a pipeline that [eliminates wasted time](/ci/concepts/reduce-waste) and [efficiently parallelizes work](/ci/concepts/parallelization-distribution). Your CI pipeline with Nx can: - -- Run only tasks [affected](/ci/features/affected) by that PR -- [Share the task cache](/ci/features/remote-cache) between CI and local development machines (Nx Replay) -- [Distribute task execution](/ci/features/distribute-task-execution) across multiple agent machines (Nx Agents) -- Automatically [split long e2e tasks](/ci/features/split-e2e-tasks) into smaller tasks (Atomizer) -- Identify and Re-run [Flaky Tasks](/ci/features/flaky-tasks) - -Nx Cloud also provides direct integration with GitHub, GitLab, Bitbucket and Azure version control systems. Learn more at [nx.app](https://nx.app). - -## How Can I Adopt Nx in My Existing Project? - -As shown in the section before, there's a core [nx package](https://www.npmjs.com/package/nx) that can be dropped into an existing project (regardless of whether it is a monorepo or single-project workspace). We made a command to help you with that: - -```shell -npx nx@latest init -``` - -By adding the `nx` package you can use [Nx commands](/features/run-tasks) to run your `package.json` scripts and benefit from running tasks in parallel as well as [caching](/features/cache-task-results). Over time you can then also add in Nx Plugins to further enhance your experience when working with specific tech stacks. - -Check out our [migration guides](/recipes/adopting-nx) for all the details. diff --git a/docs/shared/guides/nx-and-angular-cli.md b/docs/shared/guides/nx-and-angular-cli.md index 540651d984..adf9c00ad7 100644 --- a/docs/shared/guides/nx-and-angular-cli.md +++ b/docs/shared/guides/nx-and-angular-cli.md @@ -10,7 +10,7 @@ src="https://www.youtube.com/embed/bwPkz4MrPDI?si=OLPUENWXLkQ9GRtR" title="Nx vs Angular CLI - The Showdown" width="100%" /%} -Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/why-nx#how-does-nx-work). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project. +Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/intro#start-small-extend-as-you-grow). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project. ## TL;DR: Why should I use Nx for my Angular project? @@ -397,9 +397,9 @@ Learn more about the [graph features here](/features/explore-graph). ### Extensible and Customizable: Make it fit your own needs -Nx is [built to be extensible](/getting-started/why-nx#how-does-nx-work). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors). +Nx is [built to be extensible](/getting-started/intro#start-small-extend-as-you-grow). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors). -And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/getting-started/intro#pick-your-stack). +And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/technologies). ## Migrate from the Angular CLI? diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index 701e38f9cf..4896f6a98c 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -1,10 +1,12 @@ - Nx - [Getting Started](/getting-started) - - [Intro to Nx](/getting-started/intro) + - [Introduction](/getting-started/intro) - [Installation](/getting-started/installation) - - [Why Nx?](/getting-started/why-nx) + - [Start a new project](/getting-started/start-new-project) + - [Add to existing project](/getting-started/adding-to-existing) - [Editor Integration](/getting-started/editor-setup) + - [AI Integration](/getting-started/ai-integration) - [Tutorials](/getting-started/tutorials) - [TypeScript Monorepo](/getting-started/tutorials/typescript-packages-tutorial) - [React Monorepo](/getting-started/tutorials/react-monorepo-tutorial) diff --git a/docs/shared/tutorials/angular-monorepo.md b/docs/shared/tutorials/angular-monorepo.md index 642a5d145a..2bcd7d5177 100644 --- a/docs/shared/tutorials/angular-monorepo.md +++ b/docs/shared/tutorials/angular-monorepo.md @@ -17,7 +17,7 @@ What will you learn? ## Nx CLI vs. Angular CLI -Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/why-nx#how-does-nx-work). As a result, adopting Nx as an Angular user is relatively straightforward. Your existing code, including builders and schematics, will still work as before, but you'll also have access to all the benefits Nx offers. +Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/intro#start-small-extend-as-you-grow). As a result, adopting Nx as an Angular user is relatively straightforward. Your existing code, including builders and schematics, will still work as before, but you'll also have access to all the benefits Nx offers. Advantages of Nx over the Angular CLI: diff --git a/docs/shared/tutorials/react-monorepo.md b/docs/shared/tutorials/react-monorepo.md index d8e768b4c9..14cf5a303d 100644 --- a/docs/shared/tutorials/react-monorepo.md +++ b/docs/shared/tutorials/react-monorepo.md @@ -31,8 +31,6 @@ Features we'll use in this monorepo: - [Scaffold new code with generators](/features/generate-code) - [Updates dependencies with automated migrations](/features/automate-updating-dependencies) -Visit our ["Why Nx" page](/getting-started/why-nx) for more details. - ## Final Code Here's the source code of the final result for this tutorial. diff --git a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx index fd5532f1a9..f5016b113d 100644 --- a/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx +++ b/nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx @@ -25,7 +25,7 @@ export function DocViewer({ }): JSX.Element { const router = useRouter(); const hideTableOfContent = - router.asPath.includes('/getting-started/intro') || + router.asPath.endsWith('/getting-started') || router.asPath.includes('/ci/intro/ci-with-nx') || router.asPath.includes('/extending-nx/intro/getting-started') || router.asPath.includes('/nx-api/devkit') || diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index 743b86d62f..619385cd63 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -1033,13 +1033,6 @@ const coreFeatureAndConceptsRefactoring = { '/recipes/running-tasks/configure-inputs', }; -/* - * For AI Chat to make sure old URLs are not broken (added 2023-09-14) - */ -const aiChat = { - // '/ai': '/ai-chat', -}; - // rename nx/linter to eslint const eslintRename = { '/nx-api/linter': '/nx-api/eslint', @@ -1473,6 +1466,10 @@ const nxModuleFederationConceptsRedirects = { '/technologies/module-federation/concepts/:slug*', }; +const gettingStartedRedirects = { + '/getting-started/why-nx': '/getting-started/intro', +}; + /** * Public export API */ @@ -1498,7 +1495,6 @@ module.exports = { pluginsToExtendNx, latestRecipesRefactoring, coreFeatureRefactoring: coreFeatureAndConceptsRefactoring, - aiChat, eslintRename, removedDeprecatedUrls, troubleshootingOutOfRecipes, @@ -1513,4 +1509,5 @@ module.exports = { nxApiRedirects, nxRecipesRedirects, nxModuleFederationConceptsRedirects, + gettingStartedRedirects, }; diff --git a/nx-dev/ui-common/src/lib/footer.tsx b/nx-dev/ui-common/src/lib/footer.tsx index c54238437b..95a205115b 100644 --- a/nx-dev/ui-common/src/lib/footer.tsx +++ b/nx-dev/ui-common/src/lib/footer.tsx @@ -113,6 +113,23 @@ const navigation = { ), }, + { + name: 'LinkedIn', + label: 'Nx on LinkedIn', + href: 'https://www.linkedin.com/company/nxdevtools', + icon: (props: any) => ( + + {/*LinkedIn*/} + + + ), + }, { name: 'Newsletter', label: 'The Newsletter', diff --git a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx index 1fbab8f835..18501b6fdb 100644 --- a/nx-dev/ui-common/src/lib/headers/documentation-header.tsx +++ b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx @@ -160,6 +160,23 @@ export function DocumentationHeader({ ), }, + { + name: 'LinkedIn', + label: 'Nx on LinkedIn', + href: 'https://www.linkedin.com/company/nxdevtools', + icon: (props: any) => ( + + {/*LinkedIn*/} + + + ), + }, { name: 'GitHub', label: 'Nx is open source, check the code on GitHub', diff --git a/nx-dev/ui-community/src/lib/connect-with-us.tsx b/nx-dev/ui-community/src/lib/connect-with-us.tsx index 0a7b12ec4c..6703f098e4 100644 --- a/nx-dev/ui-community/src/lib/connect-with-us.tsx +++ b/nx-dev/ui-community/src/lib/connect-with-us.tsx @@ -90,6 +90,28 @@ export function ConnectWithUs(): JSX.Element {

+
+
+
+
+ +
+

Nx monthly newsletter

+ + +

+ Subscribe and receive news about Nx releases, posts about new + Nx features, details about new plugins, links to community + resources, and additional Nx content. +

+ +
@@ -154,25 +176,34 @@ export function ConnectWithUs(): JSX.Element {
-
+
-
-
- + diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts index a2546e41d9..a2a21c81ba 100644 --- a/nx-dev/ui-markdoc/src/index.ts +++ b/nx-dev/ui-markdoc/src/index.ts @@ -37,6 +37,8 @@ import { SideBySide } from './lib/tags/side-by-side.component'; import { sideBySide } from './lib/tags/side-by-side.schema'; import { Tab, Tabs } from './lib/tags/tabs.component'; import { tab, tabs } from './lib/tags/tabs.schema'; +import { Step, Steps } from './lib/tags/steps.component'; +import { step, steps } from './lib/tags/steps.schema'; import { Tweet, tweet } from '@nx/nx-dev/ui-common'; import { YouTube, youtube } from '@nx/nx-dev/ui-common'; import { CourseVideo } from '@nx/nx-dev/ui-common'; @@ -87,6 +89,8 @@ export const getMarkdocCustomConfig = ( 'short-embeds': shortEmbeds, 'short-video': shortVideo, 'side-by-side': sideBySide, + step, + steps, tab, tabs, testimonial, @@ -120,6 +124,8 @@ export const getMarkdocCustomConfig = ( ShortEmbeds, ShortVideo, SideBySide, + Step, + Steps, Tab, Tabs, TableOfContents, diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx index f8ac2463c1..52be6accb6 100644 --- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx +++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx @@ -217,13 +217,15 @@ export function Card({
)}
- +

{!hasYoutubeId ? iconMap[type] : null} {title} - +

{description ? ( -

{description}

+

+ {description} +

) : null} {/*HOVER ICON*/} diff --git a/nx-dev/ui-markdoc/src/lib/tags/steps.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/steps.component.tsx new file mode 100644 index 0000000000..d6b935dc27 --- /dev/null +++ b/nx-dev/ui-markdoc/src/lib/tags/steps.component.tsx @@ -0,0 +1,60 @@ +'use client'; +import cx from 'classnames'; +import React, { ReactNode } from 'react'; + +export function Steps({ children }: { children: ReactNode }) { + const steps = React.Children.toArray(children); + const stepsCount = steps.length; + + return ( +
+ {steps.map((step, index) => ( +
+ {/* Vertical line connecting steps */} + {index < stepsCount - 1 && ( + + ))} +
+ ); +} + +export function Step({ + title, + children, +}: { + title?: string; + children: ReactNode; +}) { + const passPropsToChildren = (children: ReactNode) => { + return React.Children.map(children, (child) => { + if (React.isValidElement(child) && typeof child.type !== 'string') { + return React.cloneElement(child, { isWithinStep: true }); + } + return child; + }); + }; + + return ( +
+ {title && ( +

+ {title} +

+ )} + {passPropsToChildren(children)} +
+ ); +} diff --git a/nx-dev/ui-markdoc/src/lib/tags/steps.schema.ts b/nx-dev/ui-markdoc/src/lib/tags/steps.schema.ts new file mode 100644 index 0000000000..566fedc909 --- /dev/null +++ b/nx-dev/ui-markdoc/src/lib/tags/steps.schema.ts @@ -0,0 +1,21 @@ +import { Schema } from '@markdoc/markdoc'; +import markdoc from '@markdoc/markdoc'; +const { Tag } = markdoc; + +export const steps: Schema = { + render: 'Steps', + attributes: {}, + transform(node, config) { + return new Tag(this.render, {}, node.transformChildren(config)); + }, +}; + +export const step: Schema = { + render: 'Step', + attributes: { + title: { + type: 'String', + required: false, + }, + }, +};