From 281df64ba8b9acf3d79f94bf7e93563bcce2f5e4 Mon Sep 17 00:00:00 2001 From: Isaac Mann Date: Tue, 21 Dec 2021 09:55:27 -0500 Subject: [PATCH] Docs video updates (#8254) * docs(core): fix youtube allow=fullscreen attribute * docs(react): add video to cra-to-nx guide Co-authored-by: Isaac Mann --- docs/angular/getting-started/intro.md | 2 +- docs/angular/tutorial/01-create-application.md | 2 +- docs/angular/tutorial/02-add-e2e-test.md | 2 +- docs/angular/tutorial/03-display-todos.md | 2 +- docs/angular/tutorial/04-connect-to-api.md | 2 +- docs/angular/tutorial/05-add-node-app.md | 2 +- docs/angular/tutorial/06-proxy.md | 2 +- docs/angular/tutorial/07-share-code.md | 2 +- docs/angular/tutorial/08-create-libs.md | 2 +- docs/angular/tutorial/09-dep-graph.md | 2 +- docs/angular/tutorial/10-computation-caching.md | 2 +- docs/angular/tutorial/11-test-affected-projects.md | 2 +- docs/node/getting-started/intro.md | 2 +- docs/node/tutorial/01-create-application.md | 2 +- docs/node/tutorial/02-display-todos.md | 2 +- docs/node/tutorial/03-share-code.md | 2 +- docs/node/tutorial/04-create-libs.md | 2 +- docs/node/tutorial/05-dep-graph.md | 2 +- docs/node/tutorial/06-computation-caching.md | 2 +- docs/node/tutorial/07-test-affected-projects.md | 2 +- docs/react/getting-started/intro.md | 2 +- .../guides/storybook/migrate-webpack-final.md | 2 +- docs/react/migration/migration-cra.md | 6 ++++++ docs/react/tutorial/01-create-application.md | 2 +- docs/react/tutorial/02-add-e2e-test.md | 2 +- docs/react/tutorial/03-display-todos.md | 2 +- docs/react/tutorial/04-connect-to-api.md | 2 +- docs/react/tutorial/05-add-node-app.md | 2 +- docs/react/tutorial/06-proxy.md | 2 +- docs/react/tutorial/07-share-code.md | 2 +- docs/react/tutorial/08-create-libs.md | 2 +- docs/react/tutorial/09-dep-graph.md | 2 +- docs/react/tutorial/10-computation-caching.md | 2 +- docs/react/tutorial/11-test-affected-projects.md | 2 +- docs/shared/console.md | 14 +++++++------- docs/shared/guides/lerna-and-nx.md | 2 +- docs/shared/migration/adding-to-monorepo.md | 8 ++++---- docs/shared/nx-core.md | 2 +- docs/shared/nx-plugin.md | 2 +- .../shared/workspace/structure/dependency-graph.md | 2 +- nx-dev/nx-dev/pages/angular.tsx | 6 ++---- nx-dev/nx-dev/pages/community.tsx | 3 +-- nx-dev/nx-dev/pages/node.tsx | 9 +++------ nx-dev/nx-dev/pages/react.tsx | 6 ++---- .../latest/angular/getting-started/intro.md | 2 +- .../angular/tutorial/01-create-application.md | 2 +- .../latest/angular/tutorial/02-add-e2e-test.md | 2 +- .../latest/angular/tutorial/03-display-todos.md | 2 +- .../latest/angular/tutorial/04-connect-to-api.md | 2 +- .../latest/angular/tutorial/05-add-node-app.md | 2 +- .../latest/angular/tutorial/06-proxy.md | 2 +- .../latest/angular/tutorial/07-share-code.md | 2 +- .../latest/angular/tutorial/08-create-libs.md | 2 +- .../latest/angular/tutorial/09-dep-graph.md | 2 +- .../angular/tutorial/10-computation-caching.md | 2 +- .../angular/tutorial/11-test-affected-projects.md | 2 +- .../latest/node/getting-started/intro.md | 2 +- .../latest/node/tutorial/01-create-application.md | 2 +- .../latest/node/tutorial/02-display-todos.md | 2 +- .../latest/node/tutorial/03-share-code.md | 2 +- .../latest/node/tutorial/04-create-libs.md | 2 +- .../latest/node/tutorial/05-dep-graph.md | 2 +- .../latest/node/tutorial/06-computation-caching.md | 2 +- .../node/tutorial/07-test-affected-projects.md | 2 +- .../latest/react/getting-started/intro.md | 2 +- .../guides/storybook/migrate-webpack-final.md | 2 +- .../latest/react/tutorial/01-create-application.md | 2 +- .../latest/react/tutorial/02-add-e2e-test.md | 2 +- .../latest/react/tutorial/03-display-todos.md | 2 +- .../latest/react/tutorial/04-connect-to-api.md | 2 +- .../latest/react/tutorial/05-add-node-app.md | 2 +- .../latest/react/tutorial/06-proxy.md | 2 +- .../latest/react/tutorial/07-share-code.md | 2 +- .../latest/react/tutorial/08-create-libs.md | 2 +- .../latest/react/tutorial/09-dep-graph.md | 2 +- .../react/tutorial/10-computation-caching.md | 2 +- .../react/tutorial/11-test-affected-projects.md | 2 +- .../public/documentation/latest/shared/console.md | 14 +++++++------- .../latest/shared/guides/lerna-and-nx.md | 2 +- .../latest/shared/migration/adding-to-monorepo.md | 8 ++++---- .../public/documentation/latest/shared/nx-core.md | 2 +- .../documentation/latest/shared/nx-plugin.md | 2 +- .../shared/workspace/structure/dependency-graph.md | 2 +- .../previous/angular/getting-started/intro.md | 2 +- .../angular/tutorial/01-create-application.md | 2 +- .../previous/angular/tutorial/02-add-e2e-test.md | 2 +- .../previous/angular/tutorial/03-display-todos.md | 2 +- .../previous/angular/tutorial/04-connect-to-api.md | 2 +- .../previous/angular/tutorial/05-add-node-app.md | 2 +- .../previous/angular/tutorial/06-proxy.md | 2 +- .../previous/angular/tutorial/07-share-code.md | 2 +- .../previous/angular/tutorial/08-create-libs.md | 2 +- .../previous/angular/tutorial/09-dep-graph.md | 2 +- .../angular/tutorial/10-computation-caching.md | 2 +- .../angular/tutorial/11-test-affected-projects.md | 2 +- .../previous/node/getting-started/intro.md | 2 +- .../node/tutorial/01-create-application.md | 2 +- .../previous/node/tutorial/02-display-todos.md | 2 +- .../previous/node/tutorial/03-share-code.md | 2 +- .../previous/node/tutorial/04-create-libs.md | 2 +- .../previous/node/tutorial/05-dep-graph.md | 2 +- .../node/tutorial/06-computation-caching.md | 2 +- .../node/tutorial/07-test-affected-projects.md | 2 +- .../previous/react/getting-started/intro.md | 2 +- .../react/tutorial/01-create-application.md | 2 +- .../previous/react/tutorial/02-add-e2e-test.md | 2 +- .../previous/react/tutorial/03-display-todos.md | 2 +- .../previous/react/tutorial/04-connect-to-api.md | 2 +- .../previous/react/tutorial/05-add-node-app.md | 2 +- .../previous/react/tutorial/06-proxy.md | 2 +- .../previous/react/tutorial/07-share-code.md | 2 +- .../previous/react/tutorial/08-create-libs.md | 2 +- .../previous/react/tutorial/09-dep-graph.md | 2 +- .../react/tutorial/10-computation-caching.md | 2 +- .../react/tutorial/11-test-affected-projects.md | 2 +- .../documentation/previous/shared/console.md | 14 +++++++------- .../previous/shared/guides/lerna-and-nx.md | 2 +- .../shared/migration/adding-to-monorepo.md | 8 ++++---- .../documentation/previous/shared/nx-plugin.md | 2 +- .../shared/workspace/structure/dependency-graph.md | 2 +- nx-dev/ui-home/src/lib/getting-started.tsx | 12 ++++-------- 121 files changed, 160 insertions(+), 166 deletions(-) diff --git a/docs/angular/getting-started/intro.md b/docs/angular/getting-started/intro.md index 9e61af5e54..590b7d4d8f 100644 --- a/docs/angular/getting-started/intro.md +++ b/docs/angular/getting-started/intro.md @@ -8,7 +8,7 @@ modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress]( ## 10-Minute Nx Overview - + ## Philosophy diff --git a/docs/angular/tutorial/01-create-application.md b/docs/angular/tutorial/01-create-application.md index 6fc93dda87..fa0399eaba 100644 --- a/docs/angular/tutorial/01-create-application.md +++ b/docs/angular/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest. diff --git a/docs/angular/tutorial/02-add-e2e-test.md b/docs/angular/tutorial/02-add-e2e-test.md index fb162d6395..1cadd90768 100644 --- a/docs/angular/tutorial/02-add-e2e-test.md +++ b/docs/angular/tutorial/02-add-e2e-test.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 2: Add E2E Tests - + By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests. diff --git a/docs/angular/tutorial/03-display-todos.md b/docs/angular/tutorial/03-display-todos.md index 495eecc653..96cf20fb5b 100644 --- a/docs/angular/tutorial/03-display-todos.md +++ b/docs/angular/tutorial/03-display-todos.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 3: Display Todos - + Great! You have a failing E2E test. Now you can make it pass! diff --git a/docs/angular/tutorial/04-connect-to-api.md b/docs/angular/tutorial/04-connect-to-api.md index e6d40413ca..b03850f62d 100644 --- a/docs/angular/tutorial/04-connect-to-api.md +++ b/docs/angular/tutorial/04-connect-to-api.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 4: Connect to an API - + Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API. diff --git a/docs/angular/tutorial/05-add-node-app.md b/docs/angular/tutorial/05-add-node-app.md index 6fc5e6fa43..ccc56e6b68 100644 --- a/docs/angular/tutorial/05-add-node-app.md +++ b/docs/angular/tutorial/05-add-node-app.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 5: Add Node Application Implementing an API - + The requests fail because the API has not been created yet. Using Nx you can develop node applications next to your Angular applications. You can use same commands to run and test them. You can share code between the backend and the frontend. Use this capability to implement the API service. diff --git a/docs/angular/tutorial/06-proxy.md b/docs/angular/tutorial/06-proxy.md index c52df969d0..6694a6acbb 100644 --- a/docs/angular/tutorial/06-proxy.md +++ b/docs/angular/tutorial/06-proxy.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 6: Proxy - + You passed `--frontendProject=todos` when creating the node application. What did that argument do? diff --git a/docs/angular/tutorial/07-share-code.md b/docs/angular/tutorial/07-share-code.md index f861ab4bbc..78147f9ec4 100644 --- a/docs/angular/tutorial/07-share-code.md +++ b/docs/angular/tutorial/07-share-code.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 7: Share Code - + Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library. diff --git a/docs/angular/tutorial/08-create-libs.md b/docs/angular/tutorial/08-create-libs.md index 38952bdfb4..91b2f850a4 100644 --- a/docs/angular/tutorial/08-create-libs.md +++ b/docs/angular/tutorial/08-create-libs.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 8: Create Libs - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/docs/angular/tutorial/09-dep-graph.md b/docs/angular/tutorial/09-dep-graph.md index a8bc236c1d..c8429ed3c8 100644 --- a/docs/angular/tutorial/09-dep-graph.md +++ b/docs/angular/tutorial/09-dep-graph.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 9: Using the Depedency Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it becomes more difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/docs/angular/tutorial/10-computation-caching.md b/docs/angular/tutorial/10-computation-caching.md index 2854393d0c..78538b3825 100644 --- a/docs/angular/tutorial/10-computation-caching.md +++ b/docs/angular/tutorial/10-computation-caching.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 10: Computation Caching - + Nx has built-in computation caching, which helps drastically improve the performance of the commands. diff --git a/docs/angular/tutorial/11-test-affected-projects.md b/docs/angular/tutorial/11-test-affected-projects.md index e51951abdf..f8a8f6771d 100644 --- a/docs/angular/tutorial/11-test-affected-projects.md +++ b/docs/angular/tutorial/11-test-affected-projects.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 11: Testing Affected Projects - + Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects. diff --git a/docs/node/getting-started/intro.md b/docs/node/getting-started/intro.md index 660889070d..53218e3638 100644 --- a/docs/node/getting-started/intro.md +++ b/docs/node/getting-started/intro.md @@ -4,7 +4,7 @@ Nx is a smart, fast and extensible build system. It comes with first class monor ## 10-Minute Nx Overview - + ## Philosophy diff --git a/docs/node/tutorial/01-create-application.md b/docs/node/tutorial/01-create-application.md index 1b82865306..722635b5da 100644 --- a/docs/node/tutorial/01-create-application.md +++ b/docs/node/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a server application out of common libraries using modern technologies. diff --git a/docs/node/tutorial/02-display-todos.md b/docs/node/tutorial/02-display-todos.md index 255e099107..6477d2d921 100644 --- a/docs/node/tutorial/02-display-todos.md +++ b/docs/node/tutorial/02-display-todos.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 2: Display todos - + Great! you now have a server application set up to show some data when going to the `/api` route. diff --git a/docs/node/tutorial/03-share-code.md b/docs/node/tutorial/03-share-code.md index e0c428a510..c36f210417 100644 --- a/docs/node/tutorial/03-share-code.md +++ b/docs/node/tutorial/03-share-code.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 3: Share Code - + Awesome! The application is working as expected! diff --git a/docs/node/tutorial/04-create-libs.md b/docs/node/tutorial/04-create-libs.md index cd9122e86e..bf08085503 100644 --- a/docs/node/tutorial/04-create-libs.md +++ b/docs/node/tutorial/04-create-libs.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 4: Create Libraries - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/docs/node/tutorial/05-dep-graph.md b/docs/node/tutorial/05-dep-graph.md index 2a27e2ded5..a1cfde217c 100644 --- a/docs/node/tutorial/05-dep-graph.md +++ b/docs/node/tutorial/05-dep-graph.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 5: Dep Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it becomes more difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/docs/node/tutorial/06-computation-caching.md b/docs/node/tutorial/06-computation-caching.md index 4c20d0d02a..ac0ebbfd47 100644 --- a/docs/node/tutorial/06-computation-caching.md +++ b/docs/node/tutorial/06-computation-caching.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 6: Computation Caching - + Nx has built-in computation caching, which drastically improves the performance of the commands. diff --git a/docs/node/tutorial/07-test-affected-projects.md b/docs/node/tutorial/07-test-affected-projects.md index 087f5219ed..3e2b219a52 100644 --- a/docs/node/tutorial/07-test-affected-projects.md +++ b/docs/node/tutorial/07-test-affected-projects.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 7: Test Affected Projects - + In addition to supporting computation caching, Nx scales your development by doing code change analysis to see what apps or libraries are affected by a particular pull request. diff --git a/docs/react/getting-started/intro.md b/docs/react/getting-started/intro.md index 94753223ad..7e5b97f8ae 100644 --- a/docs/react/getting-started/intro.md +++ b/docs/react/getting-started/intro.md @@ -9,7 +9,7 @@ frameworks like [Gatsby](/{{version}}/react/gatsby/overview) and [Next.js](/{{ve ## 10-Minute Nx Overview - + ## Philosophy diff --git a/docs/react/guides/storybook/migrate-webpack-final.md b/docs/react/guides/storybook/migrate-webpack-final.md index 7a710dfb9a..9caec1350d 100644 --- a/docs/react/guides/storybook/migrate-webpack-final.md +++ b/docs/react/guides/storybook/migrate-webpack-final.md @@ -2,7 +2,7 @@ Nx 12.7 comes with a dedicated Storybook preset for React which drammatically simplifies the Storybook setup and makes sure that Storybook uses the same webpack configuration as your React applications running within an Nx workspace. - + Here are the main differences to the previous versions of Nx: diff --git a/docs/react/migration/migration-cra.md b/docs/react/migration/migration-cra.md index 019560a154..2f7da50f97 100644 --- a/docs/react/migration/migration-cra.md +++ b/docs/react/migration/migration-cra.md @@ -6,6 +6,8 @@ You can either use a CLI tool to migrate your app automatically, or you can foll **Note:** This guide has been updated for Nx 13 and may not work for earlier versions of Nx. +If you have a monorepo (more than one project in the same repo), follow the [Adding Nx to Lerna/Yarn/PNPM/NPM Workspace](https://nx.dev/l/r/migration/adding-to-monorepo) guide instead. + ## Using a tool that will do it for you You can use the [`cra-to-nx`](https://www.npmjs.com/package/cra-to-nx) tool, that will run the following steps for you, and will turn your Create-React-App (CRA) project into an Nx workspace. @@ -21,6 +23,10 @@ Start from [the commands mentioned in this article](https://nx.dev/l/r/migration **Note:** The command will fail if you try execute it and you have uncommitted changes in your repository. Commit any local changes, and then try to run the command. +See it in action: + + + ## Doing the migration manually In this article, you’ll learn how to: diff --git a/docs/react/tutorial/01-create-application.md b/docs/react/tutorial/01-create-application.md index 322fdf2671..2cb8f7b2c9 100644 --- a/docs/react/tutorial/01-create-application.md +++ b/docs/react/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies. diff --git a/docs/react/tutorial/02-add-e2e-test.md b/docs/react/tutorial/02-add-e2e-test.md index 06f4479647..9747d12b80 100644 --- a/docs/react/tutorial/02-add-e2e-test.md +++ b/docs/react/tutorial/02-add-e2e-test.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 2: Add E2E Tests - + By default, Nx uses [Cypress](https://cypress.io) to run E2E tests. diff --git a/docs/react/tutorial/03-display-todos.md b/docs/react/tutorial/03-display-todos.md index 191bcf440a..95fc83f453 100644 --- a/docs/react/tutorial/03-display-todos.md +++ b/docs/react/tutorial/03-display-todos.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 3: Display Todos - + Great! You have a failing E2E test. Now you can make it pass! diff --git a/docs/react/tutorial/04-connect-to-api.md b/docs/react/tutorial/04-connect-to-api.md index 6ebc1af68d..00c5d19c56 100644 --- a/docs/react/tutorial/04-connect-to-api.md +++ b/docs/react/tutorial/04-connect-to-api.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 4: Connect to an API - + Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API. diff --git a/docs/react/tutorial/05-add-node-app.md b/docs/react/tutorial/05-add-node-app.md index 72e2ef46c0..10f2f778f4 100644 --- a/docs/react/tutorial/05-add-node-app.md +++ b/docs/react/tutorial/05-add-node-app.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 5: Add Node Application Implementing API - + The requests fail because the API has not been created yet. Using Nx you develop node applications next to your React applications. You can use same commands to run and test them. You share code between the backend and the frontend. Use this capability to implement the API service. diff --git a/docs/react/tutorial/06-proxy.md b/docs/react/tutorial/06-proxy.md index 98b3584130..9a6b8f7719 100644 --- a/docs/react/tutorial/06-proxy.md +++ b/docs/react/tutorial/06-proxy.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 6: Proxy Configuration - + You passed `--frontendProject=todos` when creating the node application. What did that argument do? diff --git a/docs/react/tutorial/07-share-code.md b/docs/react/tutorial/07-share-code.md index bae241f572..1fc90bafba 100644 --- a/docs/react/tutorial/07-share-code.md +++ b/docs/react/tutorial/07-share-code.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 7: Share Code - + Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it diverges, and, as a result, runtime errors creep in. You should share this interface between the backend and the frontend. In Nx, you do this by creating a library. diff --git a/docs/react/tutorial/08-create-libs.md b/docs/react/tutorial/08-create-libs.md index cc069f36ea..e270bbe655 100644 --- a/docs/react/tutorial/08-create-libs.md +++ b/docs/react/tutorial/08-create-libs.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 8: Create Libs - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/docs/react/tutorial/09-dep-graph.md b/docs/react/tutorial/09-dep-graph.md index 2988d379c6..f8a6b2c1ce 100644 --- a/docs/react/tutorial/09-dep-graph.md +++ b/docs/react/tutorial/09-dep-graph.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 9: Dep Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it can be difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/docs/react/tutorial/10-computation-caching.md b/docs/react/tutorial/10-computation-caching.md index 90d76e2486..b851129319 100644 --- a/docs/react/tutorial/10-computation-caching.md +++ b/docs/react/tutorial/10-computation-caching.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 10: Computation Caching - + Nx has built-in computation caching, which helps drastically improve the performance of the commands. diff --git a/docs/react/tutorial/11-test-affected-projects.md b/docs/react/tutorial/11-test-affected-projects.md index df63f5f658..9cf9f70ab9 100644 --- a/docs/react/tutorial/11-test-affected-projects.md +++ b/docs/react/tutorial/11-test-affected-projects.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 11: Test Affected Projects - + In addition to supporting computation caching, Nx scales your development by doing code change analysis to see what is affected by a particular pull request. diff --git a/docs/shared/console.md b/docs/shared/console.md index d65c334b68..d6fd962da3 100644 --- a/docs/shared/console.md +++ b/docs/shared/console.md @@ -55,35 +55,35 @@ Even though we started building Nx Console as a tool for experts, we also aimed The `Generate` action allows you to choose a generator and then opens a form listing out all the options for that generator. As you make changes to the form, the generator is executed in `--dry-run` mode in a terminal so you can preview the results of running the generator in real time. - + **From the Command Palette** You can also launch the `Generate` action from the Command Palette (`⇧⌘P`) by selecting `nx: generate (ui)`. - + You can even construct the generator options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: generate`. After choosing a generator, select any of the listed options to modify the generator command. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list. - + #### Run The `Run` action allows you to choose an executor command and then opens a form listing out all the options for that executor. The frequently used executor commands `build`, `serve`, `test`, `e2e` and `lint` also have their own dedicated actions. - + **From the Command Palette** You can also construct the executor command options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: test`. After choosing a project, select any of the listed options to modify the executor command options. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list. - + #### Common Nx Commands You can also launch other common Nx commands with the options listed out in the Command Palette. - + #### Projects @@ -95,7 +95,7 @@ Clicking the ![folder-light.svg](./folder-light.svg) icon next to a project reve Clicking the ![continue-light.svg](./continue-light.svg) icon next to an executor command executes that command without prompting for options. - + #### Streamlining diff --git a/docs/shared/guides/lerna-and-nx.md b/docs/shared/guides/lerna-and-nx.md index 5359fa27e0..4c18f4ecf3 100644 --- a/docs/shared/guides/lerna-and-nx.md +++ b/docs/shared/guides/lerna-and-nx.md @@ -212,7 +212,7 @@ When running `npx add-nx-to-monorepo`, a `workspace.json` file is not required ( to infer the projects in your repository by looking for existing `package.json` files. These can be mixed with `project.json` files and traditional configuration settings described in the [configuration guide]({{framework}}/configuration). - + ## Clarifying Misconceptions diff --git a/docs/shared/migration/adding-to-monorepo.md b/docs/shared/migration/adding-to-monorepo.md index f204bc3931..9f633f4d93 100644 --- a/docs/shared/migration/adding-to-monorepo.md +++ b/docs/shared/migration/adding-to-monorepo.md @@ -9,7 +9,7 @@ npx add-nx-to-monorepo See it in action (3-minute video): - + `npx add-nx-to-monorepo` does the following: @@ -74,7 +74,7 @@ other tools because it looks not just at the changed files but also at the natur Run `npx nx dep-graph` to see a visualization of your workspace. `npx nx affected:dep-graph` shows what is affected by your commit. `npx nx dep-graph --watch` watches your workspace for changes and updates the visualization. - + ### GitHub integration @@ -142,8 +142,8 @@ import source code analysis. If the path mappings are deduced incorrectly, feel ### Speeding Up Remotion Monorepo with Nx - + ### Speeding Up Storybook Monorepo with Nx - + diff --git a/docs/shared/nx-core.md b/docs/shared/nx-core.md index 505d793c26..c9b74f38a8 100644 --- a/docs/shared/nx-core.md +++ b/docs/shared/nx-core.md @@ -234,4 +234,4 @@ what `build` means. It can be an npm script, a custom Nx executor, a Gradle task As you can see, the core of Nx is generic, simple, and unobtrusive. Nx Plugins are completely optional, but they can really level up your developer experience. Watch this video to see the plugins in actions. - + diff --git a/docs/shared/nx-plugin.md b/docs/shared/nx-plugin.md index aa05445dc6..b5786d6403 100644 --- a/docs/shared/nx-plugin.md +++ b/docs/shared/nx-plugin.md @@ -6,7 +6,7 @@ Nx plugins are npm packages that contain generators and executors to extend a Nx > A list of custom plugins created by the community is found in the [Community](/community) section. > Plugins are written using Nx Devkit. **Read [Nx Devkit](/{{framework}}/core-concepts/nx-devkit) for more information.** - + ## Generating a Plugin diff --git a/docs/shared/workspace/structure/dependency-graph.md b/docs/shared/workspace/structure/dependency-graph.md index ab8e70a1ce..ba97a31c63 100644 --- a/docs/shared/workspace/structure/dependency-graph.md +++ b/docs/shared/workspace/structure/dependency-graph.md @@ -2,7 +2,7 @@ To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to construct this dependency graph. And it gives you a way to explore it: - + ## How the Project Graph is Built diff --git a/nx-dev/nx-dev/pages/angular.tsx b/nx-dev/nx-dev/pages/angular.tsx index 8d4f073889..629d7e3441 100644 --- a/nx-dev/nx-dev/pages/angular.tsx +++ b/nx-dev/nx-dev/pages/angular.tsx @@ -107,8 +107,7 @@ export function AngularPage() { height="315" src="https://www.youtube.com/embed/cXOkmOy-8dk" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" className="w-full" /> @@ -159,8 +158,7 @@ export function AngularPage() { height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" className="w-full" /> diff --git a/nx-dev/nx-dev/pages/community.tsx b/nx-dev/nx-dev/pages/community.tsx index dde5598033..a7c0bd513e 100644 --- a/nx-dev/nx-dev/pages/community.tsx +++ b/nx-dev/nx-dev/pages/community.tsx @@ -261,8 +261,7 @@ export function Community(props: CommunityProps) { title="YouTube video player" src="https://www.youtube.com/embed/XYO689PAhow" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" className="w-full" /> diff --git a/nx-dev/nx-dev/pages/node.tsx b/nx-dev/nx-dev/pages/node.tsx index f6726cb5c9..e926d40414 100644 --- a/nx-dev/nx-dev/pages/node.tsx +++ b/nx-dev/nx-dev/pages/node.tsx @@ -198,8 +198,7 @@ export function Node() { {/* src="https://www.youtube.com/embed/iIh5h_G52kI"*/} {/* title="YouTube video player"*/} {/* frameBorder="0"*/} - {/* allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"*/} - {/* allowFullScreen*/} + {/* allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"*/} {/* className="w-full"*/} {/*/>*/} @@ -293,8 +292,7 @@ export function Node() { src="https://www.youtube.com/embed/UcBSBQYNlhE" title="YouTube video player" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" className="w-full" /> @@ -345,8 +343,7 @@ export function Node() { height="440" src="https://www.youtube.com/embed/iIh5h_G52kI" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" className="w-max-full mb-8" style={{ boxShadow: '-48px 48px 0 0 hsla(162, 47%, 50%, 1)' }} /> diff --git a/nx-dev/nx-dev/pages/react.tsx b/nx-dev/nx-dev/pages/react.tsx index 4fcc10124e..38e9d22052 100644 --- a/nx-dev/nx-dev/pages/react.tsx +++ b/nx-dev/nx-dev/pages/react.tsx @@ -103,8 +103,7 @@ export function ReactPage() { height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" className="w-full" /> @@ -173,8 +172,7 @@ export function ReactPage() { height="315" src="https://www.youtube.com/embed/HcQE5R6ucng" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" className="w-full" /> diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/getting-started/intro.md b/nx-dev/nx-dev/public/documentation/latest/angular/getting-started/intro.md index 9e61af5e54..590b7d4d8f 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/getting-started/intro.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/getting-started/intro.md @@ -8,7 +8,7 @@ modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress]( ## 10-Minute Nx Overview - + ## Philosophy diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/01-create-application.md index 6fc93dda87..fa0399eaba 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/02-add-e2e-test.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/02-add-e2e-test.md index fb162d6395..1cadd90768 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/02-add-e2e-test.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/02-add-e2e-test.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 2: Add E2E Tests - + By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/03-display-todos.md index 495eecc653..96cf20fb5b 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/03-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/03-display-todos.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 3: Display Todos - + Great! You have a failing E2E test. Now you can make it pass! diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/04-connect-to-api.md index e6d40413ca..b03850f62d 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/04-connect-to-api.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/04-connect-to-api.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 4: Connect to an API - + Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/05-add-node-app.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/05-add-node-app.md index 6fc5e6fa43..ccc56e6b68 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/05-add-node-app.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/05-add-node-app.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 5: Add Node Application Implementing an API - + The requests fail because the API has not been created yet. Using Nx you can develop node applications next to your Angular applications. You can use same commands to run and test them. You can share code between the backend and the frontend. Use this capability to implement the API service. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/06-proxy.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/06-proxy.md index c52df969d0..6694a6acbb 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/06-proxy.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/06-proxy.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 6: Proxy - + You passed `--frontendProject=todos` when creating the node application. What did that argument do? diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/07-share-code.md index f861ab4bbc..78147f9ec4 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/07-share-code.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/07-share-code.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 7: Share Code - + Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/08-create-libs.md index 38952bdfb4..91b2f850a4 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/08-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/08-create-libs.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 8: Create Libs - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/09-dep-graph.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/09-dep-graph.md index a8bc236c1d..c8429ed3c8 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/09-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/09-dep-graph.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 9: Using the Depedency Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it becomes more difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/10-computation-caching.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/10-computation-caching.md index 2854393d0c..78538b3825 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/10-computation-caching.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/10-computation-caching.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 10: Computation Caching - + Nx has built-in computation caching, which helps drastically improve the performance of the commands. diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/11-test-affected-projects.md index e51951abdf..f8a8f6771d 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/tutorial/11-test-affected-projects.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 11: Testing Affected Projects - + Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects. diff --git a/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md b/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md index 660889070d..53218e3638 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md @@ -4,7 +4,7 @@ Nx is a smart, fast and extensible build system. It comes with first class monor ## 10-Minute Nx Overview - + ## Philosophy diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md index 1b82865306..722635b5da 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a server application out of common libraries using modern technologies. diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md index 255e099107..6477d2d921 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 2: Display todos - + Great! you now have a server application set up to show some data when going to the `/api` route. diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/03-share-code.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/03-share-code.md index e0c428a510..c36f210417 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/03-share-code.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/03-share-code.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 3: Share Code - + Awesome! The application is working as expected! diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/04-create-libs.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/04-create-libs.md index cd9122e86e..bf08085503 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/04-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/04-create-libs.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 4: Create Libraries - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/05-dep-graph.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/05-dep-graph.md index 2a27e2ded5..a1cfde217c 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/05-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/05-dep-graph.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 5: Dep Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it becomes more difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/06-computation-caching.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/06-computation-caching.md index 4c20d0d02a..ac0ebbfd47 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/06-computation-caching.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/06-computation-caching.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 6: Computation Caching - + Nx has built-in computation caching, which drastically improves the performance of the commands. diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/07-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/07-test-affected-projects.md index 087f5219ed..3e2b219a52 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/07-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/07-test-affected-projects.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 7: Test Affected Projects - + In addition to supporting computation caching, Nx scales your development by doing code change analysis to see what apps or libraries are affected by a particular pull request. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/getting-started/intro.md b/nx-dev/nx-dev/public/documentation/latest/react/getting-started/intro.md index 94753223ad..7e5b97f8ae 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/getting-started/intro.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/getting-started/intro.md @@ -9,7 +9,7 @@ frameworks like [Gatsby](/{{version}}/react/gatsby/overview) and [Next.js](/{{ve ## 10-Minute Nx Overview - + ## Philosophy diff --git a/nx-dev/nx-dev/public/documentation/latest/react/guides/storybook/migrate-webpack-final.md b/nx-dev/nx-dev/public/documentation/latest/react/guides/storybook/migrate-webpack-final.md index 7a710dfb9a..9caec1350d 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/guides/storybook/migrate-webpack-final.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/guides/storybook/migrate-webpack-final.md @@ -2,7 +2,7 @@ Nx 12.7 comes with a dedicated Storybook preset for React which drammatically simplifies the Storybook setup and makes sure that Storybook uses the same webpack configuration as your React applications running within an Nx workspace. - + Here are the main differences to the previous versions of Nx: diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/01-create-application.md index 322fdf2671..2cb8f7b2c9 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/02-add-e2e-test.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/02-add-e2e-test.md index 06f4479647..9747d12b80 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/02-add-e2e-test.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/02-add-e2e-test.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 2: Add E2E Tests - + By default, Nx uses [Cypress](https://cypress.io) to run E2E tests. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md index 191bcf440a..95fc83f453 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 3: Display Todos - + Great! You have a failing E2E test. Now you can make it pass! diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md index 6ebc1af68d..00c5d19c56 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 4: Connect to an API - + Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/05-add-node-app.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/05-add-node-app.md index 72e2ef46c0..10f2f778f4 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/05-add-node-app.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/05-add-node-app.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 5: Add Node Application Implementing API - + The requests fail because the API has not been created yet. Using Nx you develop node applications next to your React applications. You can use same commands to run and test them. You share code between the backend and the frontend. Use this capability to implement the API service. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/06-proxy.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/06-proxy.md index 98b3584130..9a6b8f7719 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/06-proxy.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/06-proxy.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 6: Proxy Configuration - + You passed `--frontendProject=todos` when creating the node application. What did that argument do? diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md index bae241f572..1fc90bafba 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 7: Share Code - + Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it diverges, and, as a result, runtime errors creep in. You should share this interface between the backend and the frontend. In Nx, you do this by creating a library. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md index cc069f36ea..e270bbe655 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 8: Create Libs - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/09-dep-graph.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/09-dep-graph.md index 2988d379c6..f8a6b2c1ce 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/09-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/09-dep-graph.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 9: Dep Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it can be difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/10-computation-caching.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/10-computation-caching.md index 90d76e2486..b851129319 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/10-computation-caching.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/10-computation-caching.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 10: Computation Caching - + Nx has built-in computation caching, which helps drastically improve the performance of the commands. diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md index df63f5f658..9cf9f70ab9 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 11: Test Affected Projects - + In addition to supporting computation caching, Nx scales your development by doing code change analysis to see what is affected by a particular pull request. diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/console.md b/nx-dev/nx-dev/public/documentation/latest/shared/console.md index d65c334b68..d6fd962da3 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/console.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/console.md @@ -55,35 +55,35 @@ Even though we started building Nx Console as a tool for experts, we also aimed The `Generate` action allows you to choose a generator and then opens a form listing out all the options for that generator. As you make changes to the form, the generator is executed in `--dry-run` mode in a terminal so you can preview the results of running the generator in real time. - + **From the Command Palette** You can also launch the `Generate` action from the Command Palette (`⇧⌘P`) by selecting `nx: generate (ui)`. - + You can even construct the generator options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: generate`. After choosing a generator, select any of the listed options to modify the generator command. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list. - + #### Run The `Run` action allows you to choose an executor command and then opens a form listing out all the options for that executor. The frequently used executor commands `build`, `serve`, `test`, `e2e` and `lint` also have their own dedicated actions. - + **From the Command Palette** You can also construct the executor command options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: test`. After choosing a project, select any of the listed options to modify the executor command options. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list. - + #### Common Nx Commands You can also launch other common Nx commands with the options listed out in the Command Palette. - + #### Projects @@ -95,7 +95,7 @@ Clicking the ![folder-light.svg](./folder-light.svg) icon next to a project reve Clicking the ![continue-light.svg](./continue-light.svg) icon next to an executor command executes that command without prompting for options. - + #### Streamlining diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/guides/lerna-and-nx.md b/nx-dev/nx-dev/public/documentation/latest/shared/guides/lerna-and-nx.md index a46c800048..22536692f8 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/guides/lerna-and-nx.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/guides/lerna-and-nx.md @@ -212,7 +212,7 @@ When running `npx add-nx-to-monorepo`, a `workspace.json` file is not required ( to infer the projects in your repository by looking for existing `package.json` files. These can be mixed with `project.json` files and traditional configuration settings described in the [configuration guide]({{framework}}/configuration). - + ## Clarifying Misconceptions diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/migration/adding-to-monorepo.md b/nx-dev/nx-dev/public/documentation/latest/shared/migration/adding-to-monorepo.md index f204bc3931..47a456e881 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/migration/adding-to-monorepo.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/migration/adding-to-monorepo.md @@ -9,7 +9,7 @@ npx add-nx-to-monorepo See it in action (3-minute video): - + `npx add-nx-to-monorepo` does the following: @@ -74,7 +74,7 @@ other tools because it looks not just at the changed files but also at the natur Run `npx nx dep-graph` to see a visualization of your workspace. `npx nx affected:dep-graph` shows what is affected by your commit. `npx nx dep-graph --watch` watches your workspace for changes and updates the visualization. - + ### GitHub integration @@ -142,8 +142,8 @@ import source code analysis. If the path mappings are deduced incorrectly, feel ### Speeding Up Remotion Monorepo with Nx - + ### Speeding Up Storybook Monorepo with Nx - + diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/nx-core.md b/nx-dev/nx-dev/public/documentation/latest/shared/nx-core.md index 505d793c26..c9b74f38a8 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/nx-core.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/nx-core.md @@ -234,4 +234,4 @@ what `build` means. It can be an npm script, a custom Nx executor, a Gradle task As you can see, the core of Nx is generic, simple, and unobtrusive. Nx Plugins are completely optional, but they can really level up your developer experience. Watch this video to see the plugins in actions. - + diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/nx-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/nx-plugin.md index aa05445dc6..b5786d6403 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/nx-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/nx-plugin.md @@ -6,7 +6,7 @@ Nx plugins are npm packages that contain generators and executors to extend a Nx > A list of custom plugins created by the community is found in the [Community](/community) section. > Plugins are written using Nx Devkit. **Read [Nx Devkit](/{{framework}}/core-concepts/nx-devkit) for more information.** - + ## Generating a Plugin diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/workspace/structure/dependency-graph.md b/nx-dev/nx-dev/public/documentation/latest/shared/workspace/structure/dependency-graph.md index ab8e70a1ce..ba97a31c63 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/workspace/structure/dependency-graph.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/workspace/structure/dependency-graph.md @@ -2,7 +2,7 @@ To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to construct this dependency graph. And it gives you a way to explore it: - + ## How the Project Graph is Built diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/getting-started/intro.md b/nx-dev/nx-dev/public/documentation/previous/angular/getting-started/intro.md index 88428cbd9b..53de8b2dca 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/getting-started/intro.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/getting-started/intro.md @@ -8,7 +8,7 @@ modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress]( ## 10-Minute Nx Overview - + ## Philosophy diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/01-create-application.md index d16940f1ad..4169eb1e43 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/02-add-e2e-test.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/02-add-e2e-test.md index ff2b4a18a3..f2490346f4 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/02-add-e2e-test.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/02-add-e2e-test.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 2: Add E2E Tests - + By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/03-display-todos.md index 141cc6f063..f0cc195d15 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/03-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/03-display-todos.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 3: Display Todos - + Great! You have a failing E2E test. Now you can make it pass! diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/04-connect-to-api.md index 7c826fabcb..1ad099191d 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/04-connect-to-api.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/04-connect-to-api.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 4: Connect to an API - + Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/05-add-node-app.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/05-add-node-app.md index 5f4d457945..a5cc2e9b1d 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/05-add-node-app.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/05-add-node-app.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 5: Add Node Application Implementing an API - + The requests fail because the API has not been created yet. Using Nx you can develop node applications next to your Angular applications. You can use same commands to run and test them. You can share code between the backend and the frontend. Use this capability to implement the API service. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/06-proxy.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/06-proxy.md index dbea836a55..bd55652909 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/06-proxy.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/06-proxy.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 6: Proxy - + You passed `--frontendProject=todos` when creating the node application. What did that argument do? diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/07-share-code.md index f7bf7e3395..b50cdff016 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/07-share-code.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/07-share-code.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 7: Share Code - + Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/08-create-libs.md index 03c97c74c4..f078ed6277 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/08-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/08-create-libs.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 8: Create Libs - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/09-dep-graph.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/09-dep-graph.md index 3b806147d7..0351b0aee1 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/09-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/09-dep-graph.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 9: Dep Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it becomes more difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/10-computation-caching.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/10-computation-caching.md index 2bb1e8edd8..f1231411fb 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/10-computation-caching.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/10-computation-caching.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 10: Computation Caching - + Nx has built-in computation caching, which helps drastically improve the performance of the commands. diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/11-test-affected-projects.md index 888f435ec4..679845eace 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/tutorial/11-test-affected-projects.md @@ -1,6 +1,6 @@ # Angular Nx Tutorial - Step 11: Test Affected Projects - + Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects. diff --git a/nx-dev/nx-dev/public/documentation/previous/node/getting-started/intro.md b/nx-dev/nx-dev/public/documentation/previous/node/getting-started/intro.md index a91a2cc1a7..acb15caaa3 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/getting-started/intro.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/getting-started/intro.md @@ -4,7 +4,7 @@ Nx is a smart and extensible build framework to help you architect, test, and bu ## 10-Minute Nx Overview - + ## Philosophy diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md index 33c9ec60c4..526e87f12a 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a server application out of common libraries using modern technologies. diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md index 255e099107..6477d2d921 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 2: Display todos - + Great! you now have a server application set up to show some data when going to the `/api` route. diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/03-share-code.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/03-share-code.md index e0c428a510..c36f210417 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/03-share-code.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/03-share-code.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 3: Share Code - + Awesome! The application is working as expected! diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/04-create-libs.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/04-create-libs.md index cd9122e86e..bf08085503 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/04-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/04-create-libs.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 4: Create Libraries - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/05-dep-graph.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/05-dep-graph.md index 2a27e2ded5..a1cfde217c 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/05-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/05-dep-graph.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 5: Dep Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it becomes more difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/06-computation-caching.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/06-computation-caching.md index 4c20d0d02a..ac0ebbfd47 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/06-computation-caching.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/06-computation-caching.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 6: Computation Caching - + Nx has built-in computation caching, which drastically improves the performance of the commands. diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/07-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/07-test-affected-projects.md index 087f5219ed..3e2b219a52 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/07-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/07-test-affected-projects.md @@ -1,6 +1,6 @@ # Node Nx Tutorial - Step 7: Test Affected Projects - + In addition to supporting computation caching, Nx scales your development by doing code change analysis to see what apps or libraries are affected by a particular pull request. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/getting-started/intro.md b/nx-dev/nx-dev/public/documentation/previous/react/getting-started/intro.md index d4ca755d69..c97c399871 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/getting-started/intro.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/getting-started/intro.md @@ -9,7 +9,7 @@ React frameworks like [Gatsby](/{{version}}/react/gatsby/overview) and [Next.js] ## 10-Minute Nx Overview - + ## Philosophy diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/01-create-application.md index 232a2bb111..26014e920c 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/01-create-application.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 1: Create Application - + In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/02-add-e2e-test.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/02-add-e2e-test.md index 06f4479647..9747d12b80 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/02-add-e2e-test.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/02-add-e2e-test.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 2: Add E2E Tests - + By default, Nx uses [Cypress](https://cypress.io) to run E2E tests. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md index 191bcf440a..95fc83f453 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 3: Display Todos - + Great! You have a failing E2E test. Now you can make it pass! diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md index 6ebc1af68d..00c5d19c56 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 4: Connect to an API - + Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/05-add-node-app.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/05-add-node-app.md index a56453296e..92a7612e82 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/05-add-node-app.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/05-add-node-app.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 5: Add Node Application Implementing API - + The requests fail because the API has not been created yet. Using Nx you develop node applications next to your React applications. You can use same commands to run and test them. You share code between the backend and the frontend. Use this capability to implement the API service. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/06-proxy.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/06-proxy.md index b6ef88c2ce..38ec496272 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/06-proxy.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/06-proxy.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 6: Proxy - + You passed `--frontendProject=todos` when creating the node application. What did that argument do? diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md index b62c17b2a4..f529fc04cf 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 7: Share Code - + Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the `Todo` interface. The interface is in sync now, but in a real application, over time, it diverges, and, as a result, runtime errors creep in. You should share this interface between the backend and the frontend. In Nx, you do this by creating a library. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md index d7b68b1a4a..6dd72a9251 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 8: Create Libs - + Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/09-dep-graph.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/09-dep-graph.md index af1512b9f8..f5e08ffa1b 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/09-dep-graph.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/09-dep-graph.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 9: Dep Graph - + An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it can be difficult to understand how they depend on each other and the implications of making a particular change. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/10-computation-caching.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/10-computation-caching.md index 2de982aca3..468d7e069c 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/10-computation-caching.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/10-computation-caching.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 10: Computation Caching - + Nx has built-in computation caching, which helps drastically improve the performance of the commands. diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md index a2244b5f0f..5a6f01c46d 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md @@ -1,6 +1,6 @@ # React Nx Tutorial - Step 11: Test Affected Projects - + In addition to supporting computation caching, Nx scales your development by doing code change analysis to see what is affected by a particular pull request. diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/console.md b/nx-dev/nx-dev/public/documentation/previous/shared/console.md index d65c334b68..d6fd962da3 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/console.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/console.md @@ -55,35 +55,35 @@ Even though we started building Nx Console as a tool for experts, we also aimed The `Generate` action allows you to choose a generator and then opens a form listing out all the options for that generator. As you make changes to the form, the generator is executed in `--dry-run` mode in a terminal so you can preview the results of running the generator in real time. - + **From the Command Palette** You can also launch the `Generate` action from the Command Palette (`⇧⌘P`) by selecting `nx: generate (ui)`. - + You can even construct the generator options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: generate`. After choosing a generator, select any of the listed options to modify the generator command. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list. - + #### Run The `Run` action allows you to choose an executor command and then opens a form listing out all the options for that executor. The frequently used executor commands `build`, `serve`, `test`, `e2e` and `lint` also have their own dedicated actions. - + **From the Command Palette** You can also construct the executor command options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: test`. After choosing a project, select any of the listed options to modify the executor command options. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list. - + #### Common Nx Commands You can also launch other common Nx commands with the options listed out in the Command Palette. - + #### Projects @@ -95,7 +95,7 @@ Clicking the ![folder-light.svg](./folder-light.svg) icon next to a project reve Clicking the ![continue-light.svg](./continue-light.svg) icon next to an executor command executes that command without prompting for options. - + #### Streamlining diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/guides/lerna-and-nx.md b/nx-dev/nx-dev/public/documentation/previous/shared/guides/lerna-and-nx.md index 373402a635..02a533aff1 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/guides/lerna-and-nx.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/guides/lerna-and-nx.md @@ -182,7 +182,7 @@ Unfortunately, the example we have here is too basic and won't benefit from usin The following 10-min video walks you through the steps of adding Nx to a Lerna repo and showing many affordances Nx offers. Although the video uses Lerna, everything said applies to Yarn Workspaces or PNPM. Basically, any time you hear "Lerna" you can substitute it for Yarn or PNPM. - + ## Clarifying Misconceptions diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/migration/adding-to-monorepo.md b/nx-dev/nx-dev/public/documentation/previous/shared/migration/adding-to-monorepo.md index 56c4070da0..ae2ce8cc92 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/migration/adding-to-monorepo.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/migration/adding-to-monorepo.md @@ -9,7 +9,7 @@ npx add-nx-to-monorepo See it in action (3-minute video): - + `npx add-nx-to-monorepo` does the following: @@ -41,7 +41,7 @@ Nx automatically analyzes your workspace to know what projects are affected by y Run `npx nx dep-graph` to see a visualization of your workspace. `npx nx affected:dep-graph` shows what is affected by your commit. `npx nx dep-graph --watch` watches your workspace for changes and updates the the visualization. - + ### Github Integration @@ -110,8 +110,8 @@ This tsconfig isn't used for building or testing. It's only used to teach Nx how ### Speeding Up Remotion Monorepo with Nx - + ### Speeding Up Storybook Monorepo with Nx - + diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/nx-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/nx-plugin.md index aa05445dc6..b5786d6403 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/nx-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/nx-plugin.md @@ -6,7 +6,7 @@ Nx plugins are npm packages that contain generators and executors to extend a Nx > A list of custom plugins created by the community is found in the [Community](/community) section. > Plugins are written using Nx Devkit. **Read [Nx Devkit](/{{framework}}/core-concepts/nx-devkit) for more information.** - + ## Generating a Plugin diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/workspace/structure/dependency-graph.md b/nx-dev/nx-dev/public/documentation/previous/shared/workspace/structure/dependency-graph.md index ab8e70a1ce..ba97a31c63 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/workspace/structure/dependency-graph.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/workspace/structure/dependency-graph.md @@ -2,7 +2,7 @@ To be able to support the monorepo-style development, the tools must know how different projects in your workspace depend on each other. Nx uses advanced code analysis to construct this dependency graph. And it gives you a way to explore it: - + ## How the Project Graph is Built diff --git a/nx-dev/ui-home/src/lib/getting-started.tsx b/nx-dev/ui-home/src/lib/getting-started.tsx index 71ea0ec41c..ddfc62c9b2 100644 --- a/nx-dev/ui-home/src/lib/getting-started.tsx +++ b/nx-dev/ui-home/src/lib/getting-started.tsx @@ -203,8 +203,7 @@ function AngularPane(): ReactComponentElement { height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" />
{ height="315" src="https://www.youtube.com/embed/UcBSBQYNlhE" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" />
{ height="315" src="https://www.youtube.com/embed/HcQE5R6ucng" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" />
{ height="315" src="https://www.youtube.com/embed/HcQE5R6ucng" frameBorder="0" - allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" - allowFullScreen + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" />