diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 2d2c680837028..793b7006a943f 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -350,184 +350,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "React Monorepo Tutorial", - "path": "/react-tutorial", - "id": "react-tutorial", - "isExternal": false, - "children": [ - { - "name": "1 - Code Generation", - "path": "/react-tutorial/1-code-generation", - "id": "1-code-generation", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "2 - Project Graph", - "path": "/react-tutorial/2-project-graph", - "id": "2-project-graph", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "3 - Task Running", - "path": "/react-tutorial/3-task-running", - "id": "3-task-running", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "4 - Workspace Optimization", - "path": "/react-tutorial/4-workspace-optimization", - "id": "4-workspace-optimization", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "5 - Summary", - "path": "/react-tutorial/5-summary", - "id": "5-summary", - "isExternal": false, - "children": [], - "disableCollapsible": false - } - ], - "disableCollapsible": false - }, - { - "name": "1 - Code Generation", - "path": "/react-tutorial/1-code-generation", - "id": "1-code-generation", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "2 - Project Graph", - "path": "/react-tutorial/2-project-graph", - "id": "2-project-graph", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "3 - Task Running", - "path": "/react-tutorial/3-task-running", - "id": "3-task-running", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "4 - Workspace Optimization", - "path": "/react-tutorial/4-workspace-optimization", - "id": "4-workspace-optimization", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "5 - Summary", - "path": "/react-tutorial/5-summary", - "id": "5-summary", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "React Standalone Tutorial", - "path": "/react-standalone-tutorial", - "id": "react-standalone-tutorial", - "isExternal": false, - "children": [ - { - "name": "1 - Code Generation", - "path": "/react-standalone-tutorial/1-code-generation", - "id": "1-code-generation", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "2 - Project Graph", - "path": "/react-standalone-tutorial/2-project-graph", - "id": "2-project-graph", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "3 - Task Running", - "path": "/react-standalone-tutorial/3-task-running", - "id": "3-task-running", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "4 - Task Pipelines", - "path": "/react-standalone-tutorial/4-task-pipelines", - "id": "4-task-pipelines", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "5 - Summary", - "path": "/react-standalone-tutorial/5-summary", - "id": "5-summary", - "isExternal": false, - "children": [], - "disableCollapsible": false - } - ], - "disableCollapsible": false - }, - { - "name": "1 - Code Generation", - "path": "/react-standalone-tutorial/1-code-generation", - "id": "1-code-generation", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "2 - Project Graph", - "path": "/react-standalone-tutorial/2-project-graph", - "id": "2-project-graph", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "3 - Task Running", - "path": "/react-standalone-tutorial/3-task-running", - "id": "3-task-running", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "4 - Task Pipelines", - "path": "/react-standalone-tutorial/4-task-pipelines", - "id": "4-task-pipelines", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, - { - "name": "5 - Summary", - "path": "/react-standalone-tutorial/5-summary", - "id": "5-summary", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Angular Standalone Tutorial", "path": "/angular-standalone-tutorial", @@ -4328,14 +4150,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Powering Up React Development With Nx", - "path": "/showcase/example-repos/react-nx", - "id": "react-nx", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Using Apollo GraphQL", "path": "/showcase/example-repos/apollo-react", @@ -4525,14 +4339,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Powering Up React Development With Nx", - "path": "/showcase/example-repos/react-nx", - "id": "react-nx", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Using Apollo GraphQL", "path": "/showcase/example-repos/apollo-react", @@ -4680,14 +4486,6 @@ "children": [], "disableCollapsible": false }, - { - "name": "Powering Up React Development With Nx", - "path": "/showcase/example-repos/react-nx", - "id": "react-nx", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Using Apollo GraphQL", "path": "/showcase/example-repos/apollo-react", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index f5d4d45eed88f..0b49d189fc333 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -433,228 +433,6 @@ "path": "/core-tutorial/06-summary", "tags": [] }, - "/react-tutorial": { - "id": "react-tutorial", - "name": "React Monorepo Tutorial", - "description": "In this tutorial you'll create a frontend-focused workspace with Nx.", - "file": "", - "itemList": [ - { - "id": "1-code-generation", - "name": "1 - Code Generation", - "description": "", - "file": "shared/react-tutorial/1-code-generation", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/1-code-generation", - "tags": [] - }, - { - "id": "2-project-graph", - "name": "2 - Project Graph", - "description": "", - "file": "shared/react-tutorial/2-project-graph", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/2-project-graph", - "tags": [] - }, - { - "id": "3-task-running", - "name": "3 - Task Running", - "description": "", - "file": "shared/react-tutorial/3-task-running", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/3-task-running", - "tags": [] - }, - { - "id": "4-workspace-optimization", - "name": "4 - Workspace Optimization", - "description": "", - "file": "shared/react-tutorial/4-workspace-optimization", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/4-workspace-optimization", - "tags": [] - }, - { - "id": "5-summary", - "name": "5 - Summary", - "description": "", - "file": "shared/react-tutorial/5-summary", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/5-summary", - "tags": [] - } - ], - "isExternal": false, - "path": "/react-tutorial", - "tags": [] - }, - "/react-tutorial/1-code-generation": { - "id": "1-code-generation", - "name": "1 - Code Generation", - "description": "", - "file": "shared/react-tutorial/1-code-generation", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/1-code-generation", - "tags": [] - }, - "/react-tutorial/2-project-graph": { - "id": "2-project-graph", - "name": "2 - Project Graph", - "description": "", - "file": "shared/react-tutorial/2-project-graph", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/2-project-graph", - "tags": [] - }, - "/react-tutorial/3-task-running": { - "id": "3-task-running", - "name": "3 - Task Running", - "description": "", - "file": "shared/react-tutorial/3-task-running", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/3-task-running", - "tags": [] - }, - "/react-tutorial/4-workspace-optimization": { - "id": "4-workspace-optimization", - "name": "4 - Workspace Optimization", - "description": "", - "file": "shared/react-tutorial/4-workspace-optimization", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/4-workspace-optimization", - "tags": [] - }, - "/react-tutorial/5-summary": { - "id": "5-summary", - "name": "5 - Summary", - "description": "", - "file": "shared/react-tutorial/5-summary", - "itemList": [], - "isExternal": false, - "path": "/react-tutorial/5-summary", - "tags": [] - }, - "/react-standalone-tutorial": { - "id": "react-standalone-tutorial", - "name": "React Standalone Tutorial", - "description": "In this tutorial you'll create a frontend-focused workspace with Nx.", - "file": "", - "itemList": [ - { - "id": "1-code-generation", - "name": "1 - Code Generation", - "description": "", - "file": "shared/react-standalone-tutorial/1-code-generation", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/1-code-generation", - "tags": [] - }, - { - "id": "2-project-graph", - "name": "2 - Project Graph", - "description": "", - "file": "shared/react-standalone-tutorial/2-project-graph", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/2-project-graph", - "tags": [] - }, - { - "id": "3-task-running", - "name": "3 - Task Running", - "description": "", - "file": "shared/react-standalone-tutorial/3-task-running", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/3-task-running", - "tags": [] - }, - { - "id": "4-task-pipelines", - "name": "4 - Task Pipelines", - "description": "", - "file": "shared/react-standalone-tutorial/4-task-pipelines", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/4-task-pipelines", - "tags": [] - }, - { - "id": "5-summary", - "name": "5 - Summary", - "description": "", - "file": "shared/react-standalone-tutorial/5-summary", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/5-summary", - "tags": [] - } - ], - "isExternal": false, - "path": "/react-standalone-tutorial", - "tags": [] - }, - "/react-standalone-tutorial/1-code-generation": { - "id": "1-code-generation", - "name": "1 - Code Generation", - "description": "", - "file": "shared/react-standalone-tutorial/1-code-generation", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/1-code-generation", - "tags": [] - }, - "/react-standalone-tutorial/2-project-graph": { - "id": "2-project-graph", - "name": "2 - Project Graph", - "description": "", - "file": "shared/react-standalone-tutorial/2-project-graph", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/2-project-graph", - "tags": [] - }, - "/react-standalone-tutorial/3-task-running": { - "id": "3-task-running", - "name": "3 - Task Running", - "description": "", - "file": "shared/react-standalone-tutorial/3-task-running", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/3-task-running", - "tags": [] - }, - "/react-standalone-tutorial/4-task-pipelines": { - "id": "4-task-pipelines", - "name": "4 - Task Pipelines", - "description": "", - "file": "shared/react-standalone-tutorial/4-task-pipelines", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/4-task-pipelines", - "tags": [] - }, - "/react-standalone-tutorial/5-summary": { - "id": "5-summary", - "name": "5 - Summary", - "description": "", - "file": "shared/react-standalone-tutorial/5-summary", - "itemList": [], - "isExternal": false, - "path": "/react-standalone-tutorial/5-summary", - "tags": [] - }, "/angular-standalone-tutorial": { "id": "angular-standalone-tutorial", "name": "Angular Standalone Tutorial", @@ -5396,16 +5174,6 @@ "path": "/showcase/example-repos/add-fastify", "tags": [] }, - { - "id": "react-nx", - "name": "Powering Up React Development With Nx", - "description": "", - "file": "shared/examples/react-nx", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/react-nx", - "tags": [] - }, { "id": "apollo-react", "name": "Using Apollo GraphQL", @@ -5643,16 +5411,6 @@ "path": "/showcase/example-repos/add-fastify", "tags": [] }, - { - "id": "react-nx", - "name": "Powering Up React Development With Nx", - "description": "", - "file": "shared/examples/react-nx", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/react-nx", - "tags": [] - }, { "id": "apollo-react", "name": "Using Apollo GraphQL", @@ -5838,16 +5596,6 @@ "path": "/showcase/example-repos/add-fastify", "tags": [] }, - "/showcase/example-repos/react-nx": { - "id": "react-nx", - "name": "Powering Up React Development With Nx", - "description": "", - "file": "shared/examples/react-nx", - "itemList": [], - "isExternal": false, - "path": "/showcase/example-repos/react-nx", - "tags": [] - }, "/showcase/example-repos/apollo-react": { "id": "apollo-react", "name": "Using Apollo GraphQL", diff --git a/docs/map.json b/docs/map.json index 2d95836030372..245e2a6462573 100644 --- a/docs/map.json +++ b/docs/map.json @@ -109,70 +109,6 @@ } ] }, - { - "name": "React Monorepo Tutorial", - "id": "react-tutorial", - "description": "In this tutorial you'll create a frontend-focused workspace with Nx.", - "itemList": [ - { - "name": "1 - Code Generation", - "id": "1-code-generation", - "file": "shared/react-tutorial/1-code-generation" - }, - { - "name": "2 - Project Graph", - "id": "2-project-graph", - "file": "shared/react-tutorial/2-project-graph" - }, - { - "name": "3 - Task Running", - "id": "3-task-running", - "file": "shared/react-tutorial/3-task-running" - }, - { - "name": "4 - Workspace Optimization", - "id": "4-workspace-optimization", - "file": "shared/react-tutorial/4-workspace-optimization" - }, - { - "name": "5 - Summary", - "id": "5-summary", - "file": "shared/react-tutorial/5-summary" - } - ] - }, - { - "name": "React Standalone Tutorial", - "id": "react-standalone-tutorial", - "description": "In this tutorial you'll create a frontend-focused workspace with Nx.", - "itemList": [ - { - "name": "1 - Code Generation", - "id": "1-code-generation", - "file": "shared/react-standalone-tutorial/1-code-generation" - }, - { - "name": "2 - Project Graph", - "id": "2-project-graph", - "file": "shared/react-standalone-tutorial/2-project-graph" - }, - { - "name": "3 - Task Running", - "id": "3-task-running", - "file": "shared/react-standalone-tutorial/3-task-running" - }, - { - "name": "4 - Task Pipelines", - "id": "4-task-pipelines", - "file": "shared/react-standalone-tutorial/4-task-pipelines" - }, - { - "name": "5 - Summary", - "id": "5-summary", - "file": "shared/react-standalone-tutorial/5-summary" - } - ] - }, { "name": "Angular Standalone Tutorial", "id": "angular-standalone-tutorial", @@ -1264,11 +1200,6 @@ "description": "Add a Fastify project to your repo", "file": "shared/recipes/add-stack/add-fastify" }, - { - "name": "Powering Up React Development With Nx", - "id": "react-nx", - "file": "shared/examples/react-nx" - }, { "name": "Using Apollo GraphQL", "id": "apollo-react", diff --git a/docs/shared/core-tutorial/01-create-blog.md b/docs/shared/core-tutorial/01-create-blog.md index c07cefa630d02..d20e56251391b 100644 --- a/docs/shared/core-tutorial/01-create-blog.md +++ b/docs/shared/core-tutorial/01-create-blog.md @@ -3,7 +3,7 @@ In this tutorial you create multiple projects in a monorepo and take advantage of the core Nx features with a minimum of configuration. {% callout type="check" title="Package-Based Repo" %} -This tutorial sets up a [package-based repo](/concepts/integrated-vs-package-based). If you prefer an [integrated repo](/concepts/integrated-vs-package-based), check out the [React](/react-tutorial/1-code-generation), [Angular](/getting-started/tutorials/angular-monorepo-tutorial) or [Node](/getting-started/tutorials/node-server-tutorial) tutorials. +This tutorial sets up a [package-based repo](/concepts/integrated-vs-package-based). If you prefer an [integrated repo](/concepts/integrated-vs-package-based), check out the [React](/getting-started/tutorials/react-monorepo-tutorial), [Angular](/getting-started/tutorials/angular-monorepo-tutorial) or [Node](/getting-started/tutorials/node-server-tutorial) tutorials. {% /callout %} ## Contents: diff --git a/docs/shared/examples/react-nx.md b/docs/shared/examples/react-nx.md deleted file mode 100644 index 80abc0cd34bdb..0000000000000 --- a/docs/shared/examples/react-nx.md +++ /dev/null @@ -1,12 +0,0 @@ -# Powering Up React Development With Nx - -Learn to: - -- Generate a new React monorepo workspace with one application. -- Add new feature libraries and route to them from our application. -- Create React components with a generator -- Generate a NestJS app in the same monorepo - -**Blog post:** [Powering Up React Development With Nx](https://blog.nrwl.io/powering-up-react-development-with-nx-cf0a9385dbec) - -{% github-repository url="https://github.com/nrwl/react-nx-example" /%} diff --git a/docs/shared/npm-tutorial/integrated.md b/docs/shared/npm-tutorial/integrated.md index a407cd32980ab..8f8ad5b55e1ff 100644 --- a/docs/shared/npm-tutorial/integrated.md +++ b/docs/shared/npm-tutorial/integrated.md @@ -237,7 +237,7 @@ npx nx affected -t build {% card title="Integrated Repos vs Package-Based Repos" description="Learn about two styles of monorepos." url="/concepts/integrated-vs-package-based" /%} -{% card title="React Tutorial" description="A step-by-step tutorial showing how to build an integrated monorepo with React applications sharing code." url="/react-tutorial/1-code-generation" /%} +{% card title="React Tutorial" description="A step-by-step tutorial showing how to build an integrated monorepo with React applications sharing code." url="/getting-started/tutorials/react-monorepo-tutorial" /%} {% card title="Node.js Tutorial" description="A step-by-step tutorial showing how to build an integrated monorepo with Node.js applications sharing code." url="/getting-started/tutorials/node-server-tutorial" /%} diff --git a/docs/shared/react-standalone-tutorial/1-code-generation.md b/docs/shared/react-standalone-tutorial/1-code-generation.md deleted file mode 100644 index 4165a3ca4fec3..0000000000000 --- a/docs/shared/react-standalone-tutorial/1-code-generation.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: 'React Standalone Tutorial - Part 1: Code Generation' -description: In this tutorial you'll create a frontend-focused workspace with Nx. ---- - -{% callout type="check" title="Looking for React monorepos?" %} -This tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. If you are looking for a React monorepo setup then check out our [React monorepo tutorial](/react-tutorial/1-code-generation). - -{% /callout %} - -{% youtube -src="https://www.youtube.com/embed/dqCZteGFP4k" -title="Tutorial: React Standalone Application" -/%} - -{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/react-standalone" /%} - -# React Standalone Tutorial - Part 1: Code Generation - -## Contents - -- [1 - Code Generation](/react-standalone-tutorial/1-code-generation) -- [2 - Project Graph](/react-standalone-tutorial/2-project-graph) -- [3 - Task Running](/react-standalone-tutorial/3-task-running) -- [4 - Task Pipelines](/react-standalone-tutorial/4-task-pipelines) -- [5 - Summary](/react-standalone-tutorial/5-summary) - -## Creating a New Workspace - -Run the command `npx create-nx-workspace@latest` and when prompted, provide the following responses: - -```{% command="npx create-nx-workspace@latest" path="~" %} - - > NX Let's create a new workspace [https://nx.dev/getting-started/intro] - -✔ Where would you like to create your workspace? · store -✔ Which stack do you want to use? · react -✔ What framework would you like to use? · none -✔ Standalone project or integrated monorepo? · standalone -✔ Which bundler would you like to use? · vite -✔ Default stylesheet format · css -✔ Enable distributed caching to make your CI faster · Yes -``` - -{% card title="Opting into Nx Cloud" description="You will also be prompted whether to add Nx Cloud to your workspace. We won't address this in this tutorial, but you can see the introduction to Nx Cloud for more details." url="/nx-cloud/intro/what-is-nx-cloud" /%} - -Once the command completes, the file structure should look like this: - -```treeview -store/ -├── e2e/ -├── src/ -├── tools/ -├── nx.json -├── package.json -├── project.json -├── README.md -├── tsconfig.base.json -└── tsconfig.json -``` - -There are two projects that have been created for you: - -- A React application (`store`) with its configuration files at the root of the repo and source code in `src`. -- A project for Cypress e2e tests for our `store` application in `e2e`. - -As far as Nx is concerned, the root-level `store` app owns every file that doesn't belong to a different project. So files in the `e2e` folder belong to the `e2e` project, everything else belongs to `store`. - -{% card title="Nx Cypress Support" description="While we see the Cypress project here, we won't go deeper on Cypress in this tutorial. You can find more materials on Nx Cypress support on the @nx/cypress package page." url="/packages/cypress" /%} - -## Generating a Component for the Store - -```{% command="npx nx g @nx/react:component shop" path="~/store" %} - -> NX Generating @nx/react:component - -✔ Which stylesheet format would you like to use? · css -✔ Should this component be exported in the project? (y/N) · false -CREATE src/app/shop/shop.module.css -CREATE src/app/shop/shop.spec.tsx -CREATE src/app/shop/shop.tsx -``` - -![Nx Generator Syntax](/shared/react-standalone-tutorial/generator-syntax.svg) - -## Generating Libraries - -To create the `cart` and `shared/ui` libraries, use the `@nx/react:lib` generator: - -```{% command="npx nx g @nx/react:library cart" path="~/store" %} - -> NX Generating @nx/react:library -✔ Which stylesheet format would you like to use? · css -✔ What unit test runner should be used? · vitest -✔ Which bundler would you like to use to build the library? · vite -UPDATE nx.json -CREATE cart/project.json -CREATE .eslintrc.base.json -UPDATE project.json -UPDATE .eslintrc.json -UPDATE e2e/.eslintrc.json -CREATE cart/.eslintrc.json -CREATE cart/README.md -CREATE cart/package.json -CREATE cart/src/index.ts -CREATE cart/tsconfig.json -CREATE cart/tsconfig.lib.json -CREATE cart/index.html -CREATE cart/src/demo.tsx -UPDATE tsconfig.base.json -UPDATE package.json -CREATE cart/vite.config.ts -CREATE cart/tsconfig.spec.json -CREATE cart/src/lib/cart.module.css -CREATE cart/src/lib/cart.spec.tsx -CREATE cart/src/lib/cart.tsx -``` - -```{% command="npx nx g @nx/react:lib shared/ui" path="~/store" %} - -> NX Generating @nx/react:library - -✔ Which bundler would you like to use to build the library? · vite -UPDATE nx.json -CREATE shared/ui/project.json -CREATE shared/ui/.eslintrc.json -CREATE shared/ui/README.md -CREATE shared/ui/package.json -CREATE shared/ui/src/index.ts -CREATE shared/ui/tsconfig.json -CREATE shared/ui/tsconfig.lib.json -CREATE shared/ui/index.html -CREATE shared/ui/src/demo.tsx -UPDATE tsconfig.base.json -CREATE shared/ui/vite.config.ts -CREATE shared/ui/tsconfig.spec.json -CREATE shared/ui/src/lib/shared-ui.module.css -CREATE shared/ui/src/lib/shared-ui.spec.tsx -CREATE shared/ui/src/lib/shared-ui.tsx -``` - -You should now be able to see all three projects of our design: - -- `store` in the root -- `cart` in `cart` -- `shared-ui` in `shared/ui` - -## What's Next - -- Continue to [2: Project Graph](/react-standalone-tutorial/2-project-graph) diff --git a/docs/shared/react-standalone-tutorial/2-project-graph.md b/docs/shared/react-standalone-tutorial/2-project-graph.md deleted file mode 100644 index 000ba5a8da164..0000000000000 --- a/docs/shared/react-standalone-tutorial/2-project-graph.md +++ /dev/null @@ -1,248 +0,0 @@ -# React Standalone Tutorial - Part 2: Project Graph - -Run the command: `npx nx graph`. A browser should open up with the following contents: - -{% graph height="450px" %} - -```json -{ - "hash": "85fd0561bd88f0bcd8703a9e9369592e2805f390d04982fb2401e700dc9ebc59", - "projects": [ - { - "name": "cart", - "type": "lib", - "data": { - "tags": [] - } - }, - { - "name": "shared-ui", - "type": "lib", - "data": { - "tags": [] - } - }, - { - "name": "e2e", - "type": "e2e", - "data": { - "tags": [] - } - }, - { - "name": "store", - "type": "app", - "data": { - "tags": [] - } - } - ], - "dependencies": { - "cart": [], - "shared-ui": [], - "e2e": [{ "source": "e2e", "target": "store", "type": "implicit" }], - "store": [] - }, - "workspaceLayout": { "appsDir": "apps", "libsDir": "libs" }, - "affectedProjectIds": [], - "focus": null, - "groupByFolder": false, - "exclude": [] -} -``` - -{% /graph %} - -Nx creates the graph based on the source code. The projects are not linked in this diagram because we haven't actually finished our application. Once we use the shared components in another project, Nx will create the dependency in the graph. Let's do that now. - -## Set Up the Router - -Install the `react-router-dom` package: - -```shell -npm i react-router-dom -``` - -And configure the routes: - -```javascript {% fileName="src/main.tsx" %} -import { StrictMode } from 'react'; -import { BrowserRouter } from 'react-router-dom'; -import * as ReactDOM from 'react-dom/client'; - -import App from './app/app'; - -const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement -); -root.render( - - - - - -); -``` - -```javascript {% fileName="src/app/app.tsx" %} -import { Cart } from '@store/cart'; -import { Route, Routes } from 'react-router-dom'; -import Shop from './shop/shop'; - -export function App() { - return ( - <> - - }> - }> - - - ); -} - -export default App; -``` - -{% callout type="note" title="Typescript Paths" %} -When a library is created, Nx adds a new Typescript path to the `tsconfig.base.json` file. The running Typescript server process inside of your editor sometimes doesn't pick up these changes and you have to restart the server to remove inline errors on your import statements. This can be done in VS Code from the command palette when viewing a typescript file (Command-Shift-P) "Typescript: Restart TS server" -{% /callout %} - -### `shared-ui` - -Run the `@nx/react:component` generator with the command: - -```{% command="npx nx g @nx/react:component banner --project=shared-ui --export" path="~/store" %} - -> NX Generating @nx/react:component - -CREATE shared/ui/src/lib/banner/banner.module.css -CREATE shared/ui/src/lib/banner/banner.spec.tsx -CREATE shared/ui/src/lib/banner/banner.tsx -UPDATE shared/ui/src/index.ts -``` - -Then create a simple `Banner` component in the generated file: - -```javascript {% fileName="shared/ui/src/lib/banner/banner.tsx" %} -export interface BannerProps { - text: string; -} - -export function Banner(props: BannerProps) { - return
{props.text}
; -} - -export default Banner; -``` - -### `cart` - -Add the `Banner` component to the cart route and link back to the main page: - -```javascript {% fileName="cart/src/lib/cart.tsx" %} -import { Banner } from '@store/shared/ui'; -import { Link } from 'react-router-dom'; -import styles from './cart.module.css'; - -/* eslint-disable-next-line */ -export interface CartProps {} - -export function Cart(props: CartProps) { - return ( -
- - Continue Shopping -
- ); -} - -export default Cart; -``` - -### `store` - -Update the `shop` component to use the `Banner` component and link to the cart. - -```javascript {% fileName="src/app/shop/shop.tsx" %} -import { Banner } from '@store/shared/ui'; -import { Link } from 'react-router-dom'; -import styles from './shop.module.css'; - -/* eslint-disable-next-line */ -export interface ShopProps {} - -export function Shop(props: ShopProps) { - return ( -
- - View Cart -
- ); -} - -export default Shop; -``` - -Now run `npx nx graph` again: - -{% graph height="450px" %} - -```json -{ - "hash": "85fd0561bd88f0bcd8703a9e9369592e2805f390d04982fb2401e700dc9ebc59", - "projects": [ - { - "name": "cart", - "type": "lib", - "data": { - "tags": [] - } - }, - { - "name": "shared-ui", - "type": "lib", - "data": { - "tags": [] - } - }, - { - "name": "e2e", - "type": "e2e", - "data": { - "tags": [] - } - }, - { - "name": "store", - "type": "app", - "data": { - "tags": [] - } - } - ], - "dependencies": { - "cart": [{ "source": "cart", "target": "shared-ui", "type": "static" }], - "shared-ui": [], - "e2e": [{ "source": "e2e", "target": "store", "type": "implicit" }], - "store": [ - { "source": "store", "target": "cart", "type": "static" }, - { "source": "store", "target": "shared-ui", "type": "static" } - ] - }, - "workspaceLayout": { "appsDir": "apps", "libsDir": "libs" }, - "affectedProjectIds": [], - "focus": null, - "groupByFolder": false, - "exclude": [] -} -``` - -{% /graph %} - -Your graph now shows the dependency lines we expected. - -The Project Graph is more than just a visualization - Nx provides tooling to optimize your task-running and even automate your CI based on this graph. This will be covered in more detail in: [4: Task Pipelines](/react-standalone-tutorial/4-task-pipelines). - -## What's Next - -- Continue to [3: Task Running](/react-standalone-tutorial/3-task-running) diff --git a/docs/shared/react-standalone-tutorial/3-task-running.md b/docs/shared/react-standalone-tutorial/3-task-running.md deleted file mode 100644 index 39a73c99dfffb..0000000000000 --- a/docs/shared/react-standalone-tutorial/3-task-running.md +++ /dev/null @@ -1,100 +0,0 @@ -# React Standalone Tutorial - 3: Task-Running - -Common tasks include: - -- Building an application -- Serving a local web server with the built project -- Running your unit tests -- Linting your code -- Running e2e tests - -When you ran your generators in Part 1, you already set up these common tasks for each project. - -## Defining Targets - -Here's the `project.json` file for your `shared-ui` project: - -```json {% fileName="libs/common-ui/project.json" %} -{ - "name": "shared-ui", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "shared/ui/src", - "projectType": "library", - "tags": [], - "targets": { - "build": { - "executor": "@nx/vite:build", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/shared/ui" - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["shared/ui/**/*.{ts,tsx,js,jsx}"] - } - }, - "test": { - "executor": "@nx/vite:test", - "outputs": ["{projectRoot}/coverage"], - "options": { - "passWithNoTests": true - } - } - } -} -``` - -You can see that three targets are defined here: `build`, `test` and `lint`. - -The properties inside each of these these targets is defined as follows: - -- `executor` - which Nx executor to run. The syntax here is: `:` -- `outputs` - this is an array of files that would be created by running this target. (This informs Nx on what to save for it's caching mechanisms you'll learn about in [4 - Task Pipelines](/react-standalone-tutorial/4-task-pipelines)). -- `options` - this is an object defining which executor options to use for the given target. Every Nx executor allows for options as a way to parameterize it's functionality. - -## Running Tasks - -![Syntax for Running Tasks in Nx](/shared/images/run-target-syntax.svg) - -Run the `test` target for your `shared-ui` project: - -```{% command="npx nx test shared-ui" path="~/store" %} - -> nx run shared-ui:test - - RUN v0.25.3 /Users/isaac/Documents/code/store/shared/ui - ✓ src/lib/banner/banner.spec.tsx (1 test) 12ms - ✓ src/lib/shared-ui.spec.tsx (1 test) 10ms - Test Files 2 passed (2) - Tests 2 passed (2) - Start at 15:00:09 - Duration 1.05s (transform 375ms, setup 1ms, collect 415ms, tests 22ms) - - ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target test for project shared-ui (2s) -``` - -Next, run a lint check on your `shared-ui` project: - -```{% command="npx nx lint shared-ui" path="~/store" %} - -> nx run shared-ui:lint - - -Linting "shared-ui"... - -All files pass linting. - - -——————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target lint for project shared-ui (2s) -``` - -## What's Next - -- Continue to [4: Task Pipelines](/react-standalone-tutorial/4-task-pipelines) diff --git a/docs/shared/react-standalone-tutorial/4-task-pipelines.md b/docs/shared/react-standalone-tutorial/4-task-pipelines.md deleted file mode 100644 index dba3349ca3e27..0000000000000 --- a/docs/shared/react-standalone-tutorial/4-task-pipelines.md +++ /dev/null @@ -1,241 +0,0 @@ -# React Standalone Tutorial - Part 4: Task Pipelines - -## Running Dependent Tasks - -Let's build the `store` application: - -```{% command="npx nx build store" path="~/store" %} - - ✔ 2/2 dependent project tasks succeeded [0 read from cache] - - Hint: you can run the command with --verbose to see the full dependent project outputs - - ———————————————————————————————————————————————————————————————————————————————————————————————————————— - - -> nx run store:build:production - - -vite v3.2.4 building for production... -✓ 43 modules transformed. -dist/store/index.html 0.46 KiB -dist/store/assets/index.50de2671.css 0.03 KiB / gzip: 0.05 KiB -dist/store/assets/index.f18c2b19.js 157.69 KiB / gzip: 51.26 KiB -dist/store/assets/index.f18c2b19.js.map 565.79 KiB - - ———————————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target build for project store and 2 task(s) they depend on (6s) - -``` - -Notice this line: - -```shell - ✔ 2/2 dependent project tasks succeeded [0 read from cache] -``` - -When you run a task, Nx will run all the task's dependencies before running the task you specified. This ensures all the needed artifacts are in place before the task is run. - -## Configuring Task Pipelines - -Nx can infer how projects depend on each other by examining the source code, but Nx doesn't know which tasks depend on each other. - -In the `nx.json` file you can see the default set up: - -```json -{ - "targetDefaults": { - "build": { - "dependsOn": ["^build"], - "inputs": ["production", "^production"] - } - } -} -``` - -The `"dependsOn": ["^build"]` line says that every `build` task depends on the `build` tasks for its project dependencies. You can override the `dependsOn` setting for individual projects in the `project.json` files. - -{% card title="More On The Task Pipeline Configuration" description="See the Task Pipeline Configuration Guide for more details on how to configure your Task Graph." url="/concepts/task-pipeline-configuration" /%} - -## Skip Repeated Tasks - -Why does Nx always run the dependent tasks? Doesn't that waste time repeating the same work? - -It would, if Nx didn't have a robust caching mechanism to take care of that problem for you. Let's build the `store` app again. - -```{% command="npx nx build store" path="~/store" %} - - ✔ 2/2 dependent project tasks succeeded [2 read from cache] - - Hint: you can run the command with --verbose to see the full dependent project outputs - - ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— - - -> nx run store:build:production [local cache] - - -vite v3.2.4 building for production... -✓ 43 modules transformed. -dist/store/index.html 0.46 KiB -dist/store/assets/index.50de2671.css 0.03 KiB / gzip: 0.05 KiB -dist/store/assets/index.f18c2b19.js 157.69 KiB / gzip: 51.26 KiB -dist/store/assets/index.f18c2b19.js.map 565.79 KiB - - - ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target build for project store and 2 task(s) they depend on (42ms) - - Nx read the output from the cache instead of running the command for 3 out of 3 tasks. -``` - -This time the build only took 42 ms. Also, if you delete the `dist` folder and run the command again, the build output will be recreated. - -{% card title="More Task Caching Details" description="See the documentation for more information on caching." url="/core-features/cache-task-results" /%} - -## Cache Inputs and Outputs - -How does Nx know when to replace a cached task result? And how does Nx know what should be cached? - -Nx determines if a project has been modified by looking at the task's defined `inputs`. And then when the task is completed, it caches the terminal output and all the defined file `outputs`. - -### Inputs - -When you run a task, Nx uses the inputs for your task to create a hash that is used as an index for the task results. If the task has already been run with the same inputs, Nx replays the results stored in the cache. - -If this index does not exist, Nx runs the command and if the command succeeds, it stores the result in the cache. - -{% card title="More On Customizing Inputs" description="See the Customizing Inputs Guide for more details on how to set inputs for your tasks." url="/concepts/task-pipeline-configuration" /%} - -### Outputs - -Outputs of the cache include the terminal output created by the task, as well as any files created by the task - for example: the artifact created by running a `build` task. - -Here are the outputs defined for the `shared-ui` project: - -```json {% fileName="shared/ui/project.json" %} -{ - "name": "shared-ui", - "targets": { - "build": { - "executor": "@nx/vite:build", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/shared/ui" - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["shared/ui/**/*.{ts,tsx,js,jsx}"] - } - }, - "test": { - "executor": "@nx/vite:test", - "outputs": ["{projectRoot}/coverage"], - "options": { - "passWithNoTests": true - } - } - } -} -``` - -Outputs are stored in the cache so that terminal output can be replayed, and any created files can be pulled from your cache, and placed where they were created the original time the task was run. - -## Testing Affected Projects - -Another way that Nx saves you from unnecessary work is the `affected` command. `affected` is a mechanism that relies on your git metadata to determine the projects in your workspace that were affected by a given commit. - -Run the command: - -```shell -git add . ; git commit -m "commiting to test affected" -``` - -Then make a change to the styles of your `cart` project: - -```css {% fileName="cart/src/lib/cart.module.css" %} -.container { - color: blue; -} -``` - -You can visualize how our workspace is affected by this change using the command: - -```shell -npx nx affected:graph -``` - -{% graph height="450px" %} - -```json -{ - "hash": "85fd0561bd88f0bcd8703a9e9369592e2805f390d04982fb2401e700dc9ebc59", - "projects": [ - { - "name": "cart", - "type": "lib", - "data": { - "tags": [] - } - }, - { - "name": "shared-ui", - "type": "lib", - "data": { - "tags": [] - } - }, - { - "name": "e2e", - "type": "e2e", - "data": { - "tags": [] - } - }, - { - "name": "store", - "type": "app", - "data": { - "tags": [] - } - } - ], - "dependencies": { - "cart": [{ "source": "cart", "target": "shared-ui", "type": "static" }], - "shared-ui": [], - "e2e": [{ "source": "e2e", "target": "store", "type": "implicit" }], - "store": [ - { "source": "store", "target": "cart", "type": "static" }, - { "source": "store", "target": "shared-ui", "type": "static" } - ] - }, - "workspaceLayout": { "appsDir": "apps", "libsDir": "libs" }, - "affectedProjectIds": ["cart", "store", "e2e"], - "focus": null, - "groupByFolder": false, - "exclude": [] -} -``` - -{% /graph %} - -The change made to the `cart` project is also affecting the `store` project. This can be leveraged to run tasks only on the projects that were affected by this commit. - -To run the `test` targets only for affected projects, run the command: - -```shell -npx nx affected -t test -``` - -This can be particularly helpful in CI pipelines for larger repos, where most commits only affect a small subset of the entire workspace. - -{% card title="Affected Documentation" description="Checkout Affected documentation for more details" url="/packages/nx/documents/affected" /%} - -## What's Next - -- Continue to [5: Summary](/react-standalone-tutorial/5-summary) diff --git a/docs/shared/react-standalone-tutorial/5-summary.md b/docs/shared/react-standalone-tutorial/5-summary.md deleted file mode 100644 index cadf9639c4415..0000000000000 --- a/docs/shared/react-standalone-tutorial/5-summary.md +++ /dev/null @@ -1,22 +0,0 @@ -# React Standalone Tutorial - Part 5: Summary - -In this tutorial you: - -- Learned how to use Nx's Generators to generate code for your workspace. -- Learned how Nx determines a graph of your workspace -- Learned how to configure and run tasks in your workspace -- Learned how Nx's built-in optimizations work, and how to apply those to your own workspace - -## Learn More - -{% cards %} - -{% card title="Core Features" description="Read about the core features of Nx." url="/core-features" /%} - -{% card title="Plugin Features" description="Read about the plugin features of Nx." url="/core-features/plugin-features" /%} - -{% card title="Mental Model" description="Get a deeper understanding of the mental model." url="/concepts/mental-model" /%} - -{% card title="Adopting Nx" description="Learn how to add Nx to your existing repo." url="/recipes/adopting-nx" /%} - -{% /cards %} diff --git a/docs/shared/react-standalone-tutorial/generator-syntax.svg b/docs/shared/react-standalone-tutorial/generator-syntax.svg deleted file mode 100644 index 9c8ca2b92112b..0000000000000 --- a/docs/shared/react-standalone-tutorial/generator-syntax.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/docs/shared/react-standalone-tutorial/react-standalone.md b/docs/shared/react-standalone-tutorial/react-standalone.md index ccbf111e9d16f..b880eac4bca9f 100644 --- a/docs/shared/react-standalone-tutorial/react-standalone.md +++ b/docs/shared/react-standalone-tutorial/react-standalone.md @@ -15,7 +15,7 @@ What are you going to learn? - how to modularize your codebase and impose architectural constraints for better maintainability {% callout type="info" title="Looking for React monorepos?" %} -Note, this tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. If you are looking for a React monorepo setup then check out our [React monorepo tutorial](/react-tutorial/1-code-generation). +Note, this tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. If you are looking for a React monorepo setup then check out our [React monorepo tutorial](/getting-started/tutorials/react-monorepo-tutorial). {% /callout %} diff --git a/docs/shared/react-tutorial/1-code-generation.md b/docs/shared/react-tutorial/1-code-generation.md deleted file mode 100644 index 4abfce6840db7..0000000000000 --- a/docs/shared/react-tutorial/1-code-generation.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: 'React Monorepo Tutorial - Part 1: Code Generation' -description: In this tutorial you'll create a frontend-focused workspace with Nx. ---- - -{% callout type="check" title="Two Styles of Repo" %} -There are two styles of repos: integrated and package-based. This tutorial shows the integrated style. - -You can find more information on the difference between the two in [our introduction](/getting-started/intro). -{% /callout %} - -# React Monorepo Tutorial - Part 1: Code Generation - -## Contents - -- [1 - Code Generation](/react-tutorial/1-code-generation) -- [2 - Project Graph](/react-tutorial/2-project-graph) -- [3 - Task Running](/react-tutorial/3-task-running) -- [4 - Workspace Optimization](/react-tutorial/4-workspace-optimization) -- [5 - Summary](/react-tutorial/5-summary) - -## Your Objective - -For this tutorial, you'll create two React applications, a React lib for your common components, and a library for your business logic as follows: - -![Our Workspace Requirements](/shared/react-tutorial/requirements-diagram.svg) - -## Creating an Nx Workspace - -Run the command `npx create-nx-workspace@latest` and when prompted, provide the following responses: - -```{% command="npx create-nx-workspace@latest" path="~" %} - - > NX Let's create a new workspace [https://nx.dev/getting-started/intro] - -✔ Where would you like to create your workspace? · myorg -✔ Which stack do you want to use? · react -✔ What framework would you like to use? · none -✔ Standalone project or integrated monorepo? · integrated -✔ Application name · store -✔ Which bundler would you like to use? · vite -✔ Default stylesheet format · css -✔ Enable distributed caching to make your CI faster · Yes -``` - -{% card title="Opting into Nx Cloud" description="You will also be prompted whether to add Nx Cloud to your workspace. We won't address this in this tutorial, but you can see the introduction to Nx Cloud for more details." url="/nx-cloud/intro/what-is-nx-cloud" /%} - -Once the command completes, notice two projects were added to the workspace: - -- A React application located in `apps/store`. -- A Project for Cypress e2e tests for our `store` application in `apps/store-e2e`. - -{% card title="Nx Cypress Support" description="While we see the Cypress project here, we won't go deeper on Cypress in this tutorial. You can find more materials on Nx Cypress support on the @nx/cypress package page." url="/packages/cypress" /%} - -## Adding Another Application to Your Workspace - -Run this command to create your `admin` app: - -```{% command="npx nx g @nx/react:app admin --directory=apps/admin" path="~/myorg" %} - -> NX Generating @nx/react:application - -CREATE apps/admin/.babelrc -CREATE apps/admin/.browserslistrc -CREATE apps/admin/src/app/app.spec.tsx -CREATE apps/admin/src/app/nx-welcome.tsx -CREATE apps/admin/src/assets/.gitkeep -CREATE apps/admin/src/environments/environment.prod.ts -CREATE apps/admin/src/environments/environment.ts -CREATE apps/admin/src/favicon.ico -CREATE apps/admin/src/index.html -CREATE apps/admin/src/main.tsx -CREATE apps/admin/src/polyfills.ts -CREATE apps/admin/tsconfig.app.json -CREATE apps/admin/tsconfig.json -CREATE apps/admin/src/app/app.module.css -CREATE apps/admin/src/app/app.tsx -CREATE apps/admin/src/styles.css -CREATE apps/admin/project.json -CREATE apps/admin/.eslintrc.json -CREATE apps/admin-e2e/cypress.config.ts -CREATE apps/admin-e2e/src/e2e/app.cy.ts -CREATE apps/admin-e2e/src/fixtures/example.json -CREATE apps/admin-e2e/src/support/app.po.ts -CREATE apps/admin-e2e/src/support/commands.ts -CREATE apps/admin-e2e/src/support/e2e.ts -CREATE apps/admin-e2e/tsconfig.json -CREATE apps/admin-e2e/project.json -CREATE apps/admin-e2e/.eslintrc.json -CREATE apps/admin/jest.config.ts -CREATE apps/admin/tsconfig.spec.json -``` - -![Nx Generator Syntax](/shared/react-tutorial/generator-syntax.svg) - -## Generating Libraries - -To create the `common-ui` and `products` libraries, use the `@nx/react:lib` and `@nx/js:lib` generators respectively: - -```{% command="npx nx g @nx/react:lib common-ui --directory=libs/common-ui" path="~/myorg" %} - -> NX Generating @nx/react:library - -CREATE libs/common-ui/project.json -CREATE libs/common-ui/.eslintrc.json -CREATE libs/common-ui/.babelrc -CREATE libs/common-ui/README.md -CREATE libs/common-ui/src/index.ts -CREATE libs/common-ui/tsconfig.json -CREATE libs/common-ui/tsconfig.lib.json -UPDATE tsconfig.base.json -CREATE libs/common-ui/jest.config.ts -CREATE libs/common-ui/tsconfig.spec.json -CREATE libs/common-ui/src/lib/common-ui.module.css -CREATE libs/common-ui/src/lib/common-ui.spec.tsx -CREATE libs/common-ui/src/lib/common-ui.tsx -``` - -```{% command="npx nx g @nx/js:lib products --directory=libs/products" path="~/myorg" %} - -> NX Generating @nx/js:library - -CREATE libs/products/README.md -CREATE libs/products/package.json -CREATE libs/products/src/index.ts -CREATE libs/products/src/lib/products.spec.ts -CREATE libs/products/src/lib/products.ts -CREATE libs/products/tsconfig.json -CREATE libs/products/tsconfig.lib.json -CREATE libs/products/.babelrc -CREATE libs/products/project.json -UPDATE tsconfig.base.json -CREATE libs/products/.eslintrc.json -CREATE libs/products/jest.config.ts -CREATE libs/products/tsconfig.spec.json -``` - -You should now be able to see all four projects of our design: - -- `store` in `apps/store` -- `admin` in `apps/admin` -- `products` in `libs/products` -- `common-ui` in `libs/common-ui` - -## What's Next - -- Continue to [2: Project Graph](/react-tutorial/2-project-graph) diff --git a/docs/shared/react-tutorial/2-project-graph.md b/docs/shared/react-tutorial/2-project-graph.md deleted file mode 100644 index 4858e6ac59952..0000000000000 --- a/docs/shared/react-tutorial/2-project-graph.md +++ /dev/null @@ -1,126 +0,0 @@ -# React Monorepo Tutorial - Part 2: Project Graph - -Run the command: `npx nx graph`. A browser should open up with the following contents: - -![Initial Project Graph](/shared/react-tutorial/initial-project-graph.png) - -This is still different than the design from the start of Part 1: - -![Our Workspace Requirements](/shared/react-tutorial/requirements-diagram.svg) - -The Project Graph is derived from the source code of your workspace. Make the following adjustments to your existing projects, so that our Project Graph will match the design: - -### `common-ui` - -Run the `@nx/react:component` generator with the command: - -```{% command="npx nx g @nx/react:component banner --project=common-ui --export" path="~/myorg" %} - -> NX Generating @nx/react:component - -CREATE libs/common-ui/src/lib/banner/banner.module.css -CREATE libs/common-ui/src/lib/banner/banner.spec.tsx -CREATE libs/common-ui/src/lib/banner/banner.tsx -UPDATE libs/common-ui/src/index.ts -``` - -Then create a simple `Banner` component in the generated file: - -```javascript {% fileName="libs/common-ui/src/lib/banner/banner.tsx" %} -export interface BannerProps { - text: string; -} - -export function Banner(props: BannerProps) { - return
{props.text}
; -} - -export default Banner; -``` - -### `admin` - -Add the `Banner` component to the admin app: - -```javascript {% fileName="apps/admin/src/app/app.tsx" %} -import { Banner } from '@myorg/common-ui'; - -export function App() { - return ( - <> - -
- - ); -} - -export default App; -``` - -### `products` - -Export a `Product` TS interface and some example products: - -```javascript {% fileName="libs/products/src/lib/products.ts" %} -export interface Product { - id: string; - name: string; - price: number; -} - -export const exampleProducts: Product[] = [ - { - id: '1', - name: 'Product 1', - price: 100, - }, - { - id: '2', - name: 'Product 2', - price: 200, - }, -]; -``` - -### `store` - -Use both the `Banner` component from your `common-ui` lib, and the `exampleProducts` from your `products` lib: - -```javascript {% fileName="apps/store/src/app/app.tsx" %} -import { Banner } from '@myorg/common-ui'; -import { exampleProducts } from '@myorg/products'; - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export function App() { - return ( - <> - -
    - {exampleProducts.map((product) => ( -
  • - {product.name} Price: {product.price} -
    • - ))} -
- - ); -} - -export default App; -``` - -Now run `npx nx graph` again: - -{% side-by-side %} -![Matching Graph](/shared/react-tutorial/matching-graph.png) - -![Our Workspace Requirements](/shared/react-tutorial/requirements-diagram.svg) -{% /side-by-side %} - -Your graph now matches the original design. - -The Project Graph is more than just a visualization - Nx provides tooling to optimize your task-running and even automate your CI based on this graph. This will be covered in more detail in: [4: Workspace Optimization](/react-tutorial/4-workspace-optimization). - -## What's Next - -- Continue to [3: Task Running](/react-tutorial/3-task-running) diff --git a/docs/shared/react-tutorial/3-task-running.md b/docs/shared/react-tutorial/3-task-running.md deleted file mode 100644 index 2e78ccd1a8e1a..0000000000000 --- a/docs/shared/react-tutorial/3-task-running.md +++ /dev/null @@ -1,95 +0,0 @@ -# React Monorepo Tutorial - 3: Task-Running - -Common tasks include: - -- Building an application -- Serving a local web server with the built project -- Running your unit tests -- Linting your code -- Running e2e tests - -When you ran your generators in Part 1, you already set up these common tasks for each project. - -## Defining Targets - -Here's the `project.json` file for your `common-ui` project: - -```json {% fileName="libs/common-ui/project.json" %} -{ - "name": "common-ui", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/common-ui/src", - "projectType": "library", - "tags": [], - "targets": { - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["libs/common-ui/**/*.{ts,tsx,js,jsx}"] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/libs/common-ui"], - "options": { - "jestConfig": "libs/common-ui/jest.config.ts", - "passWithNoTests": true - } - } - } -} -``` - -You can see that two targets are defined here: `test` and `lint`. - -The properties inside each of these these targets is defined as follows: - -- `executor` - which Nx executor to run. The syntax here is: `:` -- `outputs` - this is an array of files that would be created by running this target. (This informs Nx on what to save for it's caching mechanisms you'll learn about in [4 - Workspace Optimizations](/react-tutorial/4-workspace-optimization)). -- `options` - this is an object defining which executor options to use for the given target. Every Nx executor allows for options as a way to parameterize it's functionality. - -## Running Tasks - -![Syntax for Running Tasks in Nx](/shared/images/run-target-syntax.svg) - -Run the `test` target for your `common-ui` project: - -```{% command="npx nx test common-ui" path="~/myorg" %} - -> nx run common-ui:test - - PASS common-ui libs/common-ui/src/lib/common-ui.spec.tsx - PASS common-ui libs/common-ui/src/lib/banner/banner.spec.tsx - -Test Suites: 2 passed, 2 total -Tests: 2 passed, 2 total -Snapshots: 0 total -Time: 0.84 s, estimated 1 s -Ran all test suites. - - ——————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target test for project common-ui (2s) -``` - -Next, run a lint check on your `common-ui` project: - -```{% command="npx nx lint common-ui" path="~/myorg" %} - -> nx run common-ui:lint - - -Linting "common-ui"... - -All files pass linting. - - -——————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target lint for project common-ui (2s) -``` - -## What's Next - -- Continue to [4: Workspace Optimization](/react-tutorial/4-workspace-optimization) diff --git a/docs/shared/react-tutorial/4-workspace-optimization.md b/docs/shared/react-tutorial/4-workspace-optimization.md deleted file mode 100644 index fd8aee2a41856..0000000000000 --- a/docs/shared/react-tutorial/4-workspace-optimization.md +++ /dev/null @@ -1,199 +0,0 @@ -# React Monorepo Tutorial - Part 4: Workspace Optimization - -## Testing Affected Projects - -`affected` is a mechanism that relies on your git metadata to determine the projects in your workspace that were affected by a given commit. - -Run the command: - -```shell -git add . ; git commit -m "commiting to test affected" -``` - -Then make a change to the styles of your `common-ui` project: - -```css {% fileName="libs/common-ui/src/lib/common-ui.module.css" %} -.container { - color: 'blue;'; -} -``` - -You can visualize how our workspace is affected by this change using the command: - -```shell -npx nx affected:graph -``` - -![Project Graph with Affected](/shared/react-tutorial/project-graph-with-affected.png) - -The change made to the `common-ui` project is also affecting the `admin` and `store` projects. This can be leveraged run tasks only on the projects that were affected by this commit. - -To run the `test` targets only for affected projects, run the command: - -```shell -npx nx affected -t test -``` - -This can be particularly helpful in CI pipelines for larger repos, where most commits only affect a small subset of the entire workspace. - -{% card title="Affected Documentation" description="Checkout Affected documentation for more details" url="/packages/nx/documents/affected" /%} - -## Task Caching - -`affected` allows you to "skip" tasks that couldn't possibly be affected by your changes. Task Caching allows you to "replay" tasks that have already been run. - -Task Caching is informed by "inputs" and "outputs": - -### Inputs - -When running a task, Nx will determine all the inputs for your task and create a hash that will be used to index your cache. If you've already run this task with the same inputs, your cache will already be populated at this index, and Nx will replay the results stored in the cache. - -If this index does not exist, Nx will run the command and if the command succeeds, it will store the result in the cache. - -### Outputs - -Outputs of the cache include the terminal output created by the task, as well as any files created by the task - for example: the artifact created by running a `build` task. - -Outputs are defined for every target in your workspace: - -```json {% fileName="libs/products/project.json" %} -{ - "name": "products", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "sourceRoot": "libs/products/src", - "projectType": "library", - "targets": { - "build": { - "executor": "@nx/js:tsc", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/libs/products", - "main": "libs/products/src/index.ts", - "tsConfig": "libs/products/tsconfig.lib.json", - "assets": ["libs/products/*.md"] - } - }, - "lint": { - "executor": "@nx/linter:eslint", - "outputs": ["{options.outputFile}"], - "options": { - "lintFilePatterns": ["libs/products/**/*.ts"] - } - }, - "test": { - "executor": "@nx/jest:jest", - "outputs": ["{workspaceRoot}/coverage/libs/products"], - "options": { - "jestConfig": "libs/products/jest.config.ts", - "passWithNoTests": true - } - } - }, - "tags": [] -} -``` - -Outputs are stored in the cache so that terminal output can be replayed, and any created files can be pulled from your cache, and placed where they were created the original time the task was run. - -### Example - -To see caching in action, run the command: - -```{% command="npx nx build admin" path="~/myorg" %} - -> nx run admin:build:production - -Entrypoint main 139 KiB = runtime.54e36ebee261465d.js 1.19 KiB main.623d91691bdb6754.css 42 bytes main.303fe7c1dcf5306b.js 137 KiB -Entrypoint polyfills 93.5 KiB = runtime.54e36ebee261465d.js 1.19 KiB polyfills.bd0d0abec287a28e.js 92.3 KiB -Entrypoint styles 1.19 KiB = runtime.54e36ebee261465d.js 1.19 KiB styles.ef46db3751d8e999.css 0 bytes -chunk (runtime: runtime) main.623d91691bdb6754.css, main.303fe7c1dcf5306b.js (main) 144 KiB (javascript) 50 bytes (css/mini-extract) [initial] [rendered] -chunk (runtime: runtime) polyfills.bd0d0abec287a28e.js (polyfills) 301 KiB [initial] [rendered] -chunk (runtime: runtime) styles.ef46db3751d8e999.css (styles) 50 bytes (javascript) 80 bytes (css/mini-extract) [initial] [rendered] -chunk (runtime: runtime) runtime.54e36ebee261465d.js (runtime) 3.23 KiB [entry] [rendered] -webpack compiled successfully (0c0df3e6c70c6b7b) - - ——————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target build for project admin (4s) -``` - -Since you have not run the `build` target before for the `admin` project, Nx runs the `build`, and populates the results in `dist/apps/admin` as specified in the `admin` project's `project.json` file for the `build` target. - -Next, remove your dist directory: - -```shell -rm -rf dist -``` - -And run the command again: - -```{% command="npx nx build admin" path="~/myorg" %} - -> nx run admin:build:production [local cache] - -Entrypoint main 139 KiB = runtime.54e36ebee261465d.js 1.19 KiB main.623d91691bdb6754.css 42 bytes main.303fe7c1dcf5306b.js 137 KiB -Entrypoint polyfills 93.5 KiB = runtime.54e36ebee261465d.js 1.19 KiB polyfills.bd0d0abec287a28e.js 92.3 KiB -Entrypoint styles 1.19 KiB = runtime.54e36ebee261465d.js 1.19 KiB styles.ef46db3751d8e999.css 0 bytes -chunk (runtime: runtime) main.623d91691bdb6754.css, main.303fe7c1dcf5306b.js (main) 144 KiB (javascript) 50 bytes (css/mini-extract) [initial] [rendered] -chunk (runtime: runtime) polyfills.bd0d0abec287a28e.js (polyfills) 301 KiB [initial] [rendered] -chunk (runtime: runtime) styles.ef46db3751d8e999.css (styles) 50 bytes (javascript) 80 bytes (css/mini-extract) [initial] [rendered] -chunk (runtime: runtime) runtime.54e36ebee261465d.js (runtime) 3.23 KiB [entry] [rendered] -webpack compiled successfully (0c0df3e6c70c6b7b) - - ——————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target build for project admin (59ms) - - Nx read the output from the cache instead of running the command for 1 out of 1 tasks. -``` - -Notice that `[local cache]` is mentioned in the terminal output, and that this time the command only took 59ms to run. - -Also notice that the result of your build has been added back to the `dist/apps/admin` directory. - -{% card title="More Task Caching Details" description="See the documentation for more information on caching." url="/core-features/cache-task-results" /%} - -## Configuring Task Pipelines - -Next, run the command `npx nx build store`: - -```{% command="npx nx build store" path="~/myorg" %} - - ✔ 1/1 dependent project tasks succeeded [0 read from cache] - - Hint: you can run the command with --verbose to see the full dependent project outputs - - ——————————————————————————————————————————————————————————————————————————————————————————————————— - - -> nx run store:build:production - -Entrypoint main 139 KiB = runtime.54e36ebee261465d.js 1.19 KiB main.623d91691bdb6754.css 42 bytes main.94f9a4a3cec4f056.js 138 KiB -Entrypoint polyfills 93.5 KiB = runtime.54e36ebee261465d.js 1.19 KiB polyfills.bd0d0abec287a28e.js 92.3 KiB -Entrypoint styles 1.19 KiB = runtime.54e36ebee261465d.js 1.19 KiB styles.ef46db3751d8e999.css 0 bytes -chunk (runtime: runtime) main.623d91691bdb6754.css, main.94f9a4a3cec4f056.js (main) 145 KiB (javascript) 50 bytes (css/mini-extract) [initial] [rendered] -chunk (runtime: runtime) polyfills.bd0d0abec287a28e.js (polyfills) 301 KiB [initial] [rendered] -chunk (runtime: runtime) styles.ef46db3751d8e999.css (styles) 50 bytes (javascript) 80 bytes (css/mini-extract) [initial] [rendered] -chunk (runtime: runtime) runtime.54e36ebee261465d.js (runtime) 3.23 KiB [entry] [rendered] -webpack compiled successfully (06e95dfdacea84c7) - - ——————————————————————————————————————————————————————————————————————————————————————————————————— - - > NX Successfully ran target build for project store and 1 task(s) they depend on (5s) -``` - -Notice the line here: - -```text - ✔ 1/1 dependent project tasks succeeded [0 read from cache] -``` - -This is because your `store` project depends on your `products` project, which also has a `build` target. By default Nx is configured to run the `build` target for any dependencies that have a `build` target, before running the `build` on the original project. - -This feature allows the Nx graph to dynamically maintain task dependencies, rather than having to manually maintain those task dependencies as your workspace continues to grow. - -{% card title="More On The Task Pipeline Configuration" description="See the Task Pipeline Configuration Guide for more details on how to configure your Task Graph." url="/concepts/task-pipeline-configuration" /%} - -## What's Next - -- Continue to [5: Summary](/react-tutorial/5-summary) diff --git a/docs/shared/react-tutorial/5-summary.md b/docs/shared/react-tutorial/5-summary.md deleted file mode 100644 index 1ccf19eba1d22..0000000000000 --- a/docs/shared/react-tutorial/5-summary.md +++ /dev/null @@ -1,22 +0,0 @@ -# React Monorepo Tutorial - Part 5: Summary - -In this tutorial you: - -- Learned how to use Nx's Generators to generate code for your workspace. -- Learned how Nx determines a graph of your workspace -- Learned how to configure and run tasks in your workspace -- Learned how Nx's built-in optimizations work, and how to apply those to your own workspace - -## Learn More - -{% cards %} - -{% card title="Core Features" description="Read about the core features of Nx." url="/core-features" /%} - -{% card title="Plugin Features" description="Read about the plugin features of Nx." url="/core-features/plugin-features" /%} - -{% card title="Mental Model" description="Get a deeper understanding of the mental model." url="/concepts/mental-model" /%} - -{% card title="Adopting Nx" description="Learn how to add Nx to your existing repo." url="/recipes/adopting-nx" /%} - -{% /cards %} diff --git a/docs/shared/react-tutorial/generator-syntax.svg b/docs/shared/react-tutorial/generator-syntax.svg deleted file mode 100644 index 9c8ca2b92112b..0000000000000 --- a/docs/shared/react-tutorial/generator-syntax.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/docs/shared/react-tutorial/initial-project-graph.png b/docs/shared/react-tutorial/initial-project-graph.png deleted file mode 100644 index d774bebdf6929..0000000000000 Binary files a/docs/shared/react-tutorial/initial-project-graph.png and /dev/null differ diff --git a/docs/shared/react-tutorial/matching-graph.png b/docs/shared/react-tutorial/matching-graph.png deleted file mode 100644 index bb274d1e3e286..0000000000000 Binary files a/docs/shared/react-tutorial/matching-graph.png and /dev/null differ diff --git a/docs/shared/react-tutorial/project-graph-with-affected.png b/docs/shared/react-tutorial/project-graph-with-affected.png deleted file mode 100644 index 15a7313f7a7b1..0000000000000 Binary files a/docs/shared/react-tutorial/project-graph-with-affected.png and /dev/null differ diff --git a/docs/shared/react-tutorial/requirements-diagram.svg b/docs/shared/react-tutorial/requirements-diagram.svg deleted file mode 100644 index 370f2914686f3..0000000000000 --- a/docs/shared/react-tutorial/requirements-diagram.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index 69e68a489d2c6..102ae09768f0a 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -19,18 +19,6 @@ - [4 - Build Affected Projects](/core-tutorial/04-build-affected-projects) - [5 - Automatically Detect Dependencies](/core-tutorial/05-auto-detect-dependencies) - [6 - Summary](/core-tutorial/06-summary) - - [React Monorepo Tutorial](/react-tutorial) - - [1 - Code Generation](/react-tutorial/1-code-generation) - - [2 - Project Graph](/react-tutorial/2-project-graph) - - [3 - Task Running](/react-tutorial/3-task-running) - - [4 - Workspace Optimization](/react-tutorial/4-workspace-optimization) - - [5 - Summary](/react-tutorial/5-summary) - - [React Standalone Tutorial](/react-standalone-tutorial) - - [1 - Code Generation](/react-standalone-tutorial/1-code-generation) - - [2 - Project Graph](/react-standalone-tutorial/2-project-graph) - - [3 - Task Running](/react-standalone-tutorial/3-task-running) - - [4 - Task Pipelines](/react-standalone-tutorial/4-task-pipelines) - - [5 - Summary](/react-standalone-tutorial/5-summary) - [Angular Standalone Tutorial](/angular-standalone-tutorial) - [1 - Code Generation](/angular-standalone-tutorial/1-code-generation) - [2 - Project Graph](/angular-standalone-tutorial/2-project-graph) @@ -213,7 +201,6 @@ - [Add a Vue Project](/showcase/example-repos/add-vue) - [Add a Svelte Project](/showcase/example-repos/add-svelte) - [Add a Fastify Project](/showcase/example-repos/add-fastify) - - [Powering Up React Development With Nx](/showcase/example-repos/react-nx) - [Using Apollo GraphQL](/showcase/example-repos/apollo-react) - [Using Prisma with NestJS](/showcase/example-repos/nestjs-prisma) - [Using Mongo with Fastify](/showcase/example-repos/mongo-fastify) diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index aae844e366ea1..7ad5b3d5750bc 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -495,25 +495,42 @@ for (const path of oldAngularTutorialPaths) { * New single-page standalone tutorials */ const standaloneTutorialRedirects = { - '/shared/react-standalone-tutorial/1-code-generation': + '/showcase/example-repos/react-nx': + '/getting-started/tutorials/react-monorepo-tutorial', + '/react-tutorial': '/getting-started/tutorials/react-monorepo-tutorial', + '/react-tutorial/1-code-generation': + '/getting-started/tutorials/react-monorepo-tutorial', + '/react-tutorial/2-project-graph': + '/getting-started/tutorials/react-monorepo-tutorial', + '/react-tutorial/3-task-running': + '/getting-started/tutorials/react-monorepo-tutorial', + '/react-tutorial/4-task-pipelines': + '/getting-started/tutorials/react-monorepo-tutorial', + '/react-tutorial/5-summary': + '/getting-started/tutorials/react-monorepo-tutorial', + '/react-standalone-tutorial': '/getting-started/tutorials/react-standalone-tutorial', - '/shared/react-standalone-tutorial/2-project-graph': + '/react-standalone-tutorial/1-code-generation': '/getting-started/tutorials/react-standalone-tutorial', - '/shared/react-standalone-tutorial/3-task-running': + '/react-standalone-tutorial/2-project-graph': '/getting-started/tutorials/react-standalone-tutorial', - '/shared/react-standalone-tutorial/4-task-pipelines': + '/react-standalone-tutorial/3-task-running': '/getting-started/tutorials/react-standalone-tutorial', - '/shared/react-standalone-tutorial/5-summary': + '/react-standalone-tutorial/4-task-pipelines': '/getting-started/tutorials/react-standalone-tutorial', - '/shared/angular-standalone-tutorial/1-code-generation': + '/react-standalone-tutorial/5-summary': + '/getting-started/tutorials/react-standalone-tutorial', + '/angular-standalone-tutorial': + '/getting-started/tutorials/angular-standalone-tutorial', + '/angular-standalone-tutorial/1-code-generation': '/getting-started/tutorials/angular-standalone-tutorial', - '/shared/angular-standalone-tutorial/2-project-graph': + '/angular-standalone-tutorial/2-project-graph': '/getting-started/tutorials/angular-standalone-tutorial', - '/shared/angular-standalone-tutorial/3-task-running': + '/angular-standalone-tutorial/3-task-running': '/getting-started/tutorials/angular-standalone-tutorial', - '/shared/angular-standalone-tutorial/4-task-pipelines': + '/angular-standalone-tutorial/4-task-pipelines': '/getting-started/tutorials/angular-standalone-tutorial', - '/shared/angular-standalone-tutorial/5-summary': + '/angular-standalone-tutorial/5-summary': '/getting-started/tutorials/angular-standalone-tutorial', };