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
This commit is contained in:
Isaac Mann
GitHub
parent
a9f6ba553a
commit
c32d2c77f4
@ -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
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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" /%}
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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" /%} -->
|
||||
|
||||
<!-- {% youtube
|
||||
src="https://www.youtube.com/embed/ZA9K4iT3ANc"
|
||||
@ -114,7 +114,7 @@ If you run `nx graph` as instructed, you'll see the dependencies between your pr
|
||||
npx nx graph --focus=@tuskdesign/zoo
|
||||
```
|
||||
|
||||
{% graph title="Tusk Design" height="200px" jsonFile="shared/tutorials/npm-workspaces-project-graph.json" %}
|
||||
{% graph title="Tusk Design" height="200px" jsonFile="shared/tutorials/typescript-packages-project-graph.json" %}
|
||||
{% /graph %}
|
||||
|
||||
Nx uses this graph to determine the order tasks are run and enforce module boundaries. You can also leverage this graph to gain an accurate understanding of the architecture of your codebase. Part of what makes this graph invaluable is that it is derived directly from your codebase, so it will never become out of date.
|
||||
@ -199,7 +199,7 @@ Alternatively, you can pass the `--graph` option to the run command to inspect t
|
||||
npx nx run @tuskdesign/zoo:build --graph
|
||||
```
|
||||
|
||||
{% graph height="200px" title="Build Task Pipeline" type="task" jsonFile="shared/tutorials/npm-workspaces-build-tasks1.json" %}
|
||||
{% graph height="200px" title="Build Task Pipeline" type="task" jsonFile="shared/tutorials/typescript-packages-build-tasks1.json" %}
|
||||
{% /graph %}
|
||||
|
||||
### Create a Task Pipeline
|
||||
@ -287,7 +287,7 @@ The `nx add` command installs the version of the plugin that matches your repo's
|
||||
npx nx show project @tuskdesign/zoo
|
||||
```
|
||||
|
||||
{% project-details title="Project Details View" jsonFile="shared/tutorials/npm-workspaces-pdv.json" %}
|
||||
{% project-details title="Project Details View" jsonFile="shared/tutorials/typescript-packages-pdv.json" %}
|
||||
{% /project-details %}
|
||||
|
||||
Notice that the `inputs` that are inferred for the `build` task match the `include` and `exclude` settings in the `tsconfig.lib.json` file. As those settings are changed, the cache `inputs` will automatically update to the correct values.
|
||||
@ -350,7 +350,7 @@ Open up the task graph for `zoo` app's `serve` task again to see the changes.
|
||||
npx nx run @tuskdesign/zoo:serve --graph
|
||||
```
|
||||
|
||||
{% graph height="200px" title="Build Task Pipeline" type="task" jsonFile="shared/tutorials/npm-workspaces-build-tasks2.json" %}
|
||||
{% graph height="200px" title="Build Task Pipeline" type="task" jsonFile="shared/tutorials/typescript-packages-build-tasks2.json" %}
|
||||
{% /graph %}
|
||||
|
||||
## Manage Releases
|
||||
@ -390,7 +390,7 @@ After this first release, you can remove the `--first-release` flag and just run
|
||||
<!-- {% video-link link="https://youtu.be/ZA9K4iT3ANc?t=821" /%} -->
|
||||
|
||||
{% 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.
|
||||
@ -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':
|
||||
|
||||
@ -135,7 +135,7 @@ export function SmarterToolsForMonorepos(): JSX.Element {
|
||||
</Card>
|
||||
<Card>
|
||||
<Link
|
||||
href="/getting-started/tutorials/npm-workspaces-tutorial?utm_medium=website&utm_campaign=homepage_links&utm_content=cta_smarter_tools_techlink"
|
||||
href="/getting-started/tutorials/typescript-packages-tutorial?utm_medium=website&utm_campaign=homepage_links&utm_content=cta_smarter_tools_techlink"
|
||||
prefetch={false}
|
||||
title="Nx with Typescript"
|
||||
className="h-full w-full p-2 sm:p-4"
|
||||
@ -675,7 +675,7 @@ export function SmarterToolsForMonorepos(): JSX.Element {
|
||||
</Card>
|
||||
<Card>
|
||||
<Link
|
||||
href="/getting-started/tutorials/npm-workspaces-tutorial?utm_medium=website&utm_campaign=homepage_links&utm_content=cta_smarter_tools_techlink"
|
||||
href="/getting-started/tutorials/typescript-packages-tutorial?utm_medium=website&utm_campaign=homepage_links&utm_content=cta_smarter_tools_techlink"
|
||||
prefetch={false}
|
||||
title="Nx with Typescript"
|
||||
className="h-full w-full p-2 sm:p-4"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user