docs(core): update getting started pages
This commit is contained in:
parent
8ef39c1140
commit
d2d18a6cb4
@ -35,7 +35,7 @@ npx create-nx-workspace
|
|||||||
npx nx init
|
npx nx init
|
||||||
```
|
```
|
||||||
|
|
||||||
to add Nx to your existing workspace to get faster task scheduling, caching and more. More [in the docs](https://nx.dev/getting-started/intro#try-nx-yourself).
|
to add Nx to your existing workspace to get faster task scheduling, caching and more. More [in the docs](https://nx.dev/getting-started/intro).
|
||||||
|
|
||||||
## Learn about CI with Nx Cloud
|
## Learn about CI with Nx Cloud
|
||||||
|
|
||||||
|
|||||||
@ -101,7 +101,7 @@ By following these steps, you've successfully used `@nx/netlify` serverless func
|
|||||||
|
|
||||||
### Wrapping up
|
### Wrapping up
|
||||||
|
|
||||||
Never used Nx before? Learn more about Nx [here](/getting-started/why-nx).
|
Never used Nx before? Learn more about Nx [here](/getting-started/intro).
|
||||||
[Official recipe from Nx](/technologies/node/recipes/node-serverless-functions-netlify)
|
[Official recipe from Nx](/technologies/node/recipes/node-serverless-functions-netlify)
|
||||||
[Github example](https://github.com/ndcunningham/nx-netlify-serverless)
|
[Github example](https://github.com/ndcunningham/nx-netlify-serverless)
|
||||||
|
|
||||||
|
|||||||
@ -148,7 +148,7 @@ Nx’s modular design helps as each plugin is responsible for a particular area
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
_(Source:_ [_/getting-started/why-nx_](/getting-started/why-nx)_)_
|
_(Source:_ [_/getting-started/intro_](/getting-started/intro)_)_
|
||||||
|
|
||||||
These plugins are usually technology-specific, like a plugin to help you manage React, Next, Remix, or Angular projects and tooling like ESLint, Cypress, Playwright, Vite, Jest, and so on. There are no limits as you can [create your own](/extending-nx/intro/getting-started). They are **optional**, in that you can use Nx and React and set everything up on your own. But it might be worth relying on them for some better DX and automation, such as the update mechanism we’re currently looking at.
|
These plugins are usually technology-specific, like a plugin to help you manage React, Next, Remix, or Angular projects and tooling like ESLint, Cypress, Playwright, Vite, Jest, and so on. There are no limits as you can [create your own](/extending-nx/intro/getting-started). They are **optional**, in that you can use Nx and React and set everything up on your own. But it might be worth relying on them for some better DX and automation, such as the update mechanism we’re currently looking at.
|
||||||
|
|
||||||
|
|||||||
@ -11,7 +11,7 @@ In the ever-evolving web development landscape, efficiency and modularity have b
|
|||||||
|
|
||||||
Qwik is a modern web framework that focuses on application performance by reducing the amount of JavaScript that needs to be shipped to the browser. You can learn more about how Qwik achieves this with [Resumability in their docs](https://qwik.dev/docs/concepts/resumable/).
|
Qwik is a modern web framework that focuses on application performance by reducing the amount of JavaScript that needs to be shipped to the browser. You can learn more about how Qwik achieves this with [Resumability in their docs](https://qwik.dev/docs/concepts/resumable/).
|
||||||
|
|
||||||
Nx is a powerful tool that helps you build extensible and maintainable codebases that scale as your application and team grows. Nx utilises computation cache and workspace analysis to ensure maximum efficiency and developer experience. You can [learn more about Nx here](/getting-started/why-nx).
|
Nx is a powerful tool that helps you build extensible and maintainable codebases that scale as your application and team grows. Nx utilises computation cache and workspace analysis to ensure maximum efficiency and developer experience. You can [learn more about Nx here](/getting-started/intro).
|
||||||
|
|
||||||
In this blog post, we'll explore how to combine the strengths of Nx and Qwik to create a todo app. To do this, we'll take advantage of an Nx Plugin that was created by the Qwikifiers team to maximise the integration between Qwik and Nx, called [`qwik-nx`](https://github.com/qwikifiers/qwik-nx).
|
In this blog post, we'll explore how to combine the strengths of Nx and Qwik to create a todo app. To do this, we'll take advantage of an Nx Plugin that was created by the Qwikifiers team to maximise the integration between Qwik and Nx, called [`qwik-nx`](https://github.com/qwikifiers/qwik-nx).
|
||||||
|
|
||||||
|
|||||||
@ -17,7 +17,7 @@ The 3rd edition of [Nx Conf](/conf), this year live from New York City. If you m
|
|||||||
|
|
||||||
{% youtube src="https://www.youtube.com/watch?v=WSqivWlEDFw" /%}
|
{% youtube src="https://www.youtube.com/watch?v=WSqivWlEDFw" /%}
|
||||||
|
|
||||||
Juri Strumpflohner (me 😅) opens the keynote. He focuses on the Nx ecosystem, how it is [much more than monorepos](/getting-started/why-nx) by helping you integrate your framework of choice (whether that is Angular, React, or Vue) with tooling such as ESLint, Playwright, Cypress, Webpack, ESBuild, Vite etc.
|
Juri Strumpflohner (me 😅) opens the keynote. He focuses on the Nx ecosystem, how it is [much more than monorepos](/getting-started/intro) by helping you integrate your framework of choice (whether that is Angular, React, or Vue) with tooling such as ESLint, Playwright, Cypress, Webpack, ESBuild, Vite etc.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|||||||
@ -318,7 +318,7 @@ We also poured a lot of [effort into the docs](/getting-started/intro). We restr
|
|||||||
- [**Tutorials**](/getting-started/tutorials) — for when you just want to sit down and follow along, step by step to learn how to use Nx in a certain context.
|
- [**Tutorials**](/getting-started/tutorials) — for when you just want to sit down and follow along, step by step to learn how to use Nx in a certain context.
|
||||||
- [**Reference**](/reference) and [**API docs**](/reference/core-api) — pure, raw and to the point.
|
- [**Reference**](/reference) and [**API docs**](/reference/core-api) — pure, raw and to the point.
|
||||||
|
|
||||||
We created a brand new ["Why Nx"](/getting-started/why-nx) page explaining the overall architecture of Nx including a [brand new video](https://www.youtube.com/watch?v=-_4WMl-Fn0w) giving you a holistic overview of what Nx is capable of.
|
We created a brand new ["Why Nx"](/getting-started/intro) page explaining the overall architecture of Nx including a [brand new video](https://www.youtube.com/watch?v=-_4WMl-Fn0w) giving you a holistic overview of what Nx is capable of.
|
||||||
|
|
||||||
We also refreshed our [entry pages](/getting-started/intro), including dedicated examples of using Nx with popular stacks:
|
We also refreshed our [entry pages](/getting-started/intro), including dedicated examples of using Nx with popular stacks:
|
||||||
|
|
||||||
|
|||||||
@ -60,7 +60,7 @@ Beyond just mitigating risk of changing dependencies that can cause runtime erro
|
|||||||
|
|
||||||
If you sprinkle [Nx Cloud](/ci/intro/why-nx-cloud) on top - you can ensure your CI remains fast as you scale out your application through [Nx Replay](/ci/features/remote-cache#use-remote-caching-nx-replay) and [Nx Agents](/ci/features/distribute-task-execution). Increased scalability does not come with an increased maintenance cost of managing CI machines manually thanks to declarative [config files](/ci/recipes/set-up/monorepo-ci-github-actions).
|
If you sprinkle [Nx Cloud](/ci/intro/why-nx-cloud) on top - you can ensure your CI remains fast as you scale out your application through [Nx Replay](/ci/features/remote-cache#use-remote-caching-nx-replay) and [Nx Agents](/ci/features/distribute-task-execution). Increased scalability does not come with an increased maintenance cost of managing CI machines manually thanks to declarative [config files](/ci/recipes/set-up/monorepo-ci-github-actions).
|
||||||
|
|
||||||
You can learn more about Why to use Nx beyond Module Federation support [here](/getting-started/why-nx).
|
You can learn more about Why to use Nx beyond Module Federation support [here](/getting-started/intro).
|
||||||
|
|
||||||
## Setting up a Super App with Nx
|
## Setting up a Super App with Nx
|
||||||
|
|
||||||
|
|||||||
@ -140,7 +140,7 @@ And this is just the beginning. While Nx already understands your local monorepo
|
|||||||
|
|
||||||
## Try It Out Yourself
|
## Try It Out Yourself
|
||||||
|
|
||||||
If you want to test this out, [create a new Nx workspace](/getting-started/intro#try-nx-yourself) and make sure you have [Nx Console](/getting-started/editor-setup) installed or updated to the latest version.
|
If you want to test this out, [create a new Nx workspace](/getting-started/start-new-project) and make sure you have [Nx Console](/getting-started/editor-setup) installed or updated to the latest version.
|
||||||
|
|
||||||
> If you already have an existing NPM/Yarn/PNPM workspace, you can add Nx with `nx init`. Check out [our free course](/courses/pnpm-nx-next) to learn more.
|
> If you already have an existing NPM/Yarn/PNPM workspace, you can add Nx with `nx init`. Check out [our free course](/courses/pnpm-nx-next) to learn more.
|
||||||
|
|
||||||
|
|||||||
@ -16,4 +16,4 @@ This video gives you a birds-eye view of Nx in ~10 minutes. It covers topics suc
|
|||||||
- Abstracting low-level configs
|
- Abstracting low-level configs
|
||||||
- Automated Code Updates
|
- Automated Code Updates
|
||||||
|
|
||||||
Read more [in our docs](/getting-started/why-nx)
|
Read more [in our docs](/getting-started/intro)
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
"name": "Intro",
|
"name": "Intro",
|
||||||
"description": "Learn about basic Nx Cloud knowledge.",
|
"description": "Learn about basic Nx Cloud knowledge.",
|
||||||
"mediaImage": "",
|
"mediaImage": "",
|
||||||
"file": "",
|
"file": "nx-cloud/intro/ci-with-nx",
|
||||||
"itemList": [
|
"itemList": [
|
||||||
{
|
{
|
||||||
"id": "ci-with-nx",
|
"id": "ci-with-nx",
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
"isExternal": false,
|
"isExternal": false,
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"name": "Intro to Nx",
|
"name": "Introduction",
|
||||||
"path": "/getting-started/intro",
|
"path": "/getting-started/intro",
|
||||||
"id": "intro",
|
"id": "intro",
|
||||||
"isExternal": false,
|
"isExternal": false,
|
||||||
@ -25,9 +25,17 @@
|
|||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Why Nx?",
|
"name": "Start a new project",
|
||||||
"path": "/getting-started/why-nx",
|
"path": "/getting-started/start-new-project",
|
||||||
"id": "why-nx",
|
"id": "start-new-project",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Add to existing project",
|
||||||
|
"path": "/getting-started/adding-to-existing",
|
||||||
|
"id": "adding-to-existing",
|
||||||
"isExternal": false,
|
"isExternal": false,
|
||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
@ -40,6 +48,14 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "AI Integration",
|
||||||
|
"path": "/getting-started/ai-integration",
|
||||||
|
"id": "ai-integration",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Tutorials",
|
"name": "Tutorials",
|
||||||
"path": "/getting-started/tutorials",
|
"path": "/getting-started/tutorials",
|
||||||
|
|||||||
@ -4,11 +4,11 @@
|
|||||||
"name": "Getting Started",
|
"name": "Getting Started",
|
||||||
"description": "Get started with basic information, concepts and tutorials.",
|
"description": "Get started with basic information, concepts and tutorials.",
|
||||||
"mediaImage": "",
|
"mediaImage": "",
|
||||||
"file": "",
|
"file": "shared/getting-started/quick-start",
|
||||||
"itemList": [
|
"itemList": [
|
||||||
{
|
{
|
||||||
"id": "intro",
|
"id": "intro",
|
||||||
"name": "Intro to Nx",
|
"name": "Introduction",
|
||||||
"description": "",
|
"description": "",
|
||||||
"mediaImage": "",
|
"mediaImage": "",
|
||||||
"file": "shared/getting-started/intro",
|
"file": "shared/getting-started/intro",
|
||||||
@ -29,16 +29,27 @@
|
|||||||
"tags": []
|
"tags": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "why-nx",
|
"id": "start-new-project",
|
||||||
"name": "Why Nx?",
|
"name": "Start a new project",
|
||||||
"description": "",
|
"description": "",
|
||||||
"mediaImage": "",
|
"mediaImage": "",
|
||||||
"file": "shared/getting-started/why-nx",
|
"file": "shared/getting-started/start-new-project",
|
||||||
"itemList": [],
|
"itemList": [],
|
||||||
"isExternal": false,
|
"isExternal": false,
|
||||||
"path": "/getting-started/why-nx",
|
"path": "/getting-started/start-new-project",
|
||||||
"tags": []
|
"tags": []
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "adding-to-existing",
|
||||||
|
"name": "Add to existing project",
|
||||||
|
"description": "",
|
||||||
|
"mediaImage": "",
|
||||||
|
"file": "shared/getting-started/start-with-existing-project",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/getting-started/adding-to-existing",
|
||||||
|
"tags": ["init"]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "editor-setup",
|
"id": "editor-setup",
|
||||||
"name": "Editor Integration",
|
"name": "Editor Integration",
|
||||||
@ -50,6 +61,17 @@
|
|||||||
"path": "/getting-started/editor-setup",
|
"path": "/getting-started/editor-setup",
|
||||||
"tags": ["editor-setup"]
|
"tags": ["editor-setup"]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "ai-integration",
|
||||||
|
"name": "AI Integration",
|
||||||
|
"description": "Learn about how to integrate Nx with your favorite AI assistant.",
|
||||||
|
"mediaImage": "",
|
||||||
|
"file": "shared/getting-started/ai-setup",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/getting-started/ai-integration",
|
||||||
|
"tags": ["ai-integration"]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "tutorials",
|
"id": "tutorials",
|
||||||
"name": "Tutorials",
|
"name": "Tutorials",
|
||||||
@ -113,7 +135,7 @@
|
|||||||
},
|
},
|
||||||
"/getting-started/intro": {
|
"/getting-started/intro": {
|
||||||
"id": "intro",
|
"id": "intro",
|
||||||
"name": "Intro to Nx",
|
"name": "Introduction",
|
||||||
"description": "",
|
"description": "",
|
||||||
"mediaImage": "",
|
"mediaImage": "",
|
||||||
"file": "shared/getting-started/intro",
|
"file": "shared/getting-started/intro",
|
||||||
@ -133,17 +155,28 @@
|
|||||||
"path": "/getting-started/installation",
|
"path": "/getting-started/installation",
|
||||||
"tags": []
|
"tags": []
|
||||||
},
|
},
|
||||||
"/getting-started/why-nx": {
|
"/getting-started/start-new-project": {
|
||||||
"id": "why-nx",
|
"id": "start-new-project",
|
||||||
"name": "Why Nx?",
|
"name": "Start a new project",
|
||||||
"description": "",
|
"description": "",
|
||||||
"mediaImage": "",
|
"mediaImage": "",
|
||||||
"file": "shared/getting-started/why-nx",
|
"file": "shared/getting-started/start-new-project",
|
||||||
"itemList": [],
|
"itemList": [],
|
||||||
"isExternal": false,
|
"isExternal": false,
|
||||||
"path": "/getting-started/why-nx",
|
"path": "/getting-started/start-new-project",
|
||||||
"tags": []
|
"tags": []
|
||||||
},
|
},
|
||||||
|
"/getting-started/adding-to-existing": {
|
||||||
|
"id": "adding-to-existing",
|
||||||
|
"name": "Add to existing project",
|
||||||
|
"description": "",
|
||||||
|
"mediaImage": "",
|
||||||
|
"file": "shared/getting-started/start-with-existing-project",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/getting-started/adding-to-existing",
|
||||||
|
"tags": ["init"]
|
||||||
|
},
|
||||||
"/getting-started/editor-setup": {
|
"/getting-started/editor-setup": {
|
||||||
"id": "editor-setup",
|
"id": "editor-setup",
|
||||||
"name": "Editor Integration",
|
"name": "Editor Integration",
|
||||||
@ -155,6 +188,17 @@
|
|||||||
"path": "/getting-started/editor-setup",
|
"path": "/getting-started/editor-setup",
|
||||||
"tags": ["editor-setup"]
|
"tags": ["editor-setup"]
|
||||||
},
|
},
|
||||||
|
"/getting-started/ai-integration": {
|
||||||
|
"id": "ai-integration",
|
||||||
|
"name": "AI Integration",
|
||||||
|
"description": "Learn about how to integrate Nx with your favorite AI assistant.",
|
||||||
|
"mediaImage": "",
|
||||||
|
"file": "shared/getting-started/ai-setup",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/getting-started/ai-integration",
|
||||||
|
"tags": ["ai-integration"]
|
||||||
|
},
|
||||||
"/getting-started/tutorials": {
|
"/getting-started/tutorials": {
|
||||||
"id": "tutorials",
|
"id": "tutorials",
|
||||||
"name": "Tutorials",
|
"name": "Tutorials",
|
||||||
|
|||||||
@ -1,4 +1,41 @@
|
|||||||
{
|
{
|
||||||
|
"init": [
|
||||||
|
{
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/getting-started/start-with-existing-project",
|
||||||
|
"id": "adding-to-existing",
|
||||||
|
"name": "Add to existing project",
|
||||||
|
"path": "/getting-started/adding-to-existing"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/adding-to-monorepo",
|
||||||
|
"id": "adding-to-monorepo",
|
||||||
|
"name": "NPM/Yarn/PNPM workspaces",
|
||||||
|
"path": "/recipes/adopting-nx/adding-to-monorepo"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/adding-to-existing-project",
|
||||||
|
"id": "adding-to-existing-project",
|
||||||
|
"name": "Add to any Project",
|
||||||
|
"path": "/recipes/adopting-nx/adding-to-existing-project"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/migration/migration-angular",
|
||||||
|
"id": "angular",
|
||||||
|
"name": "Migrating from Angular CLI",
|
||||||
|
"path": "/technologies/angular/migration/angular"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
|
||||||
|
"file": "generated/packages/nx/documents/init",
|
||||||
|
"id": "init",
|
||||||
|
"name": "init",
|
||||||
|
"path": "/reference/core-api/nx/documents/init"
|
||||||
|
}
|
||||||
|
],
|
||||||
"editor-setup": [
|
"editor-setup": [
|
||||||
{
|
{
|
||||||
"description": "Learn about Nx Console, an extension for VS Code and WebStorm. (formerly Editor Setup)",
|
"description": "Learn about Nx Console, an extension for VS Code and WebStorm. (formerly Editor Setup)",
|
||||||
@ -50,6 +87,15 @@
|
|||||||
"path": "/recipes/nx-console/console-migrate-ui"
|
"path": "/recipes/nx-console/console-migrate-ui"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"ai-integration": [
|
||||||
|
{
|
||||||
|
"description": "Learn about how to integrate Nx with your favorite AI assistant.",
|
||||||
|
"file": "shared/getting-started/ai-setup",
|
||||||
|
"id": "ai-integration",
|
||||||
|
"name": "AI Integration",
|
||||||
|
"path": "/getting-started/ai-integration"
|
||||||
|
}
|
||||||
|
],
|
||||||
"run-tasks": [
|
"run-tasks": [
|
||||||
{
|
{
|
||||||
"description": "Learn about the various ways you can use Nx to run tasks in your workspace.",
|
"description": "Learn about the various ways you can use Nx to run tasks in your workspace.",
|
||||||
@ -817,36 +863,6 @@
|
|||||||
"path": "/recipes/running-tasks/self-hosted-caching"
|
"path": "/recipes/running-tasks/self-hosted-caching"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"init": [
|
|
||||||
{
|
|
||||||
"description": "",
|
|
||||||
"file": "shared/migration/adding-to-monorepo",
|
|
||||||
"id": "adding-to-monorepo",
|
|
||||||
"name": "NPM/Yarn/PNPM workspaces",
|
|
||||||
"path": "/recipes/adopting-nx/adding-to-monorepo"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"description": "",
|
|
||||||
"file": "shared/migration/adding-to-existing-project",
|
|
||||||
"id": "adding-to-existing-project",
|
|
||||||
"name": "Add to any Project",
|
|
||||||
"path": "/recipes/adopting-nx/adding-to-existing-project"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"description": "",
|
|
||||||
"file": "shared/migration/migration-angular",
|
|
||||||
"id": "angular",
|
|
||||||
"name": "Migrating from Angular CLI",
|
|
||||||
"path": "/technologies/angular/migration/angular"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.",
|
|
||||||
"file": "generated/packages/nx/documents/init",
|
|
||||||
"id": "init",
|
|
||||||
"name": "init",
|
|
||||||
"path": "/reference/core-api/nx/documents/init"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"import": [
|
"import": [
|
||||||
{
|
{
|
||||||
"description": "",
|
"description": "",
|
||||||
|
|||||||
@ -10,7 +10,7 @@ src="https://www.youtube.com/embed/bwPkz4MrPDI?si=OLPUENWXLkQ9GRtR"
|
|||||||
title="Nx vs Angular CLI - The Showdown"
|
title="Nx vs Angular CLI - The Showdown"
|
||||||
width="100%" /%}
|
width="100%" /%}
|
||||||
|
|
||||||
Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/why-nx#how-does-nx-work). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project.
|
Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/intro#start-small-extend-as-you-grow). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project.
|
||||||
|
|
||||||
## TL;DR: Why should I use Nx for my Angular project?
|
## TL;DR: Why should I use Nx for my Angular project?
|
||||||
|
|
||||||
@ -397,9 +397,9 @@ Learn more about the [graph features here](/features/explore-graph).
|
|||||||
|
|
||||||
### Extensible and Customizable: Make it fit your own needs
|
### Extensible and Customizable: Make it fit your own needs
|
||||||
|
|
||||||
Nx is [built to be extensible](/getting-started/why-nx#how-does-nx-work). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors).
|
Nx is [built to be extensible](/getting-started/intro#start-small-extend-as-you-grow). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors).
|
||||||
|
|
||||||
And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/getting-started/intro#pick-your-stack).
|
And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/technologies).
|
||||||
|
|
||||||
## Migrate from the Angular CLI?
|
## Migrate from the Angular CLI?
|
||||||
|
|
||||||
|
|||||||
@ -12,9 +12,10 @@
|
|||||||
"name": "Getting Started",
|
"name": "Getting Started",
|
||||||
"id": "getting-started",
|
"id": "getting-started",
|
||||||
"description": "Get started with basic information, concepts and tutorials.",
|
"description": "Get started with basic information, concepts and tutorials.",
|
||||||
|
"file": "shared/getting-started/quick-start",
|
||||||
"itemList": [
|
"itemList": [
|
||||||
{
|
{
|
||||||
"name": "Intro to Nx",
|
"name": "Introduction",
|
||||||
"id": "intro",
|
"id": "intro",
|
||||||
"file": "shared/getting-started/intro"
|
"file": "shared/getting-started/intro"
|
||||||
},
|
},
|
||||||
@ -24,9 +25,15 @@
|
|||||||
"file": "shared/getting-started/installation"
|
"file": "shared/getting-started/installation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Why Nx?",
|
"name": "Start a new project",
|
||||||
"id": "why-nx",
|
"id": "start-new-project",
|
||||||
"file": "shared/getting-started/why-nx"
|
"file": "shared/getting-started/start-new-project"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Add to existing project",
|
||||||
|
"id": "adding-to-existing",
|
||||||
|
"tags": ["init"],
|
||||||
|
"file": "shared/getting-started/start-with-existing-project"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Editor Integration",
|
"name": "Editor Integration",
|
||||||
@ -35,6 +42,13 @@
|
|||||||
"tags": ["editor-setup"],
|
"tags": ["editor-setup"],
|
||||||
"file": "shared/getting-started/editor-setup"
|
"file": "shared/getting-started/editor-setup"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "AI Integration",
|
||||||
|
"description": "Learn about how to integrate Nx with your favorite AI assistant.",
|
||||||
|
"id": "ai-integration",
|
||||||
|
"tags": ["ai-integration"],
|
||||||
|
"file": "shared/getting-started/ai-setup"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Tutorials",
|
"name": "Tutorials",
|
||||||
"id": "tutorials",
|
"id": "tutorials",
|
||||||
@ -2487,6 +2501,7 @@
|
|||||||
"name": "Intro",
|
"name": "Intro",
|
||||||
"id": "intro",
|
"id": "intro",
|
||||||
"description": "Learn about basic Nx Cloud knowledge.",
|
"description": "Learn about basic Nx Cloud knowledge.",
|
||||||
|
"file": "nx-cloud/intro/ci-with-nx",
|
||||||
"itemList": [
|
"itemList": [
|
||||||
{
|
{
|
||||||
"name": "CI with Nx",
|
"name": "CI with Nx",
|
||||||
|
|||||||
@ -2,13 +2,17 @@
|
|||||||
|
|
||||||
Implementing an efficient CI setup for monorepos - while crucial - can be challenging and maintenance heavy. That is [not your fault, though](/ci/intro/why-nx-cloud). Nx Cloud comes with a series of features that help make CI for monorepos faster, more reliable and more cost-effective.
|
Implementing an efficient CI setup for monorepos - while crucial - can be challenging and maintenance heavy. That is [not your fault, though](/ci/intro/why-nx-cloud). Nx Cloud comes with a series of features that help make CI for monorepos faster, more reliable and more cost-effective.
|
||||||
|
|
||||||
## Core Features
|
## How Can Nx Improve Your CI Pipeline?
|
||||||
|
|
||||||
- Test only the code that might have been [affected](/ci/features/affected) by a PR
|
The benefits of Nx are not restricted to local development. Nx Cloud helps scale your project on CI by making it simple to create and maintain a pipeline that [eliminates wasted time](/ci/concepts/reduce-waste) and [efficiently parallelizes work](/ci/concepts/parallelization-distribution).
|
||||||
- Never run the same task on the same code twice with [remote caching](/ci/features/remote-cache)
|
|
||||||
- Efficiently [distribute task execution across multiple machines](/ci/features/distribute-task-execution)
|
Your CI pipeline with Nx can:
|
||||||
- Quickly troubleshoot errors that occur in CI
|
|
||||||
- Create a simple but powerful pipeline configuration that easily scales with your codebase
|
- Run only tasks [affected](/ci/features/affected) by that PR
|
||||||
|
- [Share the task cache](/ci/features/remote-cache) to dramatically speed up your PRs (Nx Replay)
|
||||||
|
- [Distribute task execution](/ci/features/distribute-task-execution) across multiple agent machines (Nx Agents)
|
||||||
|
- Automatically [split long e2e tasks](/ci/features/split-e2e-tasks) into smaller tasks (Atomizer)
|
||||||
|
- Identify and Re-run [Flaky Tasks](/ci/features/flaky-tasks)
|
||||||
|
|
||||||
## Try Nx Cloud Yourself!
|
## Try Nx Cloud Yourself!
|
||||||
|
|
||||||
|
|||||||
48
docs/shared/getting-started/ai-setup.md
Normal file
48
docs/shared/getting-started/ai-setup.md
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
---
|
||||||
|
title: Integrate Nx with your Coding Assistant
|
||||||
|
description: Set up Nx MCP server to give AI assistants deep workspace context, terminal integration, and enhanced development capabilities.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Integrate Nx with your Coding Assistant
|
||||||
|
|
||||||
|
Nx provides deep integration with AI coding assistants through the **Nx Model Context Protocol (MCP) server**, giving your AI assistant comprehensive understanding of your monorepo structure, running processes, and development workflows.
|
||||||
|
|
||||||
|
## Setup and Configuration
|
||||||
|
|
||||||
|
### Automatic Setup with Nx Console
|
||||||
|
|
||||||
|
Make sure you have **Nx Console** [installed in your editor](/getting-started/editor-setup), as it automatically exposes the Nx MCP server. Once Nx Console is installed and you open an Nx workspace, you'll receive a notification to **"Improve Copilot/AI agent with Nx-specific context"** - click **"Yes"** to automatically configure it.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
If you miss the notification, you can manually run the configuration by opening the command palette (`Ctrl/Cmd + Shift + P`) and running `nx.configureMcpServer`.
|
||||||
|
|
||||||
|
### Manual Setup for Other AI Clients
|
||||||
|
|
||||||
|
For MCP-compatible clients like **Claude Desktop**, **Cursor**, or other AI assistants, add the following configuration:
|
||||||
|
|
||||||
|
```json {% fileName="mcp.json" %}
|
||||||
|
{
|
||||||
|
"servers": {
|
||||||
|
"nx-mcp": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["nx-mcp@latest", "/path/to/your/workspace"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Replace `/path/to/your/workspace` with your actual workspace path.
|
||||||
|
|
||||||
|
## What This Integration Enables
|
||||||
|
|
||||||
|
The Nx AI integration provides your coding assistant with powerful capabilities:
|
||||||
|
|
||||||
|
- **[Workspace Structure Understanding](/blog/nx-mcp-vscode-copilot)** - Deep architectural awareness of your monorepo, project relationships, and dependencies
|
||||||
|
- **[Real-time Terminal Integration](/blog/nx-terminal-integration-ai)** - AI can read your terminal output, running processes, and error messages without copy-pasting
|
||||||
|
- **[CI Pipeline Context](/blog/nx-editor-ci-llm-integration)** - Access to build failures, test results, and deployment status from your CI/CD processes
|
||||||
|
- **[Enhanced Code Generation](/blog/nx-generators-ai-integration)** - AI-powered generator suggestions and custom scaffolding with intelligent defaults
|
||||||
|
- **Cross-project Impact Analysis** - Understanding the implications of changes across your entire monorepo
|
||||||
|
- **Autonomous Error Debugging** - AI independently accesses context to help fix development issues
|
||||||
|
|
||||||
|
Learn more about [why Nx and AI work so well together](/blog/nx-and-ai-why-they-work-together).
|
||||||
@ -1,11 +1,11 @@
|
|||||||
---
|
---
|
||||||
title: Editor Integration
|
title: Editor Integration
|
||||||
description: Learn how to set up your editor with Nx Console extensions to enhance your developer experience with features like task visualization, cache management, and generator UI.
|
description: Set up Nx Console in VSCode or JetBrains for visual UI, task management, code generation, and enhanced AI assistance in your Nx workspace.
|
||||||
---
|
---
|
||||||
|
|
||||||
# Editor Integration
|
# Editor Integration
|
||||||
|
|
||||||
Nx Console editor extensions make your developer experience richer. The extensions
|
Nx Console editor extensions make your developer experience richer. The extensions:
|
||||||
|
|
||||||
- [enhance AI integrations](/features/enhance-AI) by providing workspace-level context and up-to-date docs
|
- [enhance AI integrations](/features/enhance-AI) by providing workspace-level context and up-to-date docs
|
||||||
- show [inferred tasks](/concepts/inferred-tasks) and help you invoke them via the Project Details View
|
- show [inferred tasks](/concepts/inferred-tasks) and help you invoke them via the Project Details View
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Installation
|
title: Installation
|
||||||
description: Learn how to install Nx in a new workspace, add it to an existing repository, install it globally, or set it up in a non-JavaScript repository with step-by-step instructions.
|
description: Install Nx globally via npm, Homebrew, Chocolatey, or apt. Add Nx to existing repos with nx init and keep dependencies updated automatically.
|
||||||
---
|
---
|
||||||
|
|
||||||
# Installation
|
# Installation
|
||||||
@ -42,9 +42,9 @@ sudo apt install nx
|
|||||||
{% /tab %}
|
{% /tab %}
|
||||||
{% /tabs %}
|
{% /tabs %}
|
||||||
|
|
||||||
## Adding Nx Into Your Repository
|
## Adding Nx to Your Repository
|
||||||
|
|
||||||
To add Nx to an existing repository run:
|
To add Nx to an existing repository, run:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
nx init
|
nx init
|
||||||
@ -80,7 +80,7 @@ To avoid potential issues, it is [recommended to update one major version of Nx
|
|||||||
|
|
||||||
## Tutorials
|
## Tutorials
|
||||||
|
|
||||||
Try one of these tutorials for a full walkthrough of what to do after you install Nx
|
Try one of these tutorials for a full walkthrough of what to do after you install Nx:
|
||||||
|
|
||||||
- [TypeScript Monorepo Tutorial](/getting-started/tutorials/typescript-packages-tutorial)
|
- [TypeScript Monorepo Tutorial](/getting-started/tutorials/typescript-packages-tutorial)
|
||||||
- [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial)
|
- [React Monorepo Tutorial](/getting-started/tutorials/react-monorepo-tutorial)
|
||||||
|
|||||||
@ -1,118 +1,81 @@
|
|||||||
---
|
---
|
||||||
title: Intro to Nx
|
title: Intro to Nx
|
||||||
description: Nx is a powerful open-source build system that enhances developer productivity, optimizes CI performance, and maintains code quality with features like task caching and distribution.
|
description: 'Nx is an AI-first build platform that connects everything from your editor to CI Helping you deliver fast, without breaking things.'
|
||||||
---
|
---
|
||||||
|
|
||||||
# Intro to Nx
|
# What is Nx?
|
||||||
|
|
||||||
Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. [Check out our video](/getting-started/why-nx) to learn more about what Nx is about.
|
Nx is a powerful, open source, technology-agnostic build platform designed to efficiently manage codebases of any scale. From small single projects to large enterprise monorepos, Nx is designed to **streamline your development workflows**, **minimize errors** and **dramatically reduce waste** by [saving engineering time](https://youtu.be/2BLqiNnBPuU) and cutting compute costs.
|
||||||
|
|
||||||
{% github-repository title="Star Nx on GitHub" url="https://github.com/nrwl/nx" /%}
|
{% youtube
|
||||||
|
src="https://www.youtube.com/embed/-_4WMl-Fn0w"
|
||||||
|
title="What is Nx?"
|
||||||
|
width="100%" /%}
|
||||||
|
|
||||||
## Core Features
|
As teams and codebases grow, productivity bottlenecks multiply: build times increase, CI becomes flaky, and code sharing becomes complex. **Nx reduces friction across your entire development cycle.**
|
||||||
|
|
||||||
- **Run Tasks Efficiently**: Nx [runs tasks in parallel](/features/run-tasks) and orders the tasks based on the dependencies between them.
|
## Start small, extend as you grow
|
||||||
- **Distribute Tasks in CI**: Nx scales your CI by [distributing tasks](/ci/features/distribute-task-execution) across many VMs. Your CI is fast no matter how big your repository is.
|
|
||||||
- **Cache Locally & Remotely**: With [local](/features/cache-task-results) and [remote caching](/ci/features/remote-cache), Nx prevents unnecessary re-runs of tasks, saving you valuable dev time.
|
|
||||||
- **Split E2E Tests and Rerun Flaky Tests**: Nx [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across VMs. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
|
||||||
- **Automate Dependency Updates**: if you leverage [Nx plugins](/concepts/nx-plugins) you gain additional features such as [code generation](/features/generate-code) and tools to [automatically upgrade](features/automate-updating-dependencies) your codebase and dependencies.
|
|
||||||
- **Make it Your Own**: Nx is highly customizable and extensible. Fine-tune it by [creating a plugin for your organization](/extending-nx/tutorials/organization-specific-plugin) or [creating a tooling plugin](/extending-nx/tutorials/tooling-plugin).
|
|
||||||
|
|
||||||
<!-- - **Monorepo and Single Projects**: Nx supports both, monorepos as well as single-project (standalone) workspaces. -->
|
Nx is built in a modular fashion, allowing you to adopt as little or as much as you'd like at any moment in your development lifecycle. You can **start with just the core and add additional capabilities incrementally** as your needs grow and complexity increases.
|
||||||
|
|
||||||
Find out more about [why you should use Nx](/getting-started/why-nx) or browse our [features](/features).
|
At the **foundation is Nx Core**, a Rust-based, technology-agnostic task runner. Nx Core creates a knowledge graph of your workspace, understanding project relationships and dependencies. This enables highly optimized and fast task execution regardless of technology stack. It runs `package.json` scripts in [TypeScript monorepos](/technologies/typescript/introduction) or Gradle tasks in [Java projects](/technologies/java/introduction) or [can be extended](/extending-nx/intro/getting-started) to meet your projects specific needs
|
||||||
|
|
||||||
## Try Nx Yourself!
|
{% callout type="deepdive" title="What do you mean by 'running NPM scripts'?" %}
|
||||||
|
|
||||||
{% side-by-side %}
|
At the very core, Nx is a super fast, intelligent task runner. Let's take the example of an NPM workspace. This could be a project's `package.json`:
|
||||||
|
|
||||||
```shell {% title="Create a new workspace" %}
|
```json
|
||||||
npx create-nx-workspace
|
{
|
||||||
|
"name": "my-project",
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc",
|
||||||
|
"test": "jest"
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell {% title="Add Nx to an existing workspace" %}
|
Then you can simply add Nx to your root `package.json`:
|
||||||
npx nx init
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"nx": "latest"
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
{% /side-by-side %}
|
And once that's done, you can run your tasks via Nx.
|
||||||
|
|
||||||
Also, here are some recipes that give you more details based on the technology stack you're using:
|
```shell
|
||||||
|
nx build my-project
|
||||||
|
```
|
||||||
|
|
||||||
{% cards cols="2" mdCols="4" smCols="2" moreLink="/recipes/adopting-nx" %}
|
This will execute the `build` script from `my-project`'s `package.json`, equivalent to running `npm run build` in that project directory.
|
||||||
|
|
||||||
{% link-card title="Add to Existing Monorepo" appearance="small" url="/recipes/adopting-nx/adding-to-monorepo" icon="pnpm" /%}
|
Similarly you [can run tasks across all projects](/features/run-tasks), just specific ones or just those from projects you touched.
|
||||||
|
|
||||||
{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%}
|
From there, you can gradually enhance your setup by adding features like [task caching](/features/cache-task-results), adding [plugins](/technologies), optimizing your CI via [task distribution](/ci/features/distribute-task-execution), and many more powerful capabilities as your needs grow.
|
||||||
|
|
||||||
{% link-card title="Migrate from Angular CLI" appearance="small" url="technologies/angular/migration/angular" icon="angular" /%}
|
{% /callout %}
|
||||||
|
|
||||||
{% link-card title="Import Projects into Your Nx Workspace" appearance="small" url="/recipes/adopting-nx/import-project" icon="ArrowDownOnSquareStackIcon" /%}
|
Nx Core works great alone, but you can incrementally add capabilities as needed. Speed up your CI with [**Nx Cloud**](/ci) through remote caching and distributed task execution. Add [**Nx Console**](/getting-started/editor-setup) integrating Nx with your editor, giving you powerful autocomplete support, project graph visualization, CI run notifications and an MCP to [make your AI coding assistant smarter](/features/enhance-AI). Add [**Nx Plugins**](/technologies) for technology-specific automation and DX improvements and build custom capabilities using [Nx Devkit](/extending-nx/intro/getting-started).
|
||||||
|
|
||||||
|
## Where to go from here?
|
||||||
|
|
||||||
|
{% cards %}
|
||||||
|
|
||||||
|
{% card title="Get set up and ready with Nx" description="Dive right in with our getting started steps to install Nx, set up your editor, and create your first project" type="documentation" url="/getting-started" icon="RocketLaunchIcon" /%}
|
||||||
|
|
||||||
|
{% card title="Step by step with our tutorials" description="Learn more about Nx through hands-on tutorials for different technology stacks" type="documentation" url="/getting-started/tutorials" icon="AcademicCapIcon" /%}
|
||||||
|
|
||||||
|
{% card title="Learn with our video courses" description="Dive deeper with comprehensive video courses that walk you through Nx concepts" type="documentation" url="/courses" icon="PlayCircleIcon" /%}
|
||||||
|
|
||||||
|
{% card title="Dive deep into Nx features" description="Discover all the powerful features that Nx provides to streamline your workflow" type="documentation" url="/features" icon="SparklesIcon" /%}
|
||||||
|
|
||||||
|
{% card title="Understand underlying concepts" description="Improve your understanding of the core concepts of how Nx works under the hood" type="documentation" url="/concepts" icon="LightBulbIcon" /%}
|
||||||
|
|
||||||
|
{% card title="Explore Technologies" description="Explore Nx's technology integrations and how it can support your specific stack" type="documentation" url="/technologies" icon="CodeBracketIcon" /%}
|
||||||
|
|
||||||
{% /cards %}
|
{% /cards %}
|
||||||
|
|
||||||
## Learn Nx
|
**Stay up to date** with our latest news by [⭐️ starring us on Github](https://github.com/nrwl/nx), [subscribing to our Youtube channel](https://www.youtube.com/@nxdevtools), [joining our Discord](https://go.nx.dev/community), [subscribe to our monthly tech newsletter](https://go.nrwl.io/nx-newsletter) or follow us [on X](https://x.com/nxdevtools), [Bluesky](https://bsky.app/profile/nx.dev) and [LinkedIn](https://www.linkedin.com/company/nxdevtools).
|
||||||
|
|
||||||
{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %}
|
|
||||||
|
|
||||||
{% link-card title="Nx in 10 minutes!" type="video" url="https://youtu.be/-_4WMl-Fn0w" icon="nx" /%}
|
|
||||||
|
|
||||||
{% link-card title="What is Nx Cloud?" type="video" url="https://youtu.be/4VI-q943J3o" icon="nxcloud" /%}
|
|
||||||
|
|
||||||
{% link-card title="PNPM Workspaces to Distributed CI" type="course" url="/courses/pnpm-nx-next" icon="pnpm" /%}
|
|
||||||
|
|
||||||
{% link-card title="More On Youtube" type="video" url="https://www.youtube.com/@nxdevtools" icon="youtube" /%}
|
|
||||||
|
|
||||||
{% /cards %}
|
|
||||||
|
|
||||||
{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %}
|
|
||||||
|
|
||||||
{% link-card title="TypeScript Monorepo" type="tutorial" url="/getting-started/tutorials/typescript-packages-tutorial" icon="jsMono" /%}
|
|
||||||
|
|
||||||
{% link-card title="React Monorepo" type="tutorial" url="/getting-started/tutorials/react-monorepo-tutorial" icon="reactMono" /%}
|
|
||||||
|
|
||||||
{% link-card title="Angular Monorepo" type="tutorial" url="/getting-started/tutorials/angular-monorepo-tutorial" icon="angularMono" /%}
|
|
||||||
|
|
||||||
{% link-card title="Gradle Monorepo" type="tutorial" url="/getting-started/tutorials/gradle-tutorial" icon="gradle" /%}
|
|
||||||
|
|
||||||
{% /cards %}
|
|
||||||
|
|
||||||
## Pick Your Stack!
|
|
||||||
|
|
||||||
{% cards cols="3" lgCols="8" mdCols="6" smCols="5" moreLink="/showcase/example-repos" %}
|
|
||||||
|
|
||||||
{% link-card title="Express" appearance="small" url="/technologies/node/express" icon="express" /%}
|
|
||||||
{% link-card title="Vue" appearance="small" url="/technologies/vue/introduction" icon="vue" /%}
|
|
||||||
{% link-card title="Next" appearance="small" url="/technologies/react/next" icon="nextjs" /%}
|
|
||||||
{% link-card title="Nuxt" appearance="small" url="/technologies/vue/nuxt/introduction" icon="nuxt" /%}
|
|
||||||
{% link-card title="Nest" appearance="small" url="/technologies/node/nest" icon="nestjs" /%}
|
|
||||||
{% link-card title="Remix" appearance="small" url="/technologies/react/remix" icon="remix" /%}
|
|
||||||
{% link-card title="Expo" appearance="small" url="/technologies/react/expo" icon="expo" /%}
|
|
||||||
{% link-card title="React Native" appearance="small" url="/technologies/react/react-native" icon="react" /%}
|
|
||||||
{% link-card title="Fastify" appearance="small" url="/showcase/example-repos/mongo-fastify" icon="fastify" /%}
|
|
||||||
{% link-card title="Svelte" appearance="small" url="/showcase/example-repos/add-svelte" icon="svelte" /%}
|
|
||||||
{% link-card title="Solid" appearance="small" url="/showcase/example-repos/add-solid" icon="solid" /%}
|
|
||||||
{% link-card title="Lit" appearance="small" url="/showcase/example-repos/add-lit" icon="lit" /%}
|
|
||||||
{% link-card title="Astro" appearance="small" url="/showcase/example-repos/add-astro" icon="astro" /%}
|
|
||||||
{% link-card title="Qwik" appearance="small" url="/showcase/example-repos/add-qwik" icon="qwik" /%}
|
|
||||||
|
|
||||||
{% link-card title="Rust" appearance="small" url="/showcase/example-repos/add-rust" icon="rust" /%}
|
|
||||||
{% link-card title="Go" appearance="small" url="https://github.com/nrwl/nx-recipes/blob/main/go/README.md" icon="go" /%}
|
|
||||||
{% link-card title=".NET" appearance="small" url="https://github.com/nrwl/nx-recipes/tree/main/dot-net-standalone" icon="dotnet" /%}
|
|
||||||
{% link-card title="Cypress" appearance="small" url="/technologies/test-tools/cypress/introduction" icon="cypress" /%}
|
|
||||||
{% link-card title="Playwright" appearance="small" url="/technologies/test-tools/playwright/introduction" icon="playwright" /%}
|
|
||||||
{% link-card title="Vite" appearance="small" url="/technologies/build-tools/vite" icon="vite" /%}
|
|
||||||
{% link-card title="Storybook" appearance="small" url="/technologies/test-tools/storybook" icon="storybook" /%}
|
|
||||||
{% link-card title="Jest" appearance="small" url="/technologies/test-tools/jest/introduction" icon="jest" /%}
|
|
||||||
{% link-card title="Rspack" appearance="small" url="/technologies/build-tools/rspack/introduction" icon="rspack" /%}
|
|
||||||
|
|
||||||
{% /cards %}
|
|
||||||
|
|
||||||
## Connect With Us
|
|
||||||
|
|
||||||
Connect on our channels and with the Nx Community to ask questions, get help and keep up to date with the latest news.
|
|
||||||
|
|
||||||
- ⭐️ [Star us on GitHub](https://github.com/nrwl/nx) to show your support and stay updated on new releases!
|
|
||||||
- Join our [Discord Community](https://go.nx.dev/community)
|
|
||||||
- Subscribe to our [Youtube Channel](https://www.youtube.com/@nxdevtools)
|
|
||||||
- Follow us on [Twitter](https://twitter.com/nxdevtools)
|
|
||||||
- Subscribe [to our tech newsletter](https://go.nrwl.io/nx-newsletter)
|
|
||||||
|
|||||||
104
docs/shared/getting-started/quick-start.md
Normal file
104
docs/shared/getting-started/quick-start.md
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
---
|
||||||
|
title: Quickstart with Nx
|
||||||
|
description: Get up and running with Nx in minutes - install Nx, set up your editor, configure AI assistance, and choose your development path.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Getting Started
|
||||||
|
|
||||||
|
Get up and running with Nx in just a few minutes by following these simple steps.
|
||||||
|
|
||||||
|
{% steps %}
|
||||||
|
|
||||||
|
{% step title="Install Nx" %}
|
||||||
|
|
||||||
|
To install Nx on your machine, choose one of the following methods based on your operating system and package manager. You can also use `npx` to run Nx without installing it globally.
|
||||||
|
|
||||||
|
{% tabs %}
|
||||||
|
{% tab label="npm" %}
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm add --global nx
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** You can also use Yarn, pnpm, or Bun
|
||||||
|
|
||||||
|
{% /tab %}
|
||||||
|
{% tab label="Homebrew (macOS, Linux)" %}
|
||||||
|
|
||||||
|
```shell
|
||||||
|
brew install nx
|
||||||
|
```
|
||||||
|
|
||||||
|
{% /tab %}
|
||||||
|
{% tab label="Chocolatey (Windows)" %}
|
||||||
|
|
||||||
|
```shell
|
||||||
|
choco install nx
|
||||||
|
```
|
||||||
|
|
||||||
|
{% /tab %}
|
||||||
|
{% tab label="apt (Ubuntu)" %}
|
||||||
|
|
||||||
|
```shell
|
||||||
|
sudo add-apt-repository ppa:nrwl/nx
|
||||||
|
sudo apt update
|
||||||
|
sudo apt install nx
|
||||||
|
```
|
||||||
|
|
||||||
|
{% /tab %}
|
||||||
|
{% /tabs %}
|
||||||
|
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
|
{% step title="Set Up Your Editor" %}
|
||||||
|
|
||||||
|
Nx Console is an editor extension that integrates Nx seamlessly into your development workflow with project details views, visual migration UI, command palette integration, and CI pipeline notifications.
|
||||||
|
|
||||||
|
{% install-nx-console /%}
|
||||||
|
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
|
{% step title="Configure Your AI Assistant" %}
|
||||||
|
|
||||||
|
Nx Console automatically configures and exposes the Nx MCP server. You'll receive a notification to "Improve Copilot/AI agent with Nx-specific context" - click "Yes" to automatically configure it.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
If you miss the notification, run `nx.configureMcpServer` from the command palette (`Ctrl/Cmd + Shift + P`).
|
||||||
|
|
||||||
|
For other MCP-compatible clients like Claude Desktop:
|
||||||
|
|
||||||
|
```json {% fileName="mcp.json" %}
|
||||||
|
{
|
||||||
|
"servers": {
|
||||||
|
"nx-mcp": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["nx-mcp@latest", "/path/to/your/workspace"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Replace `/path/to/your/workspace` with your workspace path. Learn more about how Nx improves [your AI assistant](/features/enhance-AI).
|
||||||
|
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
|
{% step title="Choose Your Path" %}
|
||||||
|
|
||||||
|
Now that you have Nx installed and your development environment configured, choose how you want to proceed:
|
||||||
|
|
||||||
|
{% cards %}
|
||||||
|
|
||||||
|
{% card title="Create a New Project" description="Start fresh with a new Nx workspace using your preferred technology stack" type="documentation" url="/getting-started/start-new-project" /%}
|
||||||
|
|
||||||
|
{% card title="Add to Existing Project" description="Integrate Nx into your existing repository to leverage caching and speed up CI" type="documentation" url="/getting-started/adding-to-existing" /%}
|
||||||
|
|
||||||
|
{% card title="Follow a Tutorial" description="Learn Nx through hands-on tutorials for different technology stacks" type="documentation" url="/getting-started/tutorials" /%}
|
||||||
|
|
||||||
|
{% card title="Explore Nx Features" description="Discover all the powerful features that Nx offers" type="documentation" url="/features" /%}
|
||||||
|
|
||||||
|
{% /cards %}
|
||||||
|
|
||||||
|
{% /step %}
|
||||||
|
|
||||||
|
{% /steps %}
|
||||||
89
docs/shared/getting-started/start-new-project.md
Normal file
89
docs/shared/getting-started/start-new-project.md
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
title: Start a new project with Nx
|
||||||
|
description: Create a new Nx workspace manually with your favorite CLI or use the guided setup with presets for various technology stacks and configurations.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Start a new project with Nx
|
||||||
|
|
||||||
|
When you start a new project with Nx, you have two options.
|
||||||
|
|
||||||
|
## Option 1: Manual setup
|
||||||
|
|
||||||
|
In a nutshell, this means using your favorite CLI to create your initial project setup and then adding Nx to it.
|
||||||
|
|
||||||
|
Let's take the example of an NPM workspace. Create a new root-level `package.json` like:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"name": "my-workspace",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"workspaces": ["packages/*", "apps/*"]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Then you can add Nx to it by using:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
nx init
|
||||||
|
```
|
||||||
|
|
||||||
|
_(Note, make sure you have [Nx installed globally](/getting-started/installation) or use `npx` if you're in a JavaScript environment)_
|
||||||
|
|
||||||
|
Nx will detect the underlying workspace configuration, ask you a couple of questions and install itself into the workspace. As you keep going, you can incrementally add functionality, like:
|
||||||
|
|
||||||
|
- [configure caching](/features/cache-task-results)
|
||||||
|
- [adding Nx plugins to help refine your workflows](/plugin-registry)
|
||||||
|
- [optimizing your CI](/ci/intro/ci-with-nx)
|
||||||
|
|
||||||
|
## Option 2: Guided setup (JavaScript only)
|
||||||
|
|
||||||
|
Alternatively, you can choose a more guided approach by leveraging some of the presets Nx comes with.
|
||||||
|
|
||||||
|
Run the following command to get started:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npx create-nx-workspace@latest
|
||||||
|
```
|
||||||
|
|
||||||
|
This interactive command will guide you through the setup process, allowing you to:
|
||||||
|
|
||||||
|
- **Choose your workspace name** - This will be the name of your root directory
|
||||||
|
- **Select your preferred package manager** - npm, yarn, or pnpm
|
||||||
|
- **Pick a preset** - Choose from various technology stacks and configurations
|
||||||
|
- **Configure additional options** - Such as styling solutions, testing frameworks, and more
|
||||||
|
|
||||||
|
Choose a preset that matches your technology stack. This gives you a fully configured workspace.
|
||||||
|
|
||||||
|
You can also choose **an empty workspace preset** which sets up the bare minimum configuration including Nx itself. This allows you to add technologies and features incrementally over time as you need them.
|
||||||
|
|
||||||
|
<!-- ## Pick Your Stack!
|
||||||
|
|
||||||
|
{% cards cols="3" lgCols="8" mdCols="6" smCols="5" moreLink="/showcase/example-repos" %}
|
||||||
|
|
||||||
|
{% link-card title="Express" appearance="small" url="/technologies/node/express" icon="express" /%}
|
||||||
|
{% link-card title="Vue" appearance="small" url="/technologies/vue/introduction" icon="vue" /%}
|
||||||
|
{% link-card title="Next" appearance="small" url="/technologies/react/next" icon="nextjs" /%}
|
||||||
|
{% link-card title="Nuxt" appearance="small" url="/technologies/vue/nuxt/introduction" icon="nuxt" /%}
|
||||||
|
{% link-card title="Nest" appearance="small" url="/technologies/node/nest" icon="nestjs" /%}
|
||||||
|
{% link-card title="Remix" appearance="small" url="/technologies/react/remix" icon="remix" /%}
|
||||||
|
{% link-card title="Expo" appearance="small" url="/technologies/react/expo" icon="expo" /%}
|
||||||
|
{% link-card title="React Native" appearance="small" url="/technologies/react/react-native" icon="react" /%}
|
||||||
|
{% link-card title="Fastify" appearance="small" url="/showcase/example-repos/mongo-fastify" icon="fastify" /%}
|
||||||
|
{% link-card title="Svelte" appearance="small" url="/showcase/example-repos/add-svelte" icon="svelte" /%}
|
||||||
|
{% link-card title="Solid" appearance="small" url="/showcase/example-repos/add-solid" icon="solid" /%}
|
||||||
|
{% link-card title="Lit" appearance="small" url="/showcase/example-repos/add-lit" icon="lit" /%}
|
||||||
|
{% link-card title="Astro" appearance="small" url="/showcase/example-repos/add-astro" icon="astro" /%}
|
||||||
|
{% link-card title="Qwik" appearance="small" url="/showcase/example-repos/add-qwik" icon="qwik" /%}
|
||||||
|
|
||||||
|
{% link-card title="Rust" appearance="small" url="/showcase/example-repos/add-rust" icon="rust" /%}
|
||||||
|
{% link-card title="Go" appearance="small" url="https://github.com/nrwl/nx-recipes/blob/main/go/README.md" icon="go" /%}
|
||||||
|
{% link-card title=".NET" appearance="small" url="https://github.com/nrwl/nx-recipes/tree/main/dot-net-standalone" icon="dotnet" /%}
|
||||||
|
{% link-card title="Cypress" appearance="small" url="/technologies/test-tools/cypress/introduction" icon="cypress" /%}
|
||||||
|
{% link-card title="Playwright" appearance="small" url="/technologies/test-tools/playwright/introduction" icon="playwright" /%}
|
||||||
|
{% link-card title="Vite" appearance="small" url="/technologies/build-tools/vite" icon="vite" /%}
|
||||||
|
{% link-card title="Storybook" appearance="small" url="/technologies/test-tools/storybook" icon="storybook" /%}
|
||||||
|
{% link-card title="Jest" appearance="small" url="/technologies/test-tools/jest/introduction" icon="jest" /%}
|
||||||
|
{% link-card title="Rspack" appearance="small" url="/technologies/build-tools/rspack/introduction" icon="rspack" /%}
|
||||||
|
|
||||||
|
{% /cards %} -->
|
||||||
34
docs/shared/getting-started/start-with-existing-project.md
Normal file
34
docs/shared/getting-started/start-with-existing-project.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
---
|
||||||
|
title: Start with an existing project
|
||||||
|
description: Add Nx to any existing project with a single command. Start with Nx Core and gradually adopt plugins, CI integrations, and other capabilities.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Add Nx to an existing project
|
||||||
|
|
||||||
|
In many situations, you have an existing codebase and want to improve it with Nx using an **incremental adoption approach**.
|
||||||
|
|
||||||
|
Thanks to [Nx's modular architecture](/getting-started/intro), you can start with just **Nx Core** and then gradually add [technology-specific plugins](/technologies), [CI integrations](/ci), or other capabilities as your requirements evolve.
|
||||||
|
|
||||||
|
Getting started is remarkably simple. You can add Nx to any existing project with a single command:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
nx init
|
||||||
|
```
|
||||||
|
|
||||||
|
_(Note, make sure you have [Nx installed globally](/getting-started/installation) or use `npx` if you're in a JavaScript environment)_
|
||||||
|
|
||||||
|
This command automatically detects your underlying workspace structure, whether it's a monorepo, a single project, or something in between. Nx will then ask you a series of targeted questions about your setup and preferences, using your answers to auto-configure itself seamlessly into your existing workspace. This intelligent setup process ensures you get the benefits of Nx with minimal configuration changes or disruption to your current development workflow.
|
||||||
|
|
||||||
|
Here are some guides that give you more details based on the technology stack you're using:
|
||||||
|
|
||||||
|
{% cards cols="2" mdCols="4" smCols="2" moreLink="/recipes/adopting-nx" %}
|
||||||
|
|
||||||
|
{% link-card title="Add to Existing Monorepo" appearance="small" url="/recipes/adopting-nx/adding-to-monorepo" icon="pnpm" /%}
|
||||||
|
|
||||||
|
{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%}
|
||||||
|
|
||||||
|
{% link-card title="Migrate from Angular CLI" appearance="small" url="technologies/angular/migration/angular" icon="angular" /%}
|
||||||
|
|
||||||
|
{% link-card title="Import Projects into Your Nx Workspace" appearance="small" url="/recipes/adopting-nx/import-project" icon="ArrowDownOnSquareStackIcon" /%}
|
||||||
|
|
||||||
|
{% /cards %}
|
||||||
@ -1,62 +0,0 @@
|
|||||||
---
|
|
||||||
title: Why Nx?
|
|
||||||
description: Discover how Nx helps developers speed up computation, integrate tooling, and scale projects from small teams to entire organizations with powerful caching and CI capabilities.
|
|
||||||
---
|
|
||||||
|
|
||||||
# Why Nx?
|
|
||||||
|
|
||||||
{% youtube
|
|
||||||
src="https://www.youtube.com/embed/-_4WMl-Fn0w"
|
|
||||||
title="What is Nx?"
|
|
||||||
width="100%" /%}
|
|
||||||
|
|
||||||
We created Nx because developers struggle to configure, maintain and especially integrate various tools and frameworks. Setting up a system that works well for a handful of developers and at the same time, easily scales up to an entire organization is hard. This includes setting up low-level build tooling, configuring fast CI, and keeping your codebase healthy, up-to-date, and maintainable.
|
|
||||||
|
|
||||||
We wanted to provide a solution that is easy to adopt and scale.
|
|
||||||
|
|
||||||
## How Does Nx Help You?
|
|
||||||
|
|
||||||
In a nutshell, Nx helps to: **speed up your computation** (e.g. builds, tests etc), locally and on CI and to **integrate and automate your tooling** via its plugins. All of this can be adopted incrementally. You can use plugins, but you don't have to. Look at the Nx architecture in the next section to learn more.
|
|
||||||
|
|
||||||
You can use Nx to
|
|
||||||
|
|
||||||
- speed up your existing project's builds and tests, locally and on CI (whether that's a monorepo or standalone application)
|
|
||||||
- quickly scaffold a new project (using Nx plugins) without having to configure any lower-level build tools
|
|
||||||
- easily integrate new tooling (e.g., Storybook, Tailwind etc), into your project.
|
|
||||||
- ensure consistency and code quality with custom generators and lint rules
|
|
||||||
- update your frameworks and tools and keep your workspace evergreen using the automated code migration feature
|
|
||||||
|
|
||||||
## How Does Nx Work?
|
|
||||||
|
|
||||||
Nx is built in a modular fashion to let you only use the features you need.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
- The **Nx** package provides fundamental technology-agnostic capabilities such as: [workspace analysis](/features/explore-graph), [task running](/features/run-tasks), [caching](/features/cache-task-results), [distribution](/ci/features/distribute-task-execution), [code generation](/features/generate-code) and [automated code migrations](/features/automate-updating-dependencies).
|
|
||||||
- **Plugins** are NPM packages that build on top of the fundamental capabilities provided by the Nx package. Nx plugins contain [code generators](/features/generate-code), [executors](/concepts/executors-and-configurations) (to abstract lower-level build tooling) and automated code migrations for keeping your tools up to date. Contrary to the Nx package, which works the same way with any JS or non-JS project, plugins are usually technology specific. For instance, `@nx/react` adds support for building React apps and libs, `@nx/cypress` adds e2e testing capabilities with Cypress. Plugins make developers more productive by removing any friction of integrating different tools with each other and by providing utilities to keep them up to date. The Nx team maintains plugins for React, Next, Remix, Angular, Jest, Cypress, Storybook and more. You can use the `@nx/plugin` package to easily [scaffold a new plugin](/extending-nx/intro/getting-started) or even just [automate your local workspace](/extending-nx/recipes/local-generators). There are also more than 80 [community plugins](/plugin-registry).
|
|
||||||
- **Devkit** is a set of utilities for [building Nx plugins](/extending-nx/intro/getting-started).
|
|
||||||
- **Nx Console** is an extension for **VSCode, IntelliJ and VIM**. It provides code autocompletion, interactive generators, workspace visualizations, powerful refactorings and more. You can [install it here](/getting-started/editor-setup).
|
|
||||||
|
|
||||||
## How Can Nx Improve Your CI Pipeline?
|
|
||||||
|
|
||||||
The benefits of Nx are not restricted to local development. [Nx Cloud](https://nx.app) helps scale your project on CI by making it simple to create and maintain a pipeline that [eliminates wasted time](/ci/concepts/reduce-waste) and [efficiently parallelizes work](/ci/concepts/parallelization-distribution). Your CI pipeline with Nx can:
|
|
||||||
|
|
||||||
- Run only tasks [affected](/ci/features/affected) by that PR
|
|
||||||
- [Share the task cache](/ci/features/remote-cache) between CI and local development machines (Nx Replay)
|
|
||||||
- [Distribute task execution](/ci/features/distribute-task-execution) across multiple agent machines (Nx Agents)
|
|
||||||
- Automatically [split long e2e tasks](/ci/features/split-e2e-tasks) into smaller tasks (Atomizer)
|
|
||||||
- Identify and Re-run [Flaky Tasks](/ci/features/flaky-tasks)
|
|
||||||
|
|
||||||
Nx Cloud also provides direct integration with GitHub, GitLab, Bitbucket and Azure version control systems. Learn more at [nx.app](https://nx.app).
|
|
||||||
|
|
||||||
## How Can I Adopt Nx in My Existing Project?
|
|
||||||
|
|
||||||
As shown in the section before, there's a core [nx package](https://www.npmjs.com/package/nx) that can be dropped into an existing project (regardless of whether it is a monorepo or single-project workspace). We made a command to help you with that:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npx nx@latest init
|
|
||||||
```
|
|
||||||
|
|
||||||
By adding the `nx` package you can use [Nx commands](/features/run-tasks) to run your `package.json` scripts and benefit from running tasks in parallel as well as [caching](/features/cache-task-results). Over time you can then also add in Nx Plugins to further enhance your experience when working with specific tech stacks.
|
|
||||||
|
|
||||||
Check out our [migration guides](/recipes/adopting-nx) for all the details.
|
|
||||||
@ -10,7 +10,7 @@ src="https://www.youtube.com/embed/bwPkz4MrPDI?si=OLPUENWXLkQ9GRtR"
|
|||||||
title="Nx vs Angular CLI - The Showdown"
|
title="Nx vs Angular CLI - The Showdown"
|
||||||
width="100%" /%}
|
width="100%" /%}
|
||||||
|
|
||||||
Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/why-nx#how-does-nx-work). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project.
|
Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/intro#start-small-extend-as-you-grow). As a result, adopting Nx as an Angular user is relatively straightforward. This guide explores some of the similarities and in particular, added benefits of using Nx over the Angular CLI for your Angular project.
|
||||||
|
|
||||||
## TL;DR: Why should I use Nx for my Angular project?
|
## TL;DR: Why should I use Nx for my Angular project?
|
||||||
|
|
||||||
@ -397,9 +397,9 @@ Learn more about the [graph features here](/features/explore-graph).
|
|||||||
|
|
||||||
### Extensible and Customizable: Make it fit your own needs
|
### Extensible and Customizable: Make it fit your own needs
|
||||||
|
|
||||||
Nx is [built to be extensible](/getting-started/why-nx#how-does-nx-work). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors).
|
Nx is [built to be extensible](/getting-started/intro#start-small-extend-as-you-grow). Just like the [packages published by the Nx core team](/plugin-registry) you can create your own Nx plugins by [extending Nx](/extending-nx/intro/getting-started). This can be as simple as using [run-commands](/reference/core-api/nx/executors/run-commands) to integrate custom commands into the project configuration or as complex as [creating your own local executor](/extending-nx/recipes/local-executors).
|
||||||
|
|
||||||
And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/getting-started/intro#pick-your-stack).
|
And if you ever need to expand beyond Angular or diversify your stack, you can still keep using Nx, which is [battle-tested with many different technologies](/technologies).
|
||||||
|
|
||||||
## Migrate from the Angular CLI?
|
## Migrate from the Angular CLI?
|
||||||
|
|
||||||
|
|||||||
@ -1,10 +1,12 @@
|
|||||||
- Nx
|
- Nx
|
||||||
|
|
||||||
- [Getting Started](/getting-started)
|
- [Getting Started](/getting-started)
|
||||||
- [Intro to Nx](/getting-started/intro)
|
- [Introduction](/getting-started/intro)
|
||||||
- [Installation](/getting-started/installation)
|
- [Installation](/getting-started/installation)
|
||||||
- [Why Nx?](/getting-started/why-nx)
|
- [Start a new project](/getting-started/start-new-project)
|
||||||
|
- [Add to existing project](/getting-started/adding-to-existing)
|
||||||
- [Editor Integration](/getting-started/editor-setup)
|
- [Editor Integration](/getting-started/editor-setup)
|
||||||
|
- [AI Integration](/getting-started/ai-integration)
|
||||||
- [Tutorials](/getting-started/tutorials)
|
- [Tutorials](/getting-started/tutorials)
|
||||||
- [TypeScript Monorepo](/getting-started/tutorials/typescript-packages-tutorial)
|
- [TypeScript Monorepo](/getting-started/tutorials/typescript-packages-tutorial)
|
||||||
- [React Monorepo](/getting-started/tutorials/react-monorepo-tutorial)
|
- [React Monorepo](/getting-started/tutorials/react-monorepo-tutorial)
|
||||||
|
|||||||
@ -17,7 +17,7 @@ What will you learn?
|
|||||||
|
|
||||||
## Nx CLI vs. Angular CLI
|
## Nx CLI vs. Angular CLI
|
||||||
|
|
||||||
Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/why-nx#how-does-nx-work). As a result, adopting Nx as an Angular user is relatively straightforward. Your existing code, including builders and schematics, will still work as before, but you'll also have access to all the benefits Nx offers.
|
Nx evolved from being an extension of the Angular CLI to a [fully standalone CLI working with multiple frameworks](/getting-started/intro#start-small-extend-as-you-grow). As a result, adopting Nx as an Angular user is relatively straightforward. Your existing code, including builders and schematics, will still work as before, but you'll also have access to all the benefits Nx offers.
|
||||||
|
|
||||||
Advantages of Nx over the Angular CLI:
|
Advantages of Nx over the Angular CLI:
|
||||||
|
|
||||||
|
|||||||
@ -31,8 +31,6 @@ Features we'll use in this monorepo:
|
|||||||
- [Scaffold new code with generators](/features/generate-code)
|
- [Scaffold new code with generators](/features/generate-code)
|
||||||
- [Updates dependencies with automated migrations](/features/automate-updating-dependencies)
|
- [Updates dependencies with automated migrations](/features/automate-updating-dependencies)
|
||||||
|
|
||||||
Visit our ["Why Nx" page](/getting-started/why-nx) for more details.
|
|
||||||
|
|
||||||
## Final Code
|
## Final Code
|
||||||
|
|
||||||
Here's the source code of the final result for this tutorial.
|
Here's the source code of the final result for this tutorial.
|
||||||
|
|||||||
@ -25,7 +25,7 @@ export function DocViewer({
|
|||||||
}): JSX.Element {
|
}): JSX.Element {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const hideTableOfContent =
|
const hideTableOfContent =
|
||||||
router.asPath.includes('/getting-started/intro') ||
|
router.asPath.endsWith('/getting-started') ||
|
||||||
router.asPath.includes('/ci/intro/ci-with-nx') ||
|
router.asPath.includes('/ci/intro/ci-with-nx') ||
|
||||||
router.asPath.includes('/extending-nx/intro/getting-started') ||
|
router.asPath.includes('/extending-nx/intro/getting-started') ||
|
||||||
router.asPath.includes('/nx-api/devkit') ||
|
router.asPath.includes('/nx-api/devkit') ||
|
||||||
|
|||||||
@ -1033,13 +1033,6 @@ const coreFeatureAndConceptsRefactoring = {
|
|||||||
'/recipes/running-tasks/configure-inputs',
|
'/recipes/running-tasks/configure-inputs',
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* For AI Chat to make sure old URLs are not broken (added 2023-09-14)
|
|
||||||
*/
|
|
||||||
const aiChat = {
|
|
||||||
// '/ai': '/ai-chat',
|
|
||||||
};
|
|
||||||
|
|
||||||
// rename nx/linter to eslint
|
// rename nx/linter to eslint
|
||||||
const eslintRename = {
|
const eslintRename = {
|
||||||
'/nx-api/linter': '/nx-api/eslint',
|
'/nx-api/linter': '/nx-api/eslint',
|
||||||
@ -1473,6 +1466,10 @@ const nxModuleFederationConceptsRedirects = {
|
|||||||
'/technologies/module-federation/concepts/:slug*',
|
'/technologies/module-federation/concepts/:slug*',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const gettingStartedRedirects = {
|
||||||
|
'/getting-started/why-nx': '/getting-started/intro',
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Public export API
|
* Public export API
|
||||||
*/
|
*/
|
||||||
@ -1498,7 +1495,6 @@ module.exports = {
|
|||||||
pluginsToExtendNx,
|
pluginsToExtendNx,
|
||||||
latestRecipesRefactoring,
|
latestRecipesRefactoring,
|
||||||
coreFeatureRefactoring: coreFeatureAndConceptsRefactoring,
|
coreFeatureRefactoring: coreFeatureAndConceptsRefactoring,
|
||||||
aiChat,
|
|
||||||
eslintRename,
|
eslintRename,
|
||||||
removedDeprecatedUrls,
|
removedDeprecatedUrls,
|
||||||
troubleshootingOutOfRecipes,
|
troubleshootingOutOfRecipes,
|
||||||
@ -1513,4 +1509,5 @@ module.exports = {
|
|||||||
nxApiRedirects,
|
nxApiRedirects,
|
||||||
nxRecipesRedirects,
|
nxRecipesRedirects,
|
||||||
nxModuleFederationConceptsRedirects,
|
nxModuleFederationConceptsRedirects,
|
||||||
|
gettingStartedRedirects,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -113,6 +113,23 @@ const navigation = {
|
|||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'LinkedIn',
|
||||||
|
label: 'Nx on LinkedIn',
|
||||||
|
href: 'https://www.linkedin.com/company/nxdevtools',
|
||||||
|
icon: (props: any) => (
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{/*<title>LinkedIn</title>*/}
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Newsletter',
|
name: 'Newsletter',
|
||||||
label: 'The Newsletter',
|
label: 'The Newsletter',
|
||||||
|
|||||||
@ -160,6 +160,23 @@ export function DocumentationHeader({
|
|||||||
</svg>
|
</svg>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'LinkedIn',
|
||||||
|
label: 'Nx on LinkedIn',
|
||||||
|
href: 'https://www.linkedin.com/company/nxdevtools',
|
||||||
|
icon: (props: any) => (
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{/*<title>LinkedIn</title>*/}
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'GitHub',
|
name: 'GitHub',
|
||||||
label: 'Nx is open source, check the code on GitHub',
|
label: 'Nx is open source, check the code on GitHub',
|
||||||
|
|||||||
@ -90,6 +90,28 @@ export function ConnectWithUs(): JSX.Element {
|
|||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-green-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-green-900 dark:hover:bg-slate-800">
|
||||||
|
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
|
||||||
|
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-green-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-green-800" />
|
||||||
|
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-green-500 bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
|
||||||
|
<EnvelopeIcon className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110" />
|
||||||
|
</div>
|
||||||
|
<h4 className="mb-2 text-lg font-bold">Nx monthly newsletter</h4>
|
||||||
|
<a
|
||||||
|
href="https://go.nrwl.io/nx-newsletter?utm_source=nx.dev"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
title="Nx monthly newsletter subscription"
|
||||||
|
className="focus:outline-none"
|
||||||
|
>
|
||||||
|
<span className="absolute inset-0" aria-hidden="true"></span>
|
||||||
|
<p className="leading-relaxed">
|
||||||
|
Subscribe and receive news about Nx releases, posts about new
|
||||||
|
Nx features, details about new plugins, links to community
|
||||||
|
resources, and additional Nx content.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-6 md:w-1/2">
|
<div className="space-y-6 md:w-1/2">
|
||||||
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-slate-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-slate-900 dark:hover:bg-slate-800">
|
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-slate-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-slate-900 dark:hover:bg-slate-800">
|
||||||
@ -154,25 +176,34 @@ export function ConnectWithUs(): JSX.Element {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-green-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-green-900 dark:hover:bg-slate-800">
|
<div className="group relative rounded-lg border border-slate-200 bg-white/60 p-5 transition duration-200 ease-out hover:border-blue-300 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:border-blue-900 dark:hover:bg-slate-800">
|
||||||
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
|
<div className="relative m-2 mb-6 inline-flex h-10 w-10 items-center justify-center">
|
||||||
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-green-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-green-800" />
|
<div className="absolute inset-0 -m-2 rotate-6 transform rounded-3xl bg-blue-300 transition duration-200 ease-out group-hover:-rotate-3 group-hover:scale-105 dark:bg-blue-900" />
|
||||||
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-green-500 bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
|
<div className="absolute inset-0 -rotate-6 transform rounded-2xl bg-[#0077B5] bg-opacity-75 shadow-inner transition duration-200 ease-out group-hover:rotate-2 group-hover:scale-105" />
|
||||||
<EnvelopeIcon className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110" />
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
className="inline-block h-5 w-5 transform text-white transition duration-200 ease-out group-hover:scale-110"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>LinkedIn</title>
|
||||||
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<h4 className="mb-2 text-lg font-bold">Nx monthly newsletter</h4>
|
<h4 className="mb-2 text-lg font-bold">Connect on LinkedIn</h4>
|
||||||
<a
|
<a
|
||||||
href="https://go.nrwl.io/nx-newsletter?utm_source=nx.dev"
|
href="https://www.linkedin.com/company/nxdevtools"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title="Nx monthly newsletter subscription"
|
title="Nx LinkedIn page"
|
||||||
className="focus:outline-none"
|
className="focus:outline-none"
|
||||||
>
|
>
|
||||||
<span className="absolute inset-0" aria-hidden="true"></span>
|
<span className="absolute inset-0" aria-hidden="true"></span>
|
||||||
<p className="leading-relaxed">
|
<p className="leading-relaxed">
|
||||||
Subscribe and receive news about Nx releases, posts about new
|
Follow Nx on LinkedIn to stay informed about the latest
|
||||||
Nx features, details about new plugins, links to community
|
updates, company news, and professional insights from the Nx
|
||||||
resources, and additional Nx content.
|
team.
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -37,6 +37,8 @@ import { SideBySide } from './lib/tags/side-by-side.component';
|
|||||||
import { sideBySide } from './lib/tags/side-by-side.schema';
|
import { sideBySide } from './lib/tags/side-by-side.schema';
|
||||||
import { Tab, Tabs } from './lib/tags/tabs.component';
|
import { Tab, Tabs } from './lib/tags/tabs.component';
|
||||||
import { tab, tabs } from './lib/tags/tabs.schema';
|
import { tab, tabs } from './lib/tags/tabs.schema';
|
||||||
|
import { Step, Steps } from './lib/tags/steps.component';
|
||||||
|
import { step, steps } from './lib/tags/steps.schema';
|
||||||
import { Tweet, tweet } from '@nx/nx-dev/ui-common';
|
import { Tweet, tweet } from '@nx/nx-dev/ui-common';
|
||||||
import { YouTube, youtube } from '@nx/nx-dev/ui-common';
|
import { YouTube, youtube } from '@nx/nx-dev/ui-common';
|
||||||
import { CourseVideo } from '@nx/nx-dev/ui-common';
|
import { CourseVideo } from '@nx/nx-dev/ui-common';
|
||||||
@ -87,6 +89,8 @@ export const getMarkdocCustomConfig = (
|
|||||||
'short-embeds': shortEmbeds,
|
'short-embeds': shortEmbeds,
|
||||||
'short-video': shortVideo,
|
'short-video': shortVideo,
|
||||||
'side-by-side': sideBySide,
|
'side-by-side': sideBySide,
|
||||||
|
step,
|
||||||
|
steps,
|
||||||
tab,
|
tab,
|
||||||
tabs,
|
tabs,
|
||||||
testimonial,
|
testimonial,
|
||||||
@ -120,6 +124,8 @@ export const getMarkdocCustomConfig = (
|
|||||||
ShortEmbeds,
|
ShortEmbeds,
|
||||||
ShortVideo,
|
ShortVideo,
|
||||||
SideBySide,
|
SideBySide,
|
||||||
|
Step,
|
||||||
|
Steps,
|
||||||
Tab,
|
Tab,
|
||||||
Tabs,
|
Tabs,
|
||||||
TableOfContents,
|
TableOfContents,
|
||||||
|
|||||||
@ -217,13 +217,15 @@ export function Card({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="relative flex flex-col p-3 pr-8">
|
<div className="relative flex flex-col p-3 pr-8">
|
||||||
<span className="flex items-center font-semibold underline">
|
<h3 className="m-0 flex items-center text-base font-bold text-slate-900 dark:text-white">
|
||||||
<span className="absolute inset-0" aria-hidden="true"></span>
|
<span className="absolute inset-0" aria-hidden="true"></span>
|
||||||
{!hasYoutubeId ? iconMap[type] : null}
|
{!hasYoutubeId ? iconMap[type] : null}
|
||||||
{title}
|
{title}
|
||||||
</span>
|
</h3>
|
||||||
{description ? (
|
{description ? (
|
||||||
<p className="mt-1.5 w-full text-sm no-underline">{description}</p>
|
<p className="mt-2 w-full text-sm font-normal text-slate-600 no-underline dark:text-slate-300">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{/*HOVER ICON*/}
|
{/*HOVER ICON*/}
|
||||||
|
|||||||
60
nx-dev/ui-markdoc/src/lib/tags/steps.component.tsx
Normal file
60
nx-dev/ui-markdoc/src/lib/tags/steps.component.tsx
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
'use client';
|
||||||
|
import cx from 'classnames';
|
||||||
|
import React, { ReactNode } from 'react';
|
||||||
|
|
||||||
|
export function Steps({ children }: { children: ReactNode }) {
|
||||||
|
const steps = React.Children.toArray(children);
|
||||||
|
const stepsCount = steps.length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="not-prose relative">
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<div key={index} className="relative flex pb-8 last:pb-0">
|
||||||
|
{/* Vertical line connecting steps */}
|
||||||
|
{index < stepsCount - 1 && (
|
||||||
|
<div
|
||||||
|
className="absolute left-5 top-10 h-full w-0.5 bg-slate-200 dark:bg-slate-700"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Step number circle */}
|
||||||
|
<div className="relative z-10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-white dark:bg-sky-500">
|
||||||
|
<span className="text-sm font-semibold">{index + 1}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step content */}
|
||||||
|
<div className="ml-6 flex-1">{step}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Step({
|
||||||
|
title,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
title?: string;
|
||||||
|
children: ReactNode;
|
||||||
|
}) {
|
||||||
|
const passPropsToChildren = (children: ReactNode) => {
|
||||||
|
return React.Children.map(children, (child) => {
|
||||||
|
if (React.isValidElement(child) && typeof child.type !== 'string') {
|
||||||
|
return React.cloneElement(child, { isWithinStep: true });
|
||||||
|
}
|
||||||
|
return child;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="prose prose-slate dark:prose-invert max-w-none">
|
||||||
|
{title && (
|
||||||
|
<h3 className="mt-0 text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
{passPropsToChildren(children)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
21
nx-dev/ui-markdoc/src/lib/tags/steps.schema.ts
Normal file
21
nx-dev/ui-markdoc/src/lib/tags/steps.schema.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { Schema } from '@markdoc/markdoc';
|
||||||
|
import markdoc from '@markdoc/markdoc';
|
||||||
|
const { Tag } = markdoc;
|
||||||
|
|
||||||
|
export const steps: Schema = {
|
||||||
|
render: 'Steps',
|
||||||
|
attributes: {},
|
||||||
|
transform(node, config) {
|
||||||
|
return new Tag(this.render, {}, node.transformChildren(config));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const step: Schema = {
|
||||||
|
render: 'Step',
|
||||||
|
attributes: {
|
||||||
|
title: {
|
||||||
|
type: 'String',
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user