docs(misc): update URls that should point to intro pages rather than API index pages (#31531)
This PR fixes an issue introduced when we removed `/nx-api` pages: https://github.com/nrwl/nx/pull/31453. Most of the old `/nx-api/<plugin>` URLs should now go to `/technologies/<plugin>/introduction`, since those pages contain what was on the previous "overview" pages. The only exception are places where we explicitly link to `.../api/{generators,executors,migrations}` URLs, and the following three blog posts that we want users to land on the API index. - https://github.com/nrwl/nx/blob/master/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md?plain=1#L132 (https://nx.dev/blog/the-react-cli-you-always-wanted-but-didnt-know-about) - https://github.com/nrwl/nx/blob/master/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md?plain=1#L245 (https://nx.dev/blog/what-is-new-in-nx-13-10) - https://github.com/nrwl/nx/blob/master/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md?plain=1#L253 (https://nx.dev/blog/nx-v14-is-out-here-is-all-you-need-to-know)
This commit is contained in:
Jack Hsu
GitHub
parent
df4f1363f7
commit
28b48ad1f3
@ -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/<packagename>`. 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/<packagename>`. 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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
@ -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/<package-name>` 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/<package-name>` 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:
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -220,7 +220,7 @@ And you'll then have access to Nx generators so you can create Vue applications,
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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" /%}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -194,5 +194,5 @@ The build artifacts will be located under `<your app folder>/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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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" %}
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
@ -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**
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -194,5 +194,5 @@ The build artifacts will be located under `<your app folder>/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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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/)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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/)
|
||||
|
||||
@ -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/)
|
||||
|
||||
@ -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/)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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" /%}
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user