From c32d2c77f4063eaa0fdaf8e5ff40546f1da799fa Mon Sep 17 00:00:00 2001 From: Isaac Mann Date: Wed, 22 Jan 2025 14:30:55 -0500 Subject: [PATCH] docs(core): typescript packages tutorial (#29721) Renames the NPM workspaces tutorial to TypeScript Packages tutorial and updates the intro text a bit. The content is all still valid for ts project references --- docs/generated/manifests/menus.json | 18 ++++++------- docs/generated/manifests/nx.json | 26 +++++++++---------- docs/map.json | 6 ++--- .../deprecated/integrated-vs-package-based.md | 2 +- docs/shared/getting-started/installation.md | 2 +- docs/shared/getting-started/intro.md | 2 +- docs/shared/migration/adding-to-monorepo.md | 2 +- docs/shared/reference/sitemap.md | 2 +- ... => typescript-packages-build-tasks1.json} | 0 ... => typescript-packages-build-tasks2.json} | 0 ...-pdv.json => typescript-packages-pdv.json} | 0 ...=> typescript-packages-project-graph.json} | 0 ...m-workspaces.md => typescript-packages.md} | 20 +++++++------- nx-dev/nx-dev/redirect-rules.js | 8 +++--- .../src/lib/smarter-tools-for-monorepos.tsx | 4 +-- 15 files changed, 47 insertions(+), 45 deletions(-) rename docs/shared/tutorials/{npm-workspaces-build-tasks1.json => typescript-packages-build-tasks1.json} (100%) rename docs/shared/tutorials/{npm-workspaces-build-tasks2.json => typescript-packages-build-tasks2.json} (100%) rename docs/shared/tutorials/{npm-workspaces-pdv.json => typescript-packages-pdv.json} (100%) rename docs/shared/tutorials/{npm-workspaces-project-graph.json => typescript-packages-project-graph.json} (100%) rename docs/shared/tutorials/{npm-workspaces.md => typescript-packages.md} (96%) diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index ca0e84e1eb..7cb7776179 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -47,9 +47,9 @@ "isExternal": false, "children": [ { - "name": "NPM Workspaces Monorepo", - "path": "/getting-started/tutorials/npm-workspaces-tutorial", - "id": "npm-workspaces-tutorial", + "name": "TypeScript Packages", + "path": "/getting-started/tutorials/typescript-packages-tutorial", + "id": "typescript-packages-tutorial", "isExternal": false, "children": [], "disableCollapsible": false @@ -147,9 +147,9 @@ "isExternal": false, "children": [ { - "name": "NPM Workspaces Monorepo", - "path": "/getting-started/tutorials/npm-workspaces-tutorial", - "id": "npm-workspaces-tutorial", + "name": "TypeScript Packages", + "path": "/getting-started/tutorials/typescript-packages-tutorial", + "id": "typescript-packages-tutorial", "isExternal": false, "children": [], "disableCollapsible": false @@ -206,9 +206,9 @@ "disableCollapsible": false }, { - "name": "NPM Workspaces Monorepo", - "path": "/getting-started/tutorials/npm-workspaces-tutorial", - "id": "npm-workspaces-tutorial", + "name": "TypeScript Packages", + "path": "/getting-started/tutorials/typescript-packages-tutorial", + "id": "typescript-packages-tutorial", "isExternal": false, "children": [], "disableCollapsible": false diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index 334739d018..c594af88cb 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -58,14 +58,14 @@ "file": "", "itemList": [ { - "id": "npm-workspaces-tutorial", - "name": "NPM Workspaces Monorepo", + "id": "typescript-packages-tutorial", + "name": "TypeScript Packages", "description": "", "mediaImage": "", - "file": "shared/tutorials/npm-workspaces", + "file": "shared/tutorials/typescript-packages", "itemList": [], "isExternal": false, - "path": "/getting-started/tutorials/npm-workspaces-tutorial", + "path": "/getting-started/tutorials/typescript-packages-tutorial", "tags": [] }, { @@ -196,14 +196,14 @@ "file": "", "itemList": [ { - "id": "npm-workspaces-tutorial", - "name": "NPM Workspaces Monorepo", + "id": "typescript-packages-tutorial", + "name": "TypeScript Packages", "description": "", "mediaImage": "", - "file": "shared/tutorials/npm-workspaces", + "file": "shared/tutorials/typescript-packages", "itemList": [], "isExternal": false, - "path": "/getting-started/tutorials/npm-workspaces-tutorial", + "path": "/getting-started/tutorials/typescript-packages-tutorial", "tags": [] }, { @@ -277,15 +277,15 @@ "path": "/getting-started/tutorials", "tags": [] }, - "/getting-started/tutorials/npm-workspaces-tutorial": { - "id": "npm-workspaces-tutorial", - "name": "NPM Workspaces Monorepo", + "/getting-started/tutorials/typescript-packages-tutorial": { + "id": "typescript-packages-tutorial", + "name": "TypeScript Packages", "description": "", "mediaImage": "", - "file": "shared/tutorials/npm-workspaces", + "file": "shared/tutorials/typescript-packages", "itemList": [], "isExternal": false, - "path": "/getting-started/tutorials/npm-workspaces-tutorial", + "path": "/getting-started/tutorials/typescript-packages-tutorial", "tags": [] }, "/getting-started/tutorials/react-standalone-tutorial": { diff --git a/docs/map.json b/docs/map.json index 9e384f7fbb..8b7e176c79 100644 --- a/docs/map.json +++ b/docs/map.json @@ -41,9 +41,9 @@ "description": "Get started with basic information, concepts and tutorials.", "itemList": [ { - "name": "NPM Workspaces Monorepo", - "id": "npm-workspaces-tutorial", - "file": "shared/tutorials/npm-workspaces" + "name": "TypeScript Packages", + "id": "typescript-packages-tutorial", + "file": "shared/tutorials/typescript-packages" }, { "name": "React Standalone", diff --git a/docs/shared/deprecated/integrated-vs-package-based.md b/docs/shared/deprecated/integrated-vs-package-based.md index 71d17f788c..65d908be2f 100644 --- a/docs/shared/deprecated/integrated-vs-package-based.md +++ b/docs/shared/deprecated/integrated-vs-package-based.md @@ -33,7 +33,7 @@ Someone who appreciates the flexibility of a package-based repository will be mo - Easily create new projects or tools with [code generators](/features/generate-code) {% cards %} -{% card title="NPM Workspaces Tutorial" description="Add Nx to an existing NPM workspaces repo" type="documentation" url="/getting-started/tutorials/npm-workspaces-tutorial" /%} +{% card title="TypeScript Packages Tutorial" description="Add Nx to an existing TypeScript repo" type="documentation" url="/getting-started/tutorials/typescript-packages-tutorial" /%} {% /cards %} ## Integrated Repos diff --git a/docs/shared/getting-started/installation.md b/docs/shared/getting-started/installation.md index a3d84817d2..429f083d5e 100644 --- a/docs/shared/getting-started/installation.md +++ b/docs/shared/getting-started/installation.md @@ -136,7 +136,7 @@ To avoid potential issues, it is [recommended to update one major version of Nx Try one of these tutorials for a full walkthrough of what to do after you install Nx -- [NPM Workspaces Tutorial](/getting-started/tutorials/npm-workspaces-tutorial) +- [TypeScript Packages Tutorial](/getting-started/tutorials/typescript-packages-tutorial) - [Single React App Tutorial](/getting-started/tutorials/react-standalone-tutorial) - [Single Angular App Tutorial](/getting-started/tutorials/angular-standalone-tutorial) - [Single Vue App Tutorial](/getting-started/tutorials/vue-standalone-tutorial) diff --git a/docs/shared/getting-started/intro.md b/docs/shared/getting-started/intro.md index 4cbb3ff4a6..789f8b3641 100644 --- a/docs/shared/getting-started/intro.md +++ b/docs/shared/getting-started/intro.md @@ -61,7 +61,7 @@ Also, here are some recipes that give you more details based on the technology s {% cards cols="2" lgCols="3" mdCols="3" smCols="2" %} -{% link-card title="NPM Workspaces" type="tutorial" url="/getting-started/tutorials/npm-workspaces-tutorial" icon="jsMono" /%} +{% link-card title="TypeScript Packages" type="tutorial" url="/getting-started/tutorials/typescript-packages-tutorial" icon="jsMono" /%} {% link-card title="Single React App" type="tutorial" url="/getting-started/tutorials/react-standalone-tutorial" icon="react" /%} diff --git a/docs/shared/migration/adding-to-monorepo.md b/docs/shared/migration/adding-to-monorepo.md index 1a6e9e2f8c..6c8ccad8ea 100644 --- a/docs/shared/migration/adding-to-monorepo.md +++ b/docs/shared/migration/adding-to-monorepo.md @@ -6,7 +6,7 @@ powering Nx underneath. As a result, Lerna gets all the modern features such as on [https://lerna.js.org/upgrade](https://lerna.js.org/upgrade). {% /callout %} -Nx has first-class support for [monorepos](/getting-started/tutorials/npm-workspaces-tutorial). If you have +Nx has first-class support for [monorepos](/getting-started/tutorials/typescript-packages-tutorial). If you have an existing NPM/Yarn or PNPM-based monorepo setup, you can easily add Nx to get - fast [task scheduling](/features/run-tasks) diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index b8c078c46f..c6323f0e04 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -6,7 +6,7 @@ - [Why Nx?](/getting-started/why-nx) - [Editor Setup](/getting-started/editor-setup) - [Tutorials](/getting-started/tutorials) - - [NPM Workspaces Monorepo](/getting-started/tutorials/npm-workspaces-tutorial) + - [TypeScript Packages](/getting-started/tutorials/typescript-packages-tutorial) - [React Standalone](/getting-started/tutorials/react-standalone-tutorial) - [React Monorepo](/getting-started/tutorials/react-monorepo-tutorial) - [Angular Standalone](/getting-started/tutorials/angular-standalone-tutorial) diff --git a/docs/shared/tutorials/npm-workspaces-build-tasks1.json b/docs/shared/tutorials/typescript-packages-build-tasks1.json similarity index 100% rename from docs/shared/tutorials/npm-workspaces-build-tasks1.json rename to docs/shared/tutorials/typescript-packages-build-tasks1.json diff --git a/docs/shared/tutorials/npm-workspaces-build-tasks2.json b/docs/shared/tutorials/typescript-packages-build-tasks2.json similarity index 100% rename from docs/shared/tutorials/npm-workspaces-build-tasks2.json rename to docs/shared/tutorials/typescript-packages-build-tasks2.json diff --git a/docs/shared/tutorials/npm-workspaces-pdv.json b/docs/shared/tutorials/typescript-packages-pdv.json similarity index 100% rename from docs/shared/tutorials/npm-workspaces-pdv.json rename to docs/shared/tutorials/typescript-packages-pdv.json diff --git a/docs/shared/tutorials/npm-workspaces-project-graph.json b/docs/shared/tutorials/typescript-packages-project-graph.json similarity index 100% rename from docs/shared/tutorials/npm-workspaces-project-graph.json rename to docs/shared/tutorials/typescript-packages-project-graph.json diff --git a/docs/shared/tutorials/npm-workspaces.md b/docs/shared/tutorials/typescript-packages.md similarity index 96% rename from docs/shared/tutorials/npm-workspaces.md rename to docs/shared/tutorials/typescript-packages.md index 63e988b560..0342a4b1bb 100644 --- a/docs/shared/tutorials/npm-workspaces.md +++ b/docs/shared/tutorials/typescript-packages.md @@ -1,11 +1,11 @@ --- -title: 'NPM Workspaces Tutorial' -description: In this tutorial you'll add Nx to an existing NPM workspaces repo +title: 'TypeScript Packages Tutorial' +description: In this tutorial you'll add Nx to an existing TypeScript repo --- -# NPM Workspaces Tutorial +# TypeScript Packages Tutorial -In this tutorial, you'll learn how to add Nx to a repository with an existing [NPM workspaces](https://docs.npmjs.com/cli/using-npm/workspaces) setup. +In this tutorial, you'll learn how to add Nx to a repository with an existing TypeScript project. The starting repository uses [NPM workspaces](https://docs.npmjs.com/cli/using-npm/workspaces) for project linking and is configured to build with [TypeScript project references](https://www.typescriptlang.org/docs/handbook/project-references.html). What will you learn? @@ -20,7 +20,7 @@ What will you learn? Here's the source code of the final result for this tutorial. -{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/npm-workspaces" /%} --> +{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/typescript-packages" /%} --> {% callout type="check" title="Forked repository with Nx" %} -Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can fork the [sample repository with Nx already added](https://github.com/nrwl/nx-recipes/tree/main/npm-workspaces). +Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can fork the [sample repository with Nx already added](https://github.com/nrwl/nx-recipes/tree/main/typescript-packages). {% /callout %} So far in this tutorial you've seen how Nx improves the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution. diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index 3634ae9551..f44d49b6b0 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -772,9 +772,9 @@ const conceptUrls = { '/concepts/more-concepts/global-nx': '/getting-started/installation#installing-nx-globally', '/getting-started/package-based-repo-tutorial': - '/getting-started/tutorials/npm-workspaces-tutorial', + '/getting-started/tutorials/typescript-packages-tutorial', '/getting-started/tutorials/package-based-repo-tutorial': - '/getting-started/tutorials/npm-workspaces-tutorial', + '/getting-started/tutorials/typescript-packages-tutorial', '/getting-started/integrated-repo-tutorial': '/getting-started/tutorials/react-monorepo-tutorial', '/getting-started/tutorials/integrated-repo-tutorial': @@ -797,7 +797,9 @@ const conceptUrls = { const nested5minuteTutorialUrls = { '/tutorials/package-based-repo-tutorial': - '/getting-started/tutorials/npm-workspaces-tutorial', + '/getting-started/tutorials/typescript-packages-tutorial', + '/getting-started/tutorials/npm-workspaces-tutorial': + '/getting-started/tutorials/typescript-packages-tutorial', '/tutorials/integrated-repo-tutorial': '/getting-started/tutorials/integrated-repo-tutorial', '/tutorials/react-standalone-tutorial': diff --git a/nx-dev/ui-home/src/lib/smarter-tools-for-monorepos.tsx b/nx-dev/ui-home/src/lib/smarter-tools-for-monorepos.tsx index 035427add1..c21f6693ac 100644 --- a/nx-dev/ui-home/src/lib/smarter-tools-for-monorepos.tsx +++ b/nx-dev/ui-home/src/lib/smarter-tools-for-monorepos.tsx @@ -135,7 +135,7 @@ export function SmarterToolsForMonorepos(): JSX.Element {