diff --git a/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md b/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md index 23ccd61e4b..6ea98d007a 100644 --- a/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md +++ b/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md @@ -129,7 +129,7 @@ Many of these generators come with a rich set of flags. For example, passing `-- **How do we find all these generators though?** There are different options: -- **Nx documentation** — use the search function there or just navigate the docs. All the reference pages are structured like `nx.dev/packages/`. As an example for React that would look like: [/nx-api/react](/technologies/react/api). +- **Nx documentation** — use the search function there or just navigate the docs. All the reference pages are structured like `nx.dev/packages/`. As an example for React that would look like: [/technologies/react/api](/technologies/react/api). - `npx nx list` - lists a set of installed plugins as well as other available plugins that can be installed. To get a list of generators for a specific plugin - say for the `@nrwl/react` plugin - run `npx nx list @nrwl/react`. Similarly, you can then run `npx nx g @nrwl/react:lib --help` to get help for a particular generator However, the absolute easiest way to explore the potential and even use Nx if you are not the "terminal type of person" is [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)! I'll go a bit deeper into that in a later section. diff --git a/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md b/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md index 8f33e3ff13..b2560793ca 100644 --- a/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md +++ b/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md @@ -36,7 +36,7 @@ Nx can be used in a wide range of scenarios, from small open source projects, st - `@nrwl/*` plugins which are those actively maintained by the Nx core team - [Community plugins](/community) -This illustration should give you a rough idea. obviously some of the plugins may be built on top of others, leveraging common functionality. An example is the [@nrwl/js](/technologies/typescript/api) plugin which not only can be used as a standalone plugin but also builds the basis for of many others by providing core JavaScript/TypeScript features. +This illustration should give you a rough idea. obviously some of the plugins may be built on top of others, leveraging common functionality. An example is the [@nrwl/js](/technologies/typescript/introduction) plugin which not only can be used as a standalone plugin but also builds the basis for of many others by providing core JavaScript/TypeScript features. ![](/blog/images/2022-04-08/iMPg692nMj5ty709M7tTQQ.avif) @@ -242,7 +242,7 @@ Learn more in this short video walkthrough: ## Our docs keep getting more and more awesome -Besides delivering awesome features, we keep improving our docs. They are essential to help discover new features and better understand existing ones. In the last weeks we've improved the navigation support, allowing you to navigate to a specific package with `/packages/` such as [/nx-api/react](/technologies/react/api) listing executors and generators that come with that Nx package, also improving the API docs of the individual executor options including a live embedded editor playground to experiment with different configuration setup. +Besides delivering awesome features, we keep improving our docs. They are essential to help discover new features and better understand existing ones. In the last weeks we've improved the navigation support, allowing you to navigate to a specific package with `/packages/` such as [/technologies/react/api](/technologies/react/api) listing executors and generators that come with that Nx package, also improving the API docs of the individual executor options including a live embedded editor playground to experiment with different configuration setup. Check out Benjamin Cabanes' tweet with some short videos: diff --git a/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md b/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md index 71e3362530..b6924bda77 100644 --- a/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md +++ b/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md @@ -74,7 +74,7 @@ Also see this example repository with some more information: [https://github.com ## Simplifying Nx -Nx follows a modular plugin architecture. There is the core part of Nx which has the main logic around managing the project graph, computation caching, hashing and more. On top of that we have a series of Nx provided plugins for some of the most common frameworks and libraries out there, like [TypeScript/Javascript](/technologies/typescript/api), [Angular](/technologies/angular/api), [React](/technologies/react/api) & [React Native](/technologies/react/react-native/api), [Next.js](/technologies/react/next/api), [Nest.js](/technologies/node/nest/api), [Node](/technologies/node/api) and many more, not to forget about [all the community plugins](/community). We also have a [labs project section](https://github.com/nrwl/nx-labs) which is our incubator for potentially new, natively supported Nx plugins. +Nx follows a modular plugin architecture. There is the core part of Nx which has the main logic around managing the project graph, computation caching, hashing and more. On top of that we have a series of Nx provided plugins for some of the most common frameworks and libraries out there, like [TypeScript/Javascript](/technologies/typescript/introduction), [Angular](/technologies/angular/introduction), [React](/technologies/react/introduction) & [React Native](/technologies/react/react-native/introduction), [Next.js](/technologies/react/next/introduction), [Nest.js](/technologies/node/nest/introduction), [Node](/technologies/node/introduction) and many more, not to forget about [all the community plugins](/community). We also have a [labs project section](https://github.com/nrwl/nx-labs) which is our incubator for potentially new, natively supported Nx plugins. This modular structure allows you to just use [Nx core without plugins](/getting-started/intro). An ideal approach if you want to add Nx to an [existing Lerna/Yarn/NPM/PNPM workspace](/recipes/adopting-nx/adding-to-monorepo). With v14 we made it even simpler s.t. now you only have a single `nx` package in your dependencies with the core setup. @@ -250,7 +250,7 @@ Nx v14 ships with React 18 support for React DOM and React Native. The latter ha In addition to that, Expo and Expo Application Service support has been added which has lead already to some drastic speed improvements with some of our clients. -Finally, it is the first version which ships the built-in module federation support for React as we've mentioned a couple of sections above. Check out the React package docs page and search for the `host` and `remote` generator: [/nx-api/react](/technologies/react/api) +Finally, it is the first version which ships the built-in module federation support for React as we've mentioned a couple of sections above. Check out the React package docs page and search for the `host` and `remote` generator: [/technologies/react/api](/technologies/react/api) ## Angular diff --git a/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md b/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md index bbc6747159..ce2ce84047 100644 --- a/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md +++ b/docs/blog/2022-12-06-nx-15-3-standalone-projects-vite-task-graph-and-more.md @@ -200,7 +200,7 @@ npx nx g @nrwl/vite:configuration This will adjust the NxExt Vite plugin configuration to match the one provided by our core team. Check out our docs for more info: [/technologies/build-tools/vite/generators/configuration](/technologies/build-tools/vite/api/generators/configuration) -You can also find all the details about the new Vite package in our docs: [/technologies/build-tools/vite](/technologies/build-tools/vite/api) +You can also find all the details about the new Vite package in our docs: [/technologies/build-tools/vite/introduction](/technologies/build-tools/vite/introduction) ## Adopting Nx has never been easier diff --git a/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md b/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md index 9827920206..46f5b0df88 100644 --- a/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md +++ b/docs/blog/2022-12-22-nx-15-4-vite-4-support-a-new-nx-watch-command-and-more.md @@ -30,7 +30,7 @@ Nx 15.4 brings in the latest Vite major version following the Vite 4 release ear As the [Vite launch article](https://vitejs.dev/blog/announcing-vite4.html) mentions, we are investing in the Vite ecosystem, and now officially support a first-party Vite plugin. Nx 15.4 continues this investment with timely support for Vite 4, and we're excited to be a part of the Vite ecosystem and a part of bringing more value to our devs through Vite support! -Projects already using our [@nrwl/vite plugin](/technologies/build-tools/vite/api) will be automatically upgraded to Vite 4 when they upgrade to the latest Nx version with the `nx migrate` command, and we've also simplified the configuration required to support Vite. +Projects already using our [@nrwl/vite plugin](/technologies/build-tools/vite/introduction) will be automatically upgraded to Vite 4 when they upgrade to the latest Nx version with the `nx migrate` command, and we've also simplified the configuration required to support Vite. We've also spent some effort into making the conversion of existing projects to use Vite simpler, including: @@ -40,7 +40,7 @@ We've also spent some effort into making the conversion of existing projects to - [better documentation around converting using our generator](/technologies/build-tools/vite/api/generators/configuration) - [adding a guide to our docs for converting manually](/technologies/build-tools/vite/recipes/configure-vite) -You can check out more details about our Vite plugin including how to add Vite and Vitest to your existing Nx workspace by visiting our docs at [nx.dev/technologies/build-tools/vite](/technologies/build-tools/vite/api) +You can check out more details about our Vite plugin including how to add Vite and Vitest to your existing Nx workspace by visiting our docs at [nx.dev/technologies/build-tools/vite/introduction](/technologies/build-tools/vite/introduction) ## Nx Watch diff --git a/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md b/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md index 6871f65114..f1662d9a6a 100644 --- a/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md +++ b/docs/blog/2023-01-10-setting-up-module-federation-with-server-side-rendering-for-angular.md @@ -56,7 +56,7 @@ Answer with the following: When your workspace is created, run `cd myorg`. -Next, we will need to install the [Official Nx Angular Plugin](/technologies/angular/api): +Next, we will need to install the [Official Nx Angular Plugin](/technologies/angular/introduction): ``` npm install @nrwl/angular diff --git a/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md b/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md index 7584136e9a..f101ef81e1 100644 --- a/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md +++ b/docs/blog/2023-02-16-nx-15-7-node-support-angular-lts-lockfile-pruning.md @@ -147,7 +147,7 @@ Previously when you created a new React application with the Nx `@nrwl/react` pl It was for a good reason, but at the same time, it is a thin line to walk between giving more flexibility and ensuring integrity and consistency (not to speak about features such as [automated code migrations](/features/automate-updating-dependencies)). We wrote a [blog post about it last week](/blog/configuration-files-and-potholes-in-your-codebase). -Inspired by our new [Vite setup](/technologies/build-tools/vite/api), which allows for a more modular configuration in the `vite.config.ts`, we wanted to bring some of the same flexibility to our Webpack setup as well. As such, now every Nx Webpack setup (e.g. a new React + Webpack based app) have a `webpack.config.js` in the project root. Old project are automatically migrated to this new setup. +Inspired by our new [Vite setup](/technologies/build-tools/vite/introduction), which allows for a more modular configuration in the `vite.config.ts`, we wanted to bring some of the same flexibility to our Webpack setup as well. As such, now every Nx Webpack setup (e.g. a new React + Webpack based app) have a `webpack.config.js` in the project root. Old project are automatically migrated to this new setup. ![](/blog/images/2023-02-16/emRP2gF7umWc4UE-.avif) diff --git a/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md b/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md index edba9e1422..0982f844f7 100644 --- a/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md +++ b/docs/blog/2023-03-08-nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook.md @@ -164,7 +164,7 @@ Read all about it [in the doc about Customizing Generator Options](/extending-nx ## Modular Node Applications -Nx has had Node backend support since the beginning, where you could add an [ExpressJS](/technologies/node/express/api) or [Nest.js](/technologies/node/nest/api) based application to your monorepo. This is a powerful approach as it allows you to colocate your frontend and backend code, which helps share code and, in particular, TypeScript types for your APIs!! +Nx has had Node backend support since the beginning, where you could add an [ExpressJS](/technologies/node/express/introduction) or [Nest.js](/technologies/node/nest/introduction) based application to your monorepo. This is a powerful approach as it allows you to colocate your frontend and backend code, which helps share code and, in particular, TypeScript types for your APIs!! In [Nx 15.7](/blog/nx-15-7-node-support-angular-lts-lockfile-pruning), we then announced [Nx Standalone Projects](https://youtu.be/qEaVzh-oBBc) support for Node. This allows to develop a Node backend in isolation but still leverages all the features from Nx in terms of code generators, automated migrations, and speed features such as [affected commands](/ci/features/affected), [caching](/concepts/how-caching-works), and [optimized CI setups](/ci/features/distribute-task-execution). diff --git a/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md b/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md index 01cd8e4716..73cd9f46b9 100644 --- a/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md +++ b/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md @@ -70,11 +70,11 @@ This creates a new application in your Nx monorepo that uses Rspack as the bundl Go and learn more on the - official Rspack website: [https://rspack.dev](https://rspack.dev/) -- learn about the Nx Rspack plugin: [/technologies/build-tools/rspack/introduction](/technologies/build-tools/rspack/api) +- learn about the Nx Rspack plugin: [/technologies/build-tools/rspack/introduction](/technologies/build-tools/rspack/introduction) ## Learn more -- 🦀 [Rspack and Nx docs](/technologies/build-tools/rspack/api) +- 🦀 [Rspack and Nx docs](/technologies/build-tools/rspack/introduction) - 🧠 [Nx Docs](/getting-started/intro) - 👩‍💻 [Nx GitHub](https://github.com/nrwl/nx) - 💬 [Nx Official Discord Server](https://go.nx.dev/community) diff --git a/docs/blog/2023-05-02-nx-16-is-here.md b/docs/blog/2023-05-02-nx-16-is-here.md index 938db58dd5..608a8b7d9e 100644 --- a/docs/blog/2023-05-02-nx-16-is-here.md +++ b/docs/blog/2023-05-02-nx-16-is-here.md @@ -13,7 +13,7 @@ We're proud to announce the release of Nx version 16! In this article, we'll go But before we jump into the new features of Nx 16, let's recap some of the recent features from our Nx 15 minor releases! - We introduced simpler presets for React, Angular, and [Node starter applications](https://youtu.be/K4f-fMuAoRY) -- We added official support for [Vite](/technologies/build-tools/vite/api) and Vitest for integrated Nx monorepos +- We added official support for [Vite](/technologies/build-tools/vite/introduction) and Vitest for integrated Nx monorepos - We introduced an [official Deno plugin](https://youtu.be/NpH8cFSp51E), including integration for Node and Deno project collocation and project graph support for Deno imports - We added Rust into the Nx codebase to speed up core functionality - We added support for [non-npm workspaces](https://youtu.be/QOhdL02f6BY) to support workspaces focused on other languages like C#, Java, and Kotlin, and saw some of those in action with community plugins for [.NET](https://www.nx-dotnet.com/) and [Java/Kotlin](https://github.com/tinesoft/nxrocks) diff --git a/docs/blog/2023-06-29-nx-console-gets-lit.md b/docs/blog/2023-06-29-nx-console-gets-lit.md index 0f1aafda68..9e508b773e 100644 --- a/docs/blog/2023-06-29-nx-console-gets-lit.md +++ b/docs/blog/2023-06-29-nx-console-gets-lit.md @@ -274,7 +274,7 @@ Using it, you get the native look, a11y, and theme-aware styling for free! Thank One big upside of using a webview is the huge Javascript ecosystem is available to you! To make sure that no regressions are introduced later on, we use [Cypress](https://www.cypress.io/). We can mock the editor communication and provide different schemas, make sure the form is rendered correctly and the right messages are sent back to the IDE. -While there's no particular Lit integration for Cypress, the tool itself is framework agnostic so it still works perfectly fine. Using the [`@nx/cypress`](/technologies/test-tools/cypress/api) executors did most of the work for us so setup was pretty quick too. +While there's no particular Lit integration for Cypress, the tool itself is framework agnostic so it still works perfectly fine. Using the [`@nx/cypress`](/technologies/test-tools/cypress/introduction) executors did most of the work for us so setup was pretty quick too. ### Results: Comparing Performance @@ -610,7 +610,7 @@ Using it, you get the native look, a11y, and theme-aware styling for free! Thank One big upside of using a webview is the huge Javascript ecosystem is available to you! To make sure that no regressions are introduced later on, we use [Cypress](https://www.cypress.io/). We can mock the editor communication and provide different schemas, make sure the form is rendered correctly and the right messages are sent back to the IDE. -While there’s no particular Lit integration for Cypress, the tool itself is framework agnostic so it still works perfectly fine. Using the [`@nx/cypress`](/technologies/test-tools/cypress/api) executors did most of the work for us so setup was pretty quick too. +While there’s no particular Lit integration for Cypress, the tool itself is framework agnostic so it still works perfectly fine. Using the [`@nx/cypress`](/technologies/test-tools/cypress/introduction) executors did most of the work for us so setup was pretty quick too. ### Results: Comparing Performance diff --git a/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md b/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md index 95c3972369..f99f391dfe 100644 --- a/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md +++ b/docs/blog/2023-09-18-introducing-playwright-support-for-nx.md @@ -300,7 +300,7 @@ In this blog, we have: - Used Nx to run Playwright tests - Set up a Playwright configuration for an existing Nx app -Hopefully, this gives you good insight into how to get started with Playwright. The Playwright configuration in this example is pretty simple, to learn more about `@nx/playwright` plugin, check out the Nx documentation: [/technologies/test-tools/playwright/introduction](/technologies/test-tools/playwright/api). +Hopefully, this gives you good insight into how to get started with Playwright. The Playwright configuration in this example is pretty simple, to learn more about `@nx/playwright` plugin, check out the Nx documentation: [/technologies/test-tools/playwright/introduction](/technologies/test-tools/playwright/introduction). ## Learn more diff --git a/docs/blog/2023-10-20-nx-17-release.md b/docs/blog/2023-10-20-nx-17-release.md index 159ee197a0..4f99cd3fa7 100644 --- a/docs/blog/2023-10-20-nx-17-release.md +++ b/docs/blog/2023-10-20-nx-17-release.md @@ -234,7 +234,7 @@ For more [checkout our API docs](/reference/core-api/nx/documents/release), and At Nx, we're OBSESSED with building a better, more robust experience for our developers. Towards this end, we're now in [v2 of our Project Inference API](/extending-nx/recipes/project-graph-plugins). -This API is a way of extending the Nx project graph, which can be particularly helpful for extending Nx to support other languages, allowing Nx to determine where to find and draw boundaries around projects in your workspace. A great example is our very own [Vue plugin](/technologies/vue/api). +This API is a way of extending the Nx project graph, which can be particularly helpful for extending Nx to support other languages, allowing Nx to determine where to find and draw boundaries around projects in your workspace. A great example is our very own [Vue plugin](/technologies/vue/introduction). Interestingly, v2 includes support for dynamic targets as well. This opens up exciting new doors to reducing configuration, and we hope to expand on this to better support our first-party plugins in the near future. diff --git a/docs/blog/2023-11-08-state-management.md b/docs/blog/2023-11-08-state-management.md index 6ad3d81af6..09e4174144 100644 --- a/docs/blog/2023-11-08-state-management.md +++ b/docs/blog/2023-11-08-state-management.md @@ -706,8 +706,8 @@ Here is a simple app that uses TanStack Query and Redux for state management. Th Nx is a powerful monorepo tool. Together with Nx and these 2 state management tools, it will be very easy to scale up any app. - TanStack Query site: [https://tanstack.com/query/latest](https://tanstack.com/query/latest) -- Official @nx/expo plugin: [/technologies/react/expo](/technologies/react/expo/api) -- Official @nx/react-native plugin: [/technologies/react/react-native](/technologies/react/react-native/api) +- Official @nx/expo plugin: [/technologies/react/expo/introduction](/technologies/react/expo/introduction) +- Official @nx/react-native plugin: [/technologies/react/react-native/introduction](/technologies/react/react-native/introduction) --- diff --git a/docs/blog/2023-12-28-highlights-2023.md b/docs/blog/2023-12-28-highlights-2023.md index 7ad5ea64cb..e0a7ea8d7b 100644 --- a/docs/blog/2023-12-28-highlights-2023.md +++ b/docs/blog/2023-12-28-highlights-2023.md @@ -220,7 +220,7 @@ And you'll then have access to Nx generators so you can create Vue applications, ![](/blog/images/2023-12-28/bodyimg6.gif) -Checkout out our [Vue API docs](/technologies/vue/api), and stay tuned as Nx prepares to offer more Vue support (including support for [Nuxt](https://nuxt.com/), a full-stack framework built around Vue) in the near future! +Checkout out our [Vue docs](/technologies/vue/introduction), and stay tuned as Nx prepares to offer more Vue support (including support for [Nuxt](https://nuxt.com/), a full-stack framework built around Vue) in the near future! ### Extending Nx: Local Generators, Build your Own CLI, Verdaccio Support diff --git a/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md b/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md index 10b35dcd1b..252d2171fb 100644 --- a/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md +++ b/docs/blog/2024-07-19-podcast-episode-2-tine-kondo.md @@ -16,4 +16,4 @@ In this episode, welcome Nx Champion and Nx Expert, Tine Kondo. Our discussion h We touch on the difficulties larger organizations face when merging PRs in a timely manner, emphasizing how a monorepo alleviates the headache of coordinating multiple PRs across various repositories, and share firsthand experiences and frustrations with traditional multi-repo setups, underscoring the benefits of a unified approach. -In particular, Nx's new plugin: [@nx/gradle](/technologies/java/api) is of interest, and Tine provides some valuable insight on the impact this plugin can make, as well as the importance for Maven support. +In particular, Nx's new plugin: [@nx/gradle](/technologies/java/introduction) is of interest, and Tine provides some valuable insight on the impact this plugin can make, as well as the importance for Maven support. diff --git a/docs/blog/2024-08-01-nx-19-5-update.md b/docs/blog/2024-08-01-nx-19-5-update.md index 6e1b161774..8f3357b2cc 100644 --- a/docs/blog/2024-08-01-nx-19-5-update.md +++ b/docs/blog/2024-08-01-nx-19-5-update.md @@ -106,7 +106,7 @@ Note that the new, free [hobby tier for Nx Cloud](#new-nx-cloud-hobby-tier) incl ## Pattern Support for `targetDefaults` -When using the [Atomizer features](/ci/features/split-e2e-tasks) of plugins like [`@nx/playwright`](/technologies/test-tools/playwright/api) and [`@nx/cypress`](/technologies/test-tools/cypress/api), you end up creating tasks with dynamic but predictable names. +When using the [Atomizer features](/ci/features/split-e2e-tasks) of plugins like [`@nx/playwright`](/technologies/test-tools/playwright/introduction) and [`@nx/cypress`](/technologies/test-tools/cypress/introduction), you end up creating tasks with dynamic but predictable names. ![Tasks Created With Atomizer](/blog/images/2024-08-01/e2e-task-names.avif) @@ -178,7 +178,7 @@ width="100%" /%} ## Support For Incremental Builds For Vite -Nx now supports incremental builds with our [`vite` plugin](/technologies/build-tools/vite/api). Incremental builds in Nx workspaces allow you to build any package in your workspace individually, and will then automatically use that built artifact when then building any project or application that consumes the package. This way you can speed up your build and CI times through optimizations like [only building packages that were affected](/reference/core-api/nx/documents/affected), using [Nx Replay](/ci/features/remote-cache) to effortlessly cache and share your built artifacts, and allowing you to run builds of your various packages in parallel using [Nx Agents](/ci/features/distribute-task-execution). +Nx now supports incremental builds with our [`vite` plugin](/technologies/build-tools/vite/introduction). Incremental builds in Nx workspaces allow you to build any package in your workspace individually, and will then automatically use that built artifact when then building any project or application that consumes the package. This way you can speed up your build and CI times through optimizations like [only building packages that were affected](/reference/core-api/nx/documents/affected), using [Nx Replay](/ci/features/remote-cache) to effortlessly cache and share your built artifacts, and allowing you to run builds of your various packages in parallel using [Nx Agents](/ci/features/distribute-task-execution). Read more about [buildable libraries and incremental builds](/concepts/buildable-and-publishable-libraries). @@ -194,11 +194,11 @@ npx nx g convert-to-inferred The important thing to note here is that while this generator will make adjustments to the `project.json` file of the projects you convert, the behavior of your tasks should remain the same. You can see project details via the [Nx Console](/getting-started/editor-setup) plugin of your IDE, or in a browser by running the command: `nx show project [projectName]`. -In Nx 19, we were focused on adding `convert-to-inferred` to our [Playwright](/technologies/test-tools/playwright/api), [Cypress](/technologies/test-tools/cypress/api), and [ESLint](/technologies/eslint/api) plugins - where bringing the [Nx Atomizer](/ci/features/split-e2e-tasks) provided the greatest value. Since then, we've added this generator to most other plugins. Currently, our React native plugins (react native, expo, detox) are the only plugins that are outstanding, and we'll be providing `convert-to-inferred` generators here in the near future. +In Nx 19, we were focused on adding `convert-to-inferred` to our [Playwright](/technologies/test-tools/playwright/introduction), [Cypress](/technologies/test-tools/cypress/introduction), and [ESLint](/technologies/eslint/introduction) plugins - where bringing the [Nx Atomizer](/ci/features/split-e2e-tasks) provided the greatest value. Since then, we've added this generator to most other plugins. Currently, our React native plugins (react native, expo, detox) are the only plugins that are outstanding, and we'll be providing `convert-to-inferred` generators here in the near future. ## Gradle Composite Builds Support -In [Nx 19.0](/blog/nx-19-release), we introduced support for Gradle through our [Gradle plugin](/technologies/java/api). With the latest update, this plugin now also supports [Gradle Composite builds](https://docs.gradle.org/current/userguide/composite_builds.html), in addition to multi-project builds. +In [Nx 19.0](/blog/nx-19-release), we introduced support for Gradle through our [Gradle plugin](/technologies/java/introduction). With the latest update, this plugin now also supports [Gradle Composite builds](https://docs.gradle.org/current/userguide/composite_builds.html), in addition to multi-project builds. Gradle Composite builds are commonly used in larger workspaces to manage dependencies across multiple projects. With this new support, Nx can now leverage composite builds to enhance the Nx Task Graph. For example, consider the following `settings.gradle.kts` file: @@ -217,7 +217,7 @@ You can read more on composite builds in the [Gradle documentation](https://docs ## Experimental: Gradle Test Atomization -The new [`@nx/gradle` plugin](/technologies/java/api) now includes experimental support for [Test Atomization](/ci/features/split-e2e-tasks). +The new [`@nx/gradle` plugin](/technologies/java/introduction) now includes experimental support for [Test Atomization](/ci/features/split-e2e-tasks). ![Gradle Atomized](/blog/images/2024-08-01/gradle-atomized.avif) diff --git a/docs/blog/2024-09-12-next-gen-module-federation-deployments.md b/docs/blog/2024-09-12-next-gen-module-federation-deployments.md index 11768c9d98..8e51cd8a7c 100644 --- a/docs/blog/2024-09-12-next-gen-module-federation-deployments.md +++ b/docs/blog/2024-09-12-next-gen-module-federation-deployments.md @@ -81,7 +81,7 @@ Next, we'll want to navigate into our new workspace: cd myorg ``` -And finally, we'll add the [`@nx/react`](/technologies/react/api) plugin to our workspace. +And finally, we'll add the [`@nx/react`](/technologies/react/introduction) plugin to our workspace. ```shell npx nx add @nx/react diff --git a/docs/blog/2025-01-06-nx-update-20-3.md b/docs/blog/2025-01-06-nx-update-20-3.md index b730e55794..edaef24a07 100644 --- a/docs/blog/2025-01-06-nx-update-20-3.md +++ b/docs/blog/2025-01-06-nx-update-20-3.md @@ -123,11 +123,11 @@ And we will continue to add this as the default to all our official presets soon ## Rspack updates -Our [`@nx/rspack`](/technologies/build-tools/rspack/api) plugin has moved from labs into our main repo now, and we now have [a dedicated plugin](/technologies/build-tools/rsbuild/api) for [Rsbuild](https://rsbuild.dev/) (a vite-like build tool with streamlined config built on top of Rspack) as well. +Our [`@nx/rspack`](/technologies/build-tools/rspack/introduction) plugin has moved from labs into our main repo now, and we now have [a dedicated plugin](/technologies/build-tools/rsbuild/introduction) for [Rsbuild](https://rsbuild.dev/) (a vite-like build tool with streamlined config built on top of Rspack) as well. -With the latest improvements, our Rspack plugin is now at feature parity with our [`@nx/webpack`](/technologies/build-tools/webpack/api) plugin, which should make it easier for teams to migrate from Webpack to Rspack now and take advantage of the significant performance gains. +With the latest improvements, our Rspack plugin is now at feature parity with our [`@nx/webpack`](/technologies/build-tools/webpack/introduction) plugin, which should make it easier for teams to migrate from Webpack to Rspack now and take advantage of the significant performance gains. -Our new [Rsbuild plugin](/technologies/build-tools/rsbuild/api) will bring support for React and Vue applications, and we have measured a massive performance increase here over webpack. Running the command: +Our new [Rsbuild plugin](/technologies/build-tools/rsbuild/introduction) will bring support for React and Vue applications, and we have measured a massive performance increase here over webpack. Running the command: ```shell nx g @nx/rsbuild:configuration diff --git a/docs/blog/2025-03-07-nx-update-20-5.md b/docs/blog/2025-03-07-nx-update-20-5.md index 7c56fc435b..2e6af76d6a 100644 --- a/docs/blog/2025-03-07-nx-update-20-5.md +++ b/docs/blog/2025-03-07-nx-update-20-5.md @@ -48,7 +48,7 @@ By default, Nx will use the `name` property from the `package.json` for a projec We have also made projects inferred by `@nx/js` more efficient by eliminating the duplicate typechecks that were occurring. Previously, when `@nx/js` inferred tasks in a workspace using TypeScript project references, buildable libraries would have both a `build` and `typecheck` target inferred. However, since typechecking occurs as part of `build`, this resulted in typechecking being run twice. Now, buildable projects will only have the `build` target, saving time. -[See more details on how `@nx/js` infers tasks](/technologies/typescript/api#how-nxjs-infers-tasks) +[See more details on how `@nx/js` infers tasks](/technologies/typescript/introduction#how-nxjs-infers-tasks) {% youtube src="https://www.youtube.com/watch?v=O2xBQJMTs9E" /%} diff --git a/docs/blog/2025-03-19-using-angular-with-rspack.md b/docs/blog/2025-03-19-using-angular-with-rspack.md index 5d99e798b9..f3f2b74280 100644 --- a/docs/blog/2025-03-19-using-angular-with-rspack.md +++ b/docs/blog/2025-03-19-using-angular-with-rspack.md @@ -121,7 +121,7 @@ export default createConfig( {% callout type="deepdive" title="createConfig Information" %} The `createConfig` function is used to create an Rspack configuration object setup for Angular applications. -You can read more about it [here](/technologies/angular/angular-rspack/api). +You can read more about it [here](/technologies/angular/angular-rspack/api/create-config). {% /callout %} ### Building and Serving your Application diff --git a/docs/blog/2025-04-23-test-splitting-techniques.md b/docs/blog/2025-04-23-test-splitting-techniques.md index d85b5a80de..8ced56263f 100644 --- a/docs/blog/2025-04-23-test-splitting-techniques.md +++ b/docs/blog/2025-04-23-test-splitting-techniques.md @@ -103,7 +103,7 @@ Or more generically: - `{ciTargetName}--{path/to/test/file}` -You can find more information on how to configure the Atomizer on the respective [Jest](/technologies/test-tools/jest/api#splitting-e2e-tests), [Cypress](/technologies/test-tools/cypress/api#nxcypress-configuration), [Playwright](/technologies/test-tools/playwright/api#nxplaywright-configuration), [Gradle](/technologies/java/introduction#nxgradle-configuration) or follow [this recipe](/extending-nx/recipes/project-graph-plugins) to create your own inferred plugin. +You can find more information on how to configure the Atomizer on the respective [Jest](/technologies/test-tools/jest/introduction#splitting-e2e-tests), [Cypress](/technologies/test-tools/cypress/introduction#nxcypress-configuration), [Playwright](/technologies/test-tools/playwright/introduction#nxplaywright-configuration), [Gradle](/technologies/java/introduction#nxgradle-configuration) or follow [this recipe](/extending-nx/recipes/project-graph-plugins) to create your own inferred plugin. ## Manual E2E Project Splitting diff --git a/docs/blog/2025-05-05-nx-21-release.md b/docs/blog/2025-05-05-nx-21-release.md index de94af393b..963a2a9f1e 100644 --- a/docs/blog/2025-05-05-nx-21-release.md +++ b/docs/blog/2025-05-05-nx-21-release.md @@ -128,7 +128,7 @@ To test how performance improved, we forked the Spring Boot repo and converted i These two changes make the `@nx/gradle` plugin better than ever for managing your Gradle plugins. Be sure to explore this new plugin if you're using Gradle, and watch out for what else we're bringing to the Java ecosystem, later this year. -[Check out the docs for more details.](/technologies/java/api) +[Check out the docs for more details.](/technologies/java/introduction) ## Migrate UI in Nx Console makes migrations easier than ever diff --git a/docs/changelog/19_7_0.md b/docs/changelog/19_7_0.md index 8018cf17e3..bae957c34f 100644 --- a/docs/changelog/19_7_0.md +++ b/docs/changelog/19_7_0.md @@ -11,9 +11,9 @@ src="https://youtu.be/i51LPtagb2s" title="NEW: Personal Access Tokens for Nx Cloud" /%} -### [rspack](/technologies/build-tools/rspack/api) as the Default Bundler for Module Federation +### [rspack](/technologies/build-tools/rspack/introduction) as the Default Bundler for Module Federation -We've moved to [rspack](/technologies/build-tools/rspack/api) as the default bundler when setting up Module Federation with Nx! Checkout [Colum's thread](https://x.com/FerryColum/status/1833097821496455321) and catch our upcoming Nx Live broadcast for more: +We've moved to [rspack](/technologies/build-tools/rspack/introduction) as the default bundler when setting up Module Federation with Nx! Checkout [Colum's thread](https://x.com/FerryColum/status/1833097821496455321) and catch our upcoming Nx Live broadcast for more: {% youtube src="https://youtube.com/live/_c4zjYm0pYE" diff --git a/docs/generated/packages/angular/documents/nx-and-angular.md b/docs/generated/packages/angular/documents/nx-and-angular.md index 20624de622..540651d984 100644 --- a/docs/generated/packages/angular/documents/nx-and-angular.md +++ b/docs/generated/packages/angular/documents/nx-and-angular.md @@ -264,7 +264,7 @@ Features like - offering [remote caching abilities](/ci/features/remote-cache) on CI - offering [task distribution across machines (Nx Agents)](/ci/features/distribute-task-execution) -And, Nx already uses fast, modern tooling like [ESBuild](/technologies/build-tools/esbuild/api), [Vite](/technologies/build-tools/vite/api), Vitest and [Rspack](/technologies/build-tools/rspack/api) for non-Angular stacks. So once Angular is ready to use these tools, Nx will also be ready. +And, Nx already uses fast, modern tooling like [ESBuild](/technologies/build-tools/esbuild/introduction), [Vite](/technologies/build-tools/vite/introduction), Vitest and [Rspack](/technologies/build-tools/rspack/introduction) for non-Angular stacks. So once Angular is ready to use these tools, Nx will also be ready. ### Editor Integration diff --git a/docs/generated/packages/esbuild/documents/overview.md b/docs/generated/packages/esbuild/documents/overview.md index 1ac3c5eece..e0a043b563 100644 --- a/docs/generated/packages/esbuild/documents/overview.md +++ b/docs/generated/packages/esbuild/documents/overview.md @@ -133,4 +133,4 @@ Extra API options for esbuild can be passed in the `esbuildOptions` object for y ## More Documentation -- [Using JS](/technologies/typescript/api) +- [Using JS](/technologies/typescript/introduction) diff --git a/docs/generated/packages/eslint/documents/overview.md b/docs/generated/packages/eslint/documents/overview.md index 36f11bf46b..b2921c4f20 100644 --- a/docs/generated/packages/eslint/documents/overview.md +++ b/docs/generated/packages/eslint/documents/overview.md @@ -77,4 +77,4 @@ nx lint my-project ## ESLint plugin -Read about our dedicated ESLint plugin - [eslint-plugin-nx](/technologies/eslint/eslint-plugin/api). +Read about our dedicated ESLint plugin - [eslint-plugin-nx](/technologies/eslint/eslint-plugin). diff --git a/docs/generated/packages/expo/documents/overview.md b/docs/generated/packages/expo/documents/overview.md index 9ec8786c09..f97ab890a2 100644 --- a/docs/generated/packages/expo/documents/overview.md +++ b/docs/generated/packages/expo/documents/overview.md @@ -343,5 +343,5 @@ Below table is a map between expo commands and Nx commands: ## More Documentation -- [Using Detox](/technologies/test-tools/detox/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Detox](/technologies/test-tools/detox/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/generated/packages/nest/documents/overview.md b/docs/generated/packages/nest/documents/overview.md index 4875590617..8e37c5e3a5 100644 --- a/docs/generated/packages/nest/documents/overview.md +++ b/docs/generated/packages/nest/documents/overview.md @@ -203,4 +203,4 @@ Bundling dependencies is typically not recommended for Node applications. ## More Documentation -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/generated/packages/node/documents/overview.md b/docs/generated/packages/node/documents/overview.md index 07f2fe56a0..247ad0a988 100644 --- a/docs/generated/packages/node/documents/overview.md +++ b/docs/generated/packages/node/documents/overview.md @@ -93,5 +93,5 @@ For additional information on how to debug Node applications, see the [Node.js d ## More Documentation -- [Using Cypress](/technologies/test-tools/cypress/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Cypress](/technologies/test-tools/cypress/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/generated/packages/react-native/documents/overview.md b/docs/generated/packages/react-native/documents/overview.md index deb7e5f9a8..6da064eaef 100644 --- a/docs/generated/packages/react-native/documents/overview.md +++ b/docs/generated/packages/react-native/documents/overview.md @@ -194,5 +194,5 @@ The build artifacts will be located under `/android/app/build`. ## More Documentation -- [Using Detox](/technologies/test-tools/detox/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Detox](/technologies/test-tools/detox/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/generated/packages/react/documents/overview.md b/docs/generated/packages/react/documents/overview.md index 067dc0cab3..d8b4c80dc6 100644 --- a/docs/generated/packages/react/documents/overview.md +++ b/docs/generated/packages/react/documents/overview.md @@ -136,6 +136,6 @@ The library in `dist` is publishable to npm or a private registry. ## More Documentation - [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial) -- [Using Cypress](/technologies/test-tools/cypress/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Cypress](/technologies/test-tools/cypress/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) - [Using Storybook](/technologies/test-tools/storybook/recipes/overview-react) diff --git a/docs/generated/packages/rspack/documents/overview.md b/docs/generated/packages/rspack/documents/overview.md index a3d35f2ca9..caf37242e3 100644 --- a/docs/generated/packages/rspack/documents/overview.md +++ b/docs/generated/packages/rspack/documents/overview.md @@ -62,7 +62,7 @@ The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTa ### Generate a new project using Rspack -You can generate a [React](/technologies/react/api) application that uses Rspack. The [`@nx/react:app`](/technologies/react/api/generators/application) generator accepts the `bundler` option, where you can pass `rspack`. This will generate a new application configured to use Rspack, and it will also install all the necessary dependencies, including the `@nx/rspack` plugin. +You can generate a [React](/technologies/react/introduction) application that uses Rspack. The [`@nx/react:app`](/technologies/react/api/generators/application) generator accepts the `bundler` option, where you can pass `rspack`. This will generate a new application configured to use Rspack, and it will also install all the necessary dependencies, including the `@nx/rspack` plugin. To generate a React application using Rspack, run the following: diff --git a/docs/generated/packages/storybook/documents/best-practices.md b/docs/generated/packages/storybook/documents/best-practices.md index 3fc3b5c232..3a101eed01 100644 --- a/docs/generated/packages/storybook/documents/best-practices.md +++ b/docs/generated/packages/storybook/documents/best-practices.md @@ -7,7 +7,7 @@ description: The purpose of this guide is to help you set up Storybook in your N ## Purpose of this guide -The purpose of this guide is to help you [set up Storybook in your Nx workspace](/technologies/test-tools/storybook/api) so that you can get the most out of Nx and its powerful capabilities. +The purpose of this guide is to help you [set up Storybook in your Nx workspace](/technologies/test-tools/storybook/introduction) so that you can get the most out of Nx and its powerful capabilities. ## When to use Storybook @@ -31,7 +31,7 @@ First, let’s see what Nx offers, when you are in the process of developing a p #### Configuration generation -You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/technologies/test-tools/storybook/api/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` package overview page](/technologies/test-tools/storybook/api#generating-storybook-configuration). With Nx, you configure Storybook for each individual project. +You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/technologies/test-tools/storybook/api/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` introduction page](/technologies/test-tools/storybook/introduction#generating-storybook-configuration). With Nx, you configure Storybook for each individual project. #### Stories generation @@ -45,7 +45,7 @@ If your project is not configured yet, check out one of these guides: - [Set up Storybook for Vue Projects](/technologies/test-tools/storybook/recipes/overview-vue) -If your project is [already configured](/technologies/test-tools/storybook/api), you can use the `stories` generator: +If your project is [already configured](/technologies/test-tools/storybook/introduction), you can use the `stories` generator: - [React (and Next.js) stories generator](/technologies/react/api/generators/stories) @@ -71,7 +71,7 @@ You can set up your interaction tests to run as part of your CI. You can read mo #### Serve -When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/technologies/test-tools/storybook/api#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/technologies/test-tools/storybook/api/executors/storybook) and [build](/technologies/test-tools/storybook/api/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack). +When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/technologies/test-tools/storybook/introduction#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/technologies/test-tools/storybook/api/executors/storybook) and [build](/technologies/test-tools/storybook/api/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack). #### Build and deploy @@ -146,4 +146,4 @@ If you have any questions or suggestions, please feel free to reach out to us on ### Nx & Storybook documentation -You can find all Storybook-related Nx documentation in the [packages page](/technologies/test-tools/storybook/api). +You can find all Storybook-related Nx documentation in the [packages page](/technologies/test-tools/storybook/introduction). diff --git a/docs/generated/packages/vite/documents/overview.md b/docs/generated/packages/vite/documents/overview.md index 4743814af9..be33cd7dfb 100644 --- a/docs/generated/packages/vite/documents/overview.md +++ b/docs/generated/packages/vite/documents/overview.md @@ -86,7 +86,7 @@ The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` ### Generate a new project using Vite -You can generate a [React](/technologies/react/api) application or library or a [Web](/reference/core-api/web) application that uses Vite.js. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/react:lib`](/technologies/react/api/generators/library) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin. +You can generate a [React](/technologies/react/introduction) application or library or a [Web](/reference/core-api/web) application that uses Vite.js. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/react:lib`](/technologies/react/api/generators/library) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin. To generate a React application using Vite.js, run the following: diff --git a/docs/generated/packages/web/documents/overview.md b/docs/generated/packages/web/documents/overview.md index 31cb615395..c59f5953ad 100644 --- a/docs/generated/packages/web/documents/overview.md +++ b/docs/generated/packages/web/documents/overview.md @@ -44,12 +44,12 @@ The application uses no framework and generates with web components. You can add To start the application in development mode, run `nx serve my-new-app`. {% callout type="note" title="React" %} -If you are looking to add a React application, check out the [React plugin](/technologies/react/api). +If you are looking to add a React application, check out the [React plugin](/technologies/react/introduction). {% /callout %} ### Creating Libraries -To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/technologies/typescript/api) plugin. +To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/technologies/typescript/introduction) plugin. ```shell nx g @nx/js:lib libs/my-new-lib @@ -107,5 +107,5 @@ The library in `dist` is publishable to npm or a private registry. ## More Documentation -- [Using Cypress](/technologies/test-tools/cypress/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Cypress](/technologies/test-tools/cypress/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/generated/packages/webpack/documents/overview.md b/docs/generated/packages/webpack/documents/overview.md index aff498aa2d..6d11528d6d 100644 --- a/docs/generated/packages/webpack/documents/overview.md +++ b/docs/generated/packages/webpack/documents/overview.md @@ -76,7 +76,7 @@ The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTa ## Generate a new project using Webpack -You can generate a [React](/technologies/react/api) application or a [Web](/reference/core-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/node:app`](/technologies/node/api/generators/application) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin. +You can generate a [React](/technologies/react/introduction) application or a [Web](/reference/core-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/node:app`](/technologies/node/api/generators/application) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin. To generate a React application using Webpack, run the following: diff --git a/docs/nx-cloud/concepts/building-blocks-fast-ci.md b/docs/nx-cloud/concepts/building-blocks-fast-ci.md index e39ebdcdc9..6ac5a723ec 100644 --- a/docs/nx-cloud/concepts/building-blocks-fast-ci.md +++ b/docs/nx-cloud/concepts/building-blocks-fast-ci.md @@ -8,7 +8,7 @@ The purpose of a CI pipeline is to run tasks like `build`, `test`, `lint` and `e Nx provides plugins for popular tools that make it easy to update to the latest version of that tool and [automatically updates](/features/automate-updating-dependencies) your configuration files to take advantage of enhancements in the tool. The tool authors are always looking for ways to improve their product and the best way to get the most out of the tool you're using is to make sure you're on the latest version. Also, the recommended configuration settings for a tool will change over time so even if you're on the latest version of a tool, you may be using a slower version of it because you don't know about a new configuration setting. [`nx migrate`](/features/automate-updating-dependencies) will automatically change the default settings of in your tooling config to use the latest recommended settings so that your repo won't be left behind. -Because Nx plugins have a consistent interface for how they are invoked and how they interact with the codebase, it is easier to try out a different tool to see if it is better than what you're currently using. Newer tools that were created with different technologies or different design decisions can be orders of magnitude faster than your existing tools. Or the new tool might not help your project. Browse through the [list of Nx plugins](/plugin-registry), like [vite](/technologies/build-tools/vite/api) or [rspack](/technologies/build-tools/rspack/api), and try it out on your project with the default settings already configured for you. +Because Nx plugins have a consistent interface for how they are invoked and how they interact with the codebase, it is easier to try out a different tool to see if it is better than what you're currently using. Newer tools that were created with different technologies or different design decisions can be orders of magnitude faster than your existing tools. Or the new tool might not help your project. Browse through the [list of Nx plugins](/plugin-registry), like [vite](/technologies/build-tools/vite/introduction) or [rspack](/technologies/build-tools/rspack/introduction), and try it out on your project with the default settings already configured for you. ## Reduce Wasted Time diff --git a/docs/nx-cloud/features/split-e2e-tasks.md b/docs/nx-cloud/features/split-e2e-tasks.md index 0915a7bfd0..d40a5345ee 100644 --- a/docs/nx-cloud/features/split-e2e-tasks.md +++ b/docs/nx-cloud/features/split-e2e-tasks.md @@ -79,10 +79,10 @@ If you upgraded Nx from an older version, ensure that [inferred tasks](/concepts If you are already using the `@nx/cypress`, `@nx/playwright`, or `@nx/jest` plugin, you need to manually add the appropriate configuration to the `plugins` array of `nx.json`. Follow the instructions for the plugin you are using: -- [Configure Cypress Task Splitting](/technologies/test-tools/cypress/api#nxcypress-configuration) -- [Configure Playwright Task Splitting](/technologies/test-tools/playwright/api#nxplaywright-configuration) -- [Configure Jest Task Splitting](/technologies/test-tools/jest/api#splitting-e2e-tests) -- [Configure Gradle Testing Task Splitting](/technologies/java/api#splitting-tests) +- [Configure Cypress Task Splitting](/technologies/test-tools/cypress/introduction#nxcypress-configuration) +- [Configure Playwright Task Splitting](/technologies/test-tools/playwright/introduction#nxplaywright-configuration) +- [Configure Jest Task Splitting](/technologies/test-tools/jest/introduction#splitting-e2e-tests) +- [Configure Gradle Testing Task Splitting](/technologies/java/introduction#splitting-tests) ## Verify Automated Task Splitting Works diff --git a/docs/shared/concepts/common-tasks.md b/docs/shared/concepts/common-tasks.md index 894d038f13..c372253391 100644 --- a/docs/shared/concepts/common-tasks.md +++ b/docs/shared/concepts/common-tasks.md @@ -22,7 +22,7 @@ This task should produce the compiled output of this project. Typically, you'll } ``` -The task might use the [@nx/vite](/technologies/build-tools/vite/api), [@nx/webpack](/technologies/build-tools/webpack/api) or [@nx/rspack](/technologies/build-tools/rspack/api) plugins. Or you could have the task launch your own custom script. +The task might use the [@nx/vite](/technologies/build-tools/vite/introduction), [@nx/webpack](/technologies/build-tools/webpack/introduction) or [@nx/rspack](/technologies/build-tools/rspack/introduction) plugins. Or you could have the task launch your own custom script. {% tabs %} {% tab label="Vite" %} @@ -102,7 +102,7 @@ You can define your own `build` task in your project configuration. Here is an e ## `serve` -This task should run your project in a developer preview mode. The task might use the [@nx/vite](/technologies/build-tools/vite/api), [@nx/webpack](/technologies/build-tools/webpack/api) or [@nx/rspack](/technologies/build-tools/rspack/api) plugins. Or you could have the task launch your own custom script. +This task should run your project in a developer preview mode. The task might use the [@nx/vite](/technologies/build-tools/vite/introduction), [@nx/webpack](/technologies/build-tools/webpack/introduction) or [@nx/rspack](/technologies/build-tools/rspack/introduction) plugins. Or you could have the task launch your own custom script. {% tabs %} {% tab label="Vite" %} @@ -182,7 +182,7 @@ You can define your own `serve` task in your project configuration. Here is an e ## `test` -This task typically runs unit tests for a project. The task might use the [@nx/vite](/technologies/build-tools/vite/api) or [@nx/jest](/technologies/test-tools/jest/api) plugins. Or you could have the task launch your own custom script. +This task typically runs unit tests for a project. The task might use the [@nx/vite](/technologies/build-tools/vite/introduction) or [@nx/jest](/technologies/test-tools/jest/introduction) plugins. Or you could have the task launch your own custom script. {% tabs %} {% tab label="Vitest" %} @@ -242,7 +242,7 @@ You can define your own `test` task in your project configuration. Here is an ex ## `lint` -This task should run lint rules for a project. The task might use the [@nx/eslint](/technologies/eslint/api) plugin or run your own custom script. +This task should run lint rules for a project. The task might use the [@nx/eslint](/technologies/eslint/introduction) plugin or run your own custom script. {% tabs %} {% tab label="ESLint" %} diff --git a/docs/shared/concepts/nx-plugins.md b/docs/shared/concepts/nx-plugins.md index 466a43f95c..ebdbd80456 100644 --- a/docs/shared/concepts/nx-plugins.md +++ b/docs/shared/concepts/nx-plugins.md @@ -9,10 +9,10 @@ Nx plugins help developers use a tool or framework with Nx. They allow the plugi For example, plugins can accomplish the following: -- [Configure Nx cache settings](/concepts/inferred-tasks) for a tool. The [`@nx/webpack`](/technologies/build-tools/webpack/api) plugin can automatically configure the [inputs](/recipes/running-tasks/configure-inputs) and [outputs](/recipes/running-tasks/configure-outputs) for a `build` task based on the settings in the `webpack.config.js` file it uses. -- [Update tooling configuration](/features/automate-updating-dependencies) when upgrading the tool version. When Storybook 7 introduced a [new format](https://storybook.js.org/blog/storybook-csf3-is-here) for their configuration files, anyone using the [`@nx/storybook`](/technologies/test-tools/storybook/api) plugin could automatically apply those changes to their repository when upgrading. -- [Set up a tool](/features/generate-code) for the first time. With the [`@nx/playwright`](/technologies/test-tools/playwright/api) plugin installed, you can use the `@nx/playwright:configuration` code generator to set up Playwright tests in an existing project. -- [Run a tool in an advanced way](/concepts/executors-and-configurations). The [`@nx/js`](/technologies/typescript/api) plugin's [`@nx/js:tsc` executor](/technologies/typescript/api/executors/tsc) combines Nx's understanding of your repository with Typescript's native batch mode feature to make your builds [even more performant](/technologies/typescript/recipes/enable-tsc-batch-mode). +- [Configure Nx cache settings](/concepts/inferred-tasks) for a tool. The [`@nx/webpack`](/technologies/build-tools/webpack/introduction) plugin can automatically configure the [inputs](/recipes/running-tasks/configure-inputs) and [outputs](/recipes/running-tasks/configure-outputs) for a `build` task based on the settings in the `webpack.config.js` file it uses. +- [Update tooling configuration](/features/automate-updating-dependencies) when upgrading the tool version. When Storybook 7 introduced a [new format](https://storybook.js.org/blog/storybook-csf3-is-here) for their configuration files, anyone using the [`@nx/storybook`](/technologies/test-tools/storybook/introduction) plugin could automatically apply those changes to their repository when upgrading. +- [Set up a tool](/features/generate-code) for the first time. With the [`@nx/playwright`](/technologies/test-tools/playwright/introduction) plugin installed, you can use the `@nx/playwright:configuration` code generator to set up Playwright tests in an existing project. +- [Run a tool in an advanced way](/concepts/executors-and-configurations). The [`@nx/js`](/technologies/typescript/introduction) plugin's [`@nx/js:tsc` executor](/technologies/typescript/api/executors/tsc) combines Nx's understanding of your repository with Typescript's native batch mode feature to make your builds [even more performant](/technologies/typescript/recipes/enable-tsc-batch-mode). ## Plugin Features diff --git a/docs/shared/features/automate-updating-dependencies.md b/docs/shared/features/automate-updating-dependencies.md index e741779d06..896f0cbdc3 100644 --- a/docs/shared/features/automate-updating-dependencies.md +++ b/docs/shared/features/automate-updating-dependencies.md @@ -31,7 +31,7 @@ Want a more visual and guided way to migrate? Check out the [Migrate UI](/recipe Nx knows where its configuration files are located and ensures they match the expected format. This automated update process, commonly referred to as "migration," becomes even **more powerful when you leverage [Nx plugins](/plugin-registry)**. Each plugin can provide migrations for its area of competency. -For example, the [Nx React plugin](/technologies/react/api) knows where to look for React and Nx specific configuration files and knows how to apply certain changes when updating to a given version of React. +For example, the [Nx React plugin](/technologies/react/introduction) knows where to look for React and Nx specific configuration files and knows how to apply certain changes when updating to a given version of React. In the example below, the React plugin defines a migration script (`./src/migrations/.../add-babel-core`) that runs when upgrading to Nx `16.7.0-beta.2` (or higher). diff --git a/docs/shared/features/generate-code.md b/docs/shared/features/generate-code.md index 5aa6c262fe..7d568bffa7 100644 --- a/docs/shared/features/generate-code.md +++ b/docs/shared/features/generate-code.md @@ -9,7 +9,7 @@ description: 'Learn how to use Nx code generators to automate repetitive tasks, Code generators are like automation scripts designed to streamline your workflow. Essentially, they are TypeScript functions that accept parameters and help boost your productivity by: -- Allowing you to **scaffold new projects** or **augment existing projects** with new features, like [adding Storybook support](/technologies/test-tools/storybook/api#generating-storybook-configuration) +- Allowing you to **scaffold new projects** or **augment existing projects** with new features, like [adding Storybook support](/technologies/test-tools/storybook/introduction#generating-storybook-configuration) - **Automating repetitive tasks** in your development workflow - Ensuring your **code is consistent and follows best practices** diff --git a/docs/shared/guides/angular-rspack/getting-started.md b/docs/shared/guides/angular-rspack/getting-started.md index 469a57fcc7..c0b4d05e98 100644 --- a/docs/shared/guides/angular-rspack/getting-started.md +++ b/docs/shared/guides/angular-rspack/getting-started.md @@ -100,7 +100,7 @@ After generating the application, you will notice the following: - A `rspack.config.ts` file in the root of the project - The `project.json` file does not have a `targets.build` or `targets.serve` target -The `rspack.config.ts` file is a configuration file for Rspack. It contains the configuration options for Rspack and for Angular Rspack a helper [createConfig](/technologies/angular/angular-rspack/api) +The `rspack.config.ts` file is a configuration file for Rspack. It contains the configuration options for Rspack and for Angular Rspack a helper [createConfig](/technologies/angular/angular-rspack/api/create-config) function is used to map the options you would expect to set in the `project.json` or `angular.json` files to the Rspack configuration. The `project.json` file does not contain the `targets.build` or `targets.serve` targets because Angular Rspack uses Nx's [Inferred Tasks](concepts/inferred-tasks) to build and serve your application with Rspack. diff --git a/docs/shared/guides/angular-rspack/handling-configurations.md b/docs/shared/guides/angular-rspack/handling-configurations.md index 0ad80a6baa..53c5794733 100644 --- a/docs/shared/guides/angular-rspack/handling-configurations.md +++ b/docs/shared/guides/angular-rspack/handling-configurations.md @@ -7,7 +7,7 @@ description: 'Guide on how to handle configurations with Angular Rspack' Configurations are handled slightly differently compared to the Angular CLI. Rsbuild and Rspack use `mode` instead of configurations to handle different environments by default. This means that a different solution is needed to handle different build configurations you may have to match the behavior of Angular's configuration handling. -The [`createConfig`](/technologies/angular/angular-rspack/api) function helps you to handle this. It uses the `NGRS_CONFIG` environment variable to determine which configuration to use. The default configuration is `production`. +The [`createConfig`](/technologies/angular/angular-rspack/api/create-config) function helps you to handle this. It uses the `NGRS_CONFIG` environment variable to determine which configuration to use. The default configuration is `production`. {% callout type="info" title="Roll your own" %} You can handle configurations by yourself if you prefer, all you need is some manner of detecting the environment and then merging the options passed to `createConfig`. diff --git a/docs/shared/guides/js-and-ts.md b/docs/shared/guides/js-and-ts.md index 025e176ffa..346be3f5f3 100644 --- a/docs/shared/guides/js-and-ts.md +++ b/docs/shared/guides/js-and-ts.md @@ -20,4 +20,4 @@ Regardless whether you use JavaScript or TypeScript, you will have a `tsconfig.b ## Interested in building and distributing TypeScript packages? -You might want to check out the `@nx/js` package which comes with advanced TypeScript support, including [SWC](https://swc.rs/) and more. Find out more in the [plugin documentation](/technologies/typescript/api). +You might want to check out the `@nx/js` package which comes with advanced TypeScript support, including [SWC](https://swc.rs/) and more. Find out more in the [plugin documentation](/technologies/typescript/introduction). diff --git a/docs/shared/guides/nx-and-angular-cli.md b/docs/shared/guides/nx-and-angular-cli.md index 20624de622..540651d984 100644 --- a/docs/shared/guides/nx-and-angular-cli.md +++ b/docs/shared/guides/nx-and-angular-cli.md @@ -264,7 +264,7 @@ Features like - offering [remote caching abilities](/ci/features/remote-cache) on CI - offering [task distribution across machines (Nx Agents)](/ci/features/distribute-task-execution) -And, Nx already uses fast, modern tooling like [ESBuild](/technologies/build-tools/esbuild/api), [Vite](/technologies/build-tools/vite/api), Vitest and [Rspack](/technologies/build-tools/rspack/api) for non-Angular stacks. So once Angular is ready to use these tools, Nx will also be ready. +And, Nx already uses fast, modern tooling like [ESBuild](/technologies/build-tools/esbuild/introduction), [Vite](/technologies/build-tools/vite/introduction), Vitest and [Rspack](/technologies/build-tools/rspack/introduction) for non-Angular stacks. So once Angular is ready to use these tools, Nx will also be ready. ### Editor Integration diff --git a/docs/shared/guides/react-native.md b/docs/shared/guides/react-native.md index 5761c9f5ba..b87560f944 100644 --- a/docs/shared/guides/react-native.md +++ b/docs/shared/guides/react-native.md @@ -5,7 +5,7 @@ description: Learn how to develop React Native applications with Nx, including w # 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](/technologies/test-tools/detox/api), Storybook, Jest, and more. +Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Detox](/technologies/test-tools/detox/introduction), Storybook, Jest, and more. In this guide we will show you how to develop [React Native](https://reactnative.dev/) applications with Nx. diff --git a/docs/shared/migration/adding-to-existing-project.md b/docs/shared/migration/adding-to-existing-project.md index 25a403dbd4..ee647950f5 100644 --- a/docs/shared/migration/adding-to-existing-project.md +++ b/docs/shared/migration/adding-to-existing-project.md @@ -107,7 +107,7 @@ the Nx Plugins in `nx.json`: ``` Each plugin can accept options to customize the projects which they create. You can see more information about -configuring the plugins on the [`@nx/next/plugin`](/technologies/react/next/api) and [`@nx/eslint/plugin`](/technologies/eslint/api) plugin pages. +configuring the plugins on the [`@nx/next/plugin`](/technologies/react/next/introduction) and [`@nx/eslint/plugin`](/technologies/eslint/introduction) plugin pages. To view all available tasks, open the Project Details view with Nx Console or use the terminal to launch the project details in a browser window. diff --git a/docs/shared/migration/adding-to-monorepo.md b/docs/shared/migration/adding-to-monorepo.md index 7e1063374f..bcb82701df 100644 --- a/docs/shared/migration/adding-to-monorepo.md +++ b/docs/shared/migration/adding-to-monorepo.md @@ -103,7 +103,7 @@ the Nx Plugins in `nx.json`: ``` Each plugin can accept options to customize the projects which they create. You can see more information about -configuring the plugins on the [`@nx/next/plugin`](/technologies/react/next/api) and [`@nx/eslint/plugin`](/technologies/eslint/api) plugin pages. +configuring the plugins on the [`@nx/next/plugin`](/technologies/react/next/introduction) and [`@nx/eslint/plugin`](/technologies/eslint/introduction) plugin pages. To view all available tasks, open the Project Details view with Nx Console or use the terminal to launch the project details in a browser window. diff --git a/docs/shared/migration/migration-angular.md b/docs/shared/migration/migration-angular.md index 9129ba33a8..6eb779e582 100644 --- a/docs/shared/migration/migration-angular.md +++ b/docs/shared/migration/migration-angular.md @@ -220,8 +220,8 @@ For more information about how Nx can improve your CI pipeline, check out one of Learn more about the advantages of Nx in the following guides: -- [Using Cypress for e2e tests](/technologies/test-tools/cypress/api) -- [Using Jest for unit tests](/technologies/test-tools/jest/api) +- [Using Cypress for e2e tests](/technologies/test-tools/cypress/introduction) +- [Using Jest for unit tests](/technologies/test-tools/jest/introduction) - [Computation Caching](/concepts/how-caching-works) - [Rebuilding and Retesting What is Affected](/ci/features/affected) - [Integrate with Editors](/getting-started/editor-setup) diff --git a/docs/shared/packages/cypress/cypress-component-testing.md b/docs/shared/packages/cypress/cypress-component-testing.md index 4873dc313b..e9e6d4f9bc 100644 --- a/docs/shared/packages/cypress/cypress-component-testing.md +++ b/docs/shared/packages/cypress/cypress-component-testing.md @@ -8,8 +8,8 @@ description: Learn how to set up and use Cypress component testing in your Nx wo > Component testing requires Cypress v10 and above. > See our [guide for more information](/technologies/test-tools/cypress/recipes/cypress-v11-migration) to migrate to Cypress v10. -Unlike [E2E testing](/technologies/test-tools/cypress/api), component testing does not create a new project. Instead, Cypress component testing is added -directly to a project, like [Jest](/technologies/test-tools/jest/api) +Unlike [E2E testing](/technologies/test-tools/cypress/introduction), component testing does not create a new project. Instead, Cypress component testing is added +directly to a project, like [Jest](/technologies/test-tools/jest/introduction) ## Add Component Testing to a Project diff --git a/docs/shared/packages/esbuild/esbuild-plugin.md b/docs/shared/packages/esbuild/esbuild-plugin.md index 1ac3c5eece..e0a043b563 100644 --- a/docs/shared/packages/esbuild/esbuild-plugin.md +++ b/docs/shared/packages/esbuild/esbuild-plugin.md @@ -133,4 +133,4 @@ Extra API options for esbuild can be passed in the `esbuildOptions` object for y ## More Documentation -- [Using JS](/technologies/typescript/api) +- [Using JS](/technologies/typescript/introduction) diff --git a/docs/shared/packages/eslint/eslint.md b/docs/shared/packages/eslint/eslint.md index 36f11bf46b..b2921c4f20 100644 --- a/docs/shared/packages/eslint/eslint.md +++ b/docs/shared/packages/eslint/eslint.md @@ -77,4 +77,4 @@ nx lint my-project ## ESLint plugin -Read about our dedicated ESLint plugin - [eslint-plugin-nx](/technologies/eslint/eslint-plugin/api). +Read about our dedicated ESLint plugin - [eslint-plugin-nx](/technologies/eslint/eslint-plugin). diff --git a/docs/shared/packages/expo/expo-plugin.md b/docs/shared/packages/expo/expo-plugin.md index 9ec8786c09..f97ab890a2 100644 --- a/docs/shared/packages/expo/expo-plugin.md +++ b/docs/shared/packages/expo/expo-plugin.md @@ -343,5 +343,5 @@ Below table is a map between expo commands and Nx commands: ## More Documentation -- [Using Detox](/technologies/test-tools/detox/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Detox](/technologies/test-tools/detox/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/shared/packages/nest/nest-plugin.md b/docs/shared/packages/nest/nest-plugin.md index 4875590617..8e37c5e3a5 100644 --- a/docs/shared/packages/nest/nest-plugin.md +++ b/docs/shared/packages/nest/nest-plugin.md @@ -203,4 +203,4 @@ Bundling dependencies is typically not recommended for Node applications. ## More Documentation -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/shared/packages/node/node-plugin.md b/docs/shared/packages/node/node-plugin.md index 07f2fe56a0..247ad0a988 100644 --- a/docs/shared/packages/node/node-plugin.md +++ b/docs/shared/packages/node/node-plugin.md @@ -93,5 +93,5 @@ For additional information on how to debug Node applications, see the [Node.js d ## More Documentation -- [Using Cypress](/technologies/test-tools/cypress/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Cypress](/technologies/test-tools/cypress/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/shared/packages/react-native/react-native-plugin.md b/docs/shared/packages/react-native/react-native-plugin.md index deb7e5f9a8..6da064eaef 100644 --- a/docs/shared/packages/react-native/react-native-plugin.md +++ b/docs/shared/packages/react-native/react-native-plugin.md @@ -194,5 +194,5 @@ The build artifacts will be located under `/android/app/build`. ## More Documentation -- [Using Detox](/technologies/test-tools/detox/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Detox](/technologies/test-tools/detox/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/shared/packages/react/react-plugin.md b/docs/shared/packages/react/react-plugin.md index 067dc0cab3..d8b4c80dc6 100644 --- a/docs/shared/packages/react/react-plugin.md +++ b/docs/shared/packages/react/react-plugin.md @@ -136,6 +136,6 @@ The library in `dist` is publishable to npm or a private registry. ## More Documentation - [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial) -- [Using Cypress](/technologies/test-tools/cypress/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Cypress](/technologies/test-tools/cypress/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) - [Using Storybook](/technologies/test-tools/storybook/recipes/overview-react) diff --git a/docs/shared/packages/rspack/rspack-plugin.md b/docs/shared/packages/rspack/rspack-plugin.md index a3d35f2ca9..caf37242e3 100644 --- a/docs/shared/packages/rspack/rspack-plugin.md +++ b/docs/shared/packages/rspack/rspack-plugin.md @@ -62,7 +62,7 @@ The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTa ### Generate a new project using Rspack -You can generate a [React](/technologies/react/api) application that uses Rspack. The [`@nx/react:app`](/technologies/react/api/generators/application) generator accepts the `bundler` option, where you can pass `rspack`. This will generate a new application configured to use Rspack, and it will also install all the necessary dependencies, including the `@nx/rspack` plugin. +You can generate a [React](/technologies/react/introduction) application that uses Rspack. The [`@nx/react:app`](/technologies/react/api/generators/application) generator accepts the `bundler` option, where you can pass `rspack`. This will generate a new application configured to use Rspack, and it will also install all the necessary dependencies, including the `@nx/rspack` plugin. To generate a React application using Rspack, run the following: diff --git a/docs/shared/packages/storybook/best-practices.md b/docs/shared/packages/storybook/best-practices.md index 3fc3b5c232..3a101eed01 100644 --- a/docs/shared/packages/storybook/best-practices.md +++ b/docs/shared/packages/storybook/best-practices.md @@ -7,7 +7,7 @@ description: The purpose of this guide is to help you set up Storybook in your N ## Purpose of this guide -The purpose of this guide is to help you [set up Storybook in your Nx workspace](/technologies/test-tools/storybook/api) so that you can get the most out of Nx and its powerful capabilities. +The purpose of this guide is to help you [set up Storybook in your Nx workspace](/technologies/test-tools/storybook/introduction) so that you can get the most out of Nx and its powerful capabilities. ## When to use Storybook @@ -31,7 +31,7 @@ First, let’s see what Nx offers, when you are in the process of developing a p #### Configuration generation -You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/technologies/test-tools/storybook/api/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` package overview page](/technologies/test-tools/storybook/api#generating-storybook-configuration). With Nx, you configure Storybook for each individual project. +You can generate the Storybook configuration files and settings using the Nx [`@nx/storybook:configuration` generator](/technologies/test-tools/storybook/api/generators/configuration). You can read more about configuring Storybook with Nx in our [`@nx/storybook` introduction page](/technologies/test-tools/storybook/introduction#generating-storybook-configuration). With Nx, you configure Storybook for each individual project. #### Stories generation @@ -45,7 +45,7 @@ If your project is not configured yet, check out one of these guides: - [Set up Storybook for Vue Projects](/technologies/test-tools/storybook/recipes/overview-vue) -If your project is [already configured](/technologies/test-tools/storybook/api), you can use the `stories` generator: +If your project is [already configured](/technologies/test-tools/storybook/introduction), you can use the `stories` generator: - [React (and Next.js) stories generator](/technologies/react/api/generators/stories) @@ -71,7 +71,7 @@ You can set up your interaction tests to run as part of your CI. You can read mo #### Serve -When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/technologies/test-tools/storybook/api#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/technologies/test-tools/storybook/api/executors/storybook) and [build](/technologies/test-tools/storybook/api/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack). +When you are configuring Storybook, Nx [adds a serve and a build target for Storybook](/technologies/test-tools/storybook/introduction#generating-storybook-configuration) in your `project.json`, as we explained above. You can use these targets to [serve](/technologies/test-tools/storybook/api/executors/storybook) and [build](/technologies/test-tools/storybook/api/executors/build) storybook locally, and also in production. Cypress will also use these targets when firing up the e2e tests. While developing, you can serve your Storybooks locally to see if your components work and look as expected. This can help you and speed up the development and debugging process (no need to fire up a complex dev stack). #### Build and deploy @@ -146,4 +146,4 @@ If you have any questions or suggestions, please feel free to reach out to us on ### Nx & Storybook documentation -You can find all Storybook-related Nx documentation in the [packages page](/technologies/test-tools/storybook/api). +You can find all Storybook-related Nx documentation in the [packages page](/technologies/test-tools/storybook/introduction). diff --git a/docs/shared/packages/vite/vite-plugin.md b/docs/shared/packages/vite/vite-plugin.md index 4743814af9..be33cd7dfb 100644 --- a/docs/shared/packages/vite/vite-plugin.md +++ b/docs/shared/packages/vite/vite-plugin.md @@ -86,7 +86,7 @@ The `buildTargetName`, `previewTargetName`, `testTargetName`, `serveTargetName` ### Generate a new project using Vite -You can generate a [React](/technologies/react/api) application or library or a [Web](/reference/core-api/web) application that uses Vite.js. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/react:lib`](/technologies/react/api/generators/library) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin. +You can generate a [React](/technologies/react/introduction) application or library or a [Web](/reference/core-api/web) application that uses Vite.js. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/react:lib`](/technologies/react/api/generators/library) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `vite`. This will generate a new application configured to use Vite.js, and it will also install all the necessary dependencies, including the `@nx/vite` plugin. To generate a React application using Vite.js, run the following: diff --git a/docs/shared/packages/web/web-plugin.md b/docs/shared/packages/web/web-plugin.md index 31cb615395..c59f5953ad 100644 --- a/docs/shared/packages/web/web-plugin.md +++ b/docs/shared/packages/web/web-plugin.md @@ -44,12 +44,12 @@ The application uses no framework and generates with web components. You can add To start the application in development mode, run `nx serve my-new-app`. {% callout type="note" title="React" %} -If you are looking to add a React application, check out the [React plugin](/technologies/react/api). +If you are looking to add a React application, check out the [React plugin](/technologies/react/introduction). {% /callout %} ### Creating Libraries -To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/technologies/typescript/api) plugin. +To create a generic TypeScript library (i.e. non-framework specific), use the [`@nx/js`](/technologies/typescript/introduction) plugin. ```shell nx g @nx/js:lib libs/my-new-lib @@ -107,5 +107,5 @@ The library in `dist` is publishable to npm or a private registry. ## More Documentation -- [Using Cypress](/technologies/test-tools/cypress/api) -- [Using Jest](/technologies/test-tools/jest/api) +- [Using Cypress](/technologies/test-tools/cypress/introduction) +- [Using Jest](/technologies/test-tools/jest/introduction) diff --git a/docs/shared/packages/webpack/plugin-overview.md b/docs/shared/packages/webpack/plugin-overview.md index aff498aa2d..6d11528d6d 100644 --- a/docs/shared/packages/webpack/plugin-overview.md +++ b/docs/shared/packages/webpack/plugin-overview.md @@ -76,7 +76,7 @@ The `buildTargetName`, `previewTargetName`, `serveTargetName` and `serveStaticTa ## Generate a new project using Webpack -You can generate a [React](/technologies/react/api) application or a [Web](/reference/core-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/node:app`](/technologies/node/api/generators/application) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin. +You can generate a [React](/technologies/react/introduction) application or a [Web](/reference/core-api/web) application that uses Webpack in an existing Nx workspace. The [`@nx/react:app`](/technologies/react/api/generators/application), [`@nx/node:app`](/technologies/node/api/generators/application) and [`@nx/web:app`](/reference/core-api/web/generators/application) generators accept the `bundler` option, where you can pass `webpack`. This will generate a new application configured to use Webpack, and it will also install all the necessary dependencies, including the `@nx/webpack` plugin. To generate a React application using Webpack, run the following: diff --git a/docs/shared/recipes/add-stack/add-express.md b/docs/shared/recipes/add-stack/add-express.md index fd72c0eca4..394eb7dc3c 100644 --- a/docs/shared/recipes/add-stack/add-express.md +++ b/docs/shared/recipes/add-stack/add-express.md @@ -91,6 +91,6 @@ Now when you serve your API, you'll see the content from the library being displ ## More Documentation -- [@nx/express](/technologies/node/express/api) -- [@nx/js](/technologies/typescript/api) +- [@nx/express](/technologies/node/express/introduction) +- [@nx/js](/technologies/typescript/introduction) - [Express](https://expressjs.com/) diff --git a/docs/shared/recipes/add-stack/add-fastify.md b/docs/shared/recipes/add-stack/add-fastify.md index 594aa76884..db7c37a814 100644 --- a/docs/shared/recipes/add-stack/add-fastify.md +++ b/docs/shared/recipes/add-stack/add-fastify.md @@ -93,7 +93,7 @@ Now when you serve your API, you'll see the content from the library being displ ## More Documentation -- [@nx/node](/technologies/node/api) +- [@nx/node](/technologies/node/introduction) - [Using Mongo with Fastify](/showcase/example-repos/mongo-fastify) - [Using Redis with Fastify](/showcase/example-repos/redis-fastify) - [Using Postgres with Fastify](/showcase/example-repos/postgres-fastify) diff --git a/docs/shared/recipes/add-stack/add-lit.md b/docs/shared/recipes/add-stack/add-lit.md index 3cb9a8d04f..5dcdebc326 100644 --- a/docs/shared/recipes/add-stack/add-lit.md +++ b/docs/shared/recipes/add-stack/add-lit.md @@ -224,6 +224,6 @@ Now when you serve your application, you'll see the content from the library bei ## More Documentation -- [@nx/esbuild](/technologies/build-tools/esbuild/api) -- [@nx/js](/technologies/typescript/api) +- [@nx/esbuild](/technologies/build-tools/esbuild/introduction) +- [@nx/js](/technologies/typescript/introduction) - [Lit](https://lit.dev/) diff --git a/docs/shared/recipes/add-stack/add-solid.md b/docs/shared/recipes/add-stack/add-solid.md index 3ccddb863d..b3ce30f29e 100644 --- a/docs/shared/recipes/add-stack/add-solid.md +++ b/docs/shared/recipes/add-stack/add-solid.md @@ -321,7 +321,7 @@ Now when you serve your application, you'll see the content from the library bei ## More Documentation -- [@nx/vite](/technologies/build-tools/vite/api) -- [@nx/js](/technologies/typescript/api) +- [@nx/vite](/technologies/build-tools/vite/introduction) +- [@nx/js](/technologies/typescript/introduction) - [@nx/web](/reference/core-api/web) - [Solid](https://www.solidjs.com/) diff --git a/docs/shared/recipes/add-stack/add-svelte.md b/docs/shared/recipes/add-stack/add-svelte.md index c78cc3f5b2..fd2132ac5a 100644 --- a/docs/shared/recipes/add-stack/add-svelte.md +++ b/docs/shared/recipes/add-stack/add-svelte.md @@ -330,6 +330,6 @@ To serve the application at `http://localhost:4200`. A larger example including libraries, test and more is available at [Nx Svelte Example](https://github.com/nrwl/nx-recipes/tree/main/svelte) on GitHub. -- [Nx Vite Plugin](/technologies/build-tools/vite/api) +- [Nx Vite Plugin](/technologies/build-tools/vite/introduction) - [Vite](https://vitejs.dev/) - [Svelte](https://svelte.dev/) 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 0dbb5b5ba9..fbbc1bd20a 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 @@ -17,7 +17,7 @@ Ensure that Nx is installed in your monorepo. Check out the [Installation docs]( ### Add the JavaScript Plugin -The [`@nx/js` package](/technologies/typescript/api) is required for Nx Release to manage and release JavaScript packages. Add it if it is not already installed: +The [`@nx/js` package](/technologies/typescript/introduction) is required for Nx Release to manage and release JavaScript packages. Add it if it is not already installed: ```shell {% skipRescope=true %} nx add @nx/js diff --git a/docs/shared/recipes/storybook/angular-configuring-styles.md b/docs/shared/recipes/storybook/angular-configuring-styles.md index 7e948574a3..ec832fd7f1 100644 --- a/docs/shared/recipes/storybook/angular-configuring-styles.md +++ b/docs/shared/recipes/storybook/angular-configuring-styles.md @@ -6,7 +6,7 @@ description: This document explains how to configure styles and preprocessor opt # Configuring styles and preprocessor options for Angular projects with a Storybook configuration {% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/technologies/test-tools/storybook/api), specifically regarding [Angular projects that are using Storybook](/technologies/test-tools/storybook/recipes/overview-angular). +This documentation page contains information about the [Storybook plugin](/technologies/test-tools/storybook/introduction), specifically regarding [Angular projects that are using Storybook](/technologies/test-tools/storybook/recipes/overview-angular). {% /callout %} Angular supports including extra entry-point files for styles. Also, in case you use Sass, you can add extra base paths that will be checked for imports. In your project's `project.json` file you can use the `styles` and `stylePreprocessorOptions` properties in your `storybook` and `build-storybook` target `options`, as you would in your Storybook or your Angular configurations. If your project is an application, you can add these extra options in your `build` target. Your `storybook` and `build-storybook` `browserTarget` are going to be pointing to the `build` target, so they will pick up these styles from there. Check out the [Angular Workspace Configuration](https://angular.dev/reference/configs/workspace-config#styles-and-scripts-configuration) documentation for more information. You can also check the [official Storybook for Angular documentation](https://storybook.js.org/docs/angular/configure/styling-and-css) on working with styles and CSS. diff --git a/docs/shared/recipes/storybook/angular-storybook-compodoc.md b/docs/shared/recipes/storybook/angular-storybook-compodoc.md index ff9a22402c..1610b986f1 100644 --- a/docs/shared/recipes/storybook/angular-storybook-compodoc.md +++ b/docs/shared/recipes/storybook/angular-storybook-compodoc.md @@ -6,7 +6,7 @@ description: This guide explains how to set up Compodoc for Storybook on Angular # Set up Compodoc for Storybook on Nx {% callout type="note" title="Note" %} -This documentation page contains information about the [Storybook plugin](/technologies/test-tools/storybook/api), specifically regarding [Angular projects that are using Storybook](/technologies/test-tools/storybook/recipes/overview-angular). +This documentation page contains information about the [Storybook plugin](/technologies/test-tools/storybook/introduction), specifically regarding [Angular projects that are using Storybook](/technologies/test-tools/storybook/recipes/overview-angular). {% /callout %} {% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/storybook-compodoc-angular" /%} diff --git a/docs/shared/recipes/storybook/interaction-tests.md b/docs/shared/recipes/storybook/interaction-tests.md index 9ade0a579a..e8ec707f17 100644 --- a/docs/shared/recipes/storybook/interaction-tests.md +++ b/docs/shared/recipes/storybook/interaction-tests.md @@ -20,7 +20,7 @@ You can read more about Storybook interaction tests in the following sections of - [The `play` function](https://storybook.js.org/docs/react/writing-stories/play-function) {% callout type="warning" title="Set up Storybook in your workspace" %} -You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/api) to get started. +You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/introduction) to get started. {% /callout %} ## Setup Storybook Interaction Tests @@ -62,7 +62,7 @@ nx g @nx/storybook:configuration project-name --interactionTests=true This command will: -- [Set up Storybook for your project](/technologies/test-tools/storybook/api) - including the `@storybook/addon-interactions` addon. +- [Set up Storybook for your project](/technologies/test-tools/storybook/introduction) - including the `@storybook/addon-interactions` addon. - Add a `play` function to your stories. - Install the necessary dependencies. - [Infer the task](/concepts/inferred-tasks) `test-storybook` for the project, which has a command to invoke the Storybook test runner. diff --git a/docs/shared/recipes/storybook/plugin-angular.md b/docs/shared/recipes/storybook/plugin-angular.md index c5cab859e6..bdca4efc42 100644 --- a/docs/shared/recipes/storybook/plugin-angular.md +++ b/docs/shared/recipes/storybook/plugin-angular.md @@ -8,7 +8,7 @@ description: This guide explains how to set up Storybook for Angular projects in This guide will walk you through setting up [Storybook](https://storybook.js.org) for Angular projects in your Nx workspace. {% callout type="warning" title="Set up Storybook in your workspace" %} -You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/api) to get started. +You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/introduction) to get started. {% /callout %} ## Generate Storybook Configuration for an Angular project diff --git a/docs/shared/recipes/storybook/plugin-react.md b/docs/shared/recipes/storybook/plugin-react.md index 09fa0552b5..1460229e16 100644 --- a/docs/shared/recipes/storybook/plugin-react.md +++ b/docs/shared/recipes/storybook/plugin-react.md @@ -8,7 +8,7 @@ description: This guide explains how to set up Storybook for React projects in y This guide will walk you through setting up [Storybook](https://storybook.js.org) for React projects in your Nx workspace. {% callout type="warning" title="Set up Storybook in your workspace" %} -You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/api) to get started. +You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/introduction) to get started. {% /callout %} ## Generate Storybook Configuration for a React project diff --git a/docs/shared/recipes/storybook/plugin-vue.md b/docs/shared/recipes/storybook/plugin-vue.md index bb76ccaf75..8a822f05e4 100644 --- a/docs/shared/recipes/storybook/plugin-vue.md +++ b/docs/shared/recipes/storybook/plugin-vue.md @@ -8,7 +8,7 @@ description: This guide explains how to set up Storybook for Vue and Nuxt projec This guide will walk you through setting up [Storybook](https://storybook.js.org) for Vue and Nuxt projects in your Nx workspace. {% callout type="warning" title="Set up Storybook in your workspace" %} -You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/api) to get started. +You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/technologies/test-tools/storybook/introduction) to get started. {% /callout %} ## Generate Storybook Configuration for a Vue or Nuxt project