miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Docs video updates (#8254)

Browse Source 
* docs(core): fix youtube allow=fullscreen attribute

* docs(react): add video to cra-to-nx guide

Co-authored-by: Isaac Mann <isaacplmann+git@gmail.com>
This commit is contained in:
Isaac Mann 2021-12-21 09:55:27 -05:00 committed by GitHub
parent 7f8d58b5c2
commit 281df64ba8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
121 changed files with 160 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/angular/getting-started/intro.md
View File

@ -8,7 +8,7 @@ modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress](
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/cXOkmOy-8dk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/cXOkmOy-8dk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
docs/angular/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest.

2
docs/angular/tutorial/02-add-e2e-test.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 2: Add E2E Tests
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests.

2
docs/angular/tutorial/03-display-todos.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 3: Display Todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlKAwGXmpac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlKAwGXmpac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! You have a failing E2E test. Now you can make it pass!

2
docs/angular/tutorial/04-connect-to-api.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 4: Connect to an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/digMpZzPtg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/digMpZzPtg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.

2
docs/angular/tutorial/05-add-node-app.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 5: Add Node Application Implementing an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/SsCx2WErVTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/SsCx2WErVTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/angular/tutorial/06-proxy.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 6: Proxy
<iframe width="560" height="315" src="https://www.youtube.com/embed/7d6jDAbmVnE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7d6jDAbmVnE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
You passed `--frontendProject=todos` when creating the node application. What did that argument do?

2
docs/angular/tutorial/07-share-code.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 7: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/icyOSQ6gAm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/icyOSQ6gAm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/angular/tutorial/08-create-libs.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 8: Create Libs
<iframe width="560" height="315" src="https://www.youtube.com/embed/szaH7fNw0zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/szaH7fNw0zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/angular/tutorial/09-dep-graph.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 9: Using the Depedency Graph
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/angular/tutorial/10-computation-caching.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 10: Computation Caching
<iframe width="560" height="315" src="https://www.youtube.com/embed/HX3--ilBhBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HX3--ilBhBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Nx has built-in computation caching, which helps drastically improve the performance of the commands.

2
docs/angular/tutorial/11-test-affected-projects.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 11: Testing Affected Projects
<iframe width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects.

2
docs/node/getting-started/intro.md
View File

@ -4,7 +4,7 @@ Nx is a smart, fast and extensible build system. It comes with first class monor
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/iIh5h_G52kI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iIh5h_G52kI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
docs/node/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/UcBSBQYNlhE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UcBSBQYNlhE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a server application out of common libraries using modern technologies.

2
docs/node/tutorial/02-display-todos.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 2: Display todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4-sO2LeVbU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4-sO2LeVbU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! you now have a server application set up to show some data when going to the `/api` route.

2
docs/node/tutorial/03-share-code.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 3: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/MqqwOoKa-Ho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MqqwOoKa-Ho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Awesome! The application is working as expected!

2
docs/node/tutorial/04-create-libs.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 4: Create Libraries
<iframe width="560" height="315" src="https://www.youtube.com/embed/V29I_DHGlB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/V29I_DHGlB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/node/tutorial/05-dep-graph.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 5: Dep Graph
<iframe width="560" height="315" src="https://www.youtube.com/embed/l9MjZ9IPdu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/l9MjZ9IPdu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/node/tutorial/06-computation-caching.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 6: Computation Caching
<iframe width="560" height="315" src="https://www.youtube.com/embed/gXChzhI1Qpg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gXChzhI1Qpg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Nx has built-in computation caching, which drastically improves the performance of the commands.

2
docs/node/tutorial/07-test-affected-projects.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 7: Test Affected Projects
<iframe width="560" height="315" src="https://www.youtube.com/embed/TRRVLyHfN60" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TRRVLyHfN60" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/react/getting-started/intro.md
View File

@ -9,7 +9,7 @@ frameworks like [Gatsby](/{{version}}/react/gatsby/overview) and [Next.js](/{{ve
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
docs/react/guides/storybook/migrate-webpack-final.md
View File

@ -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.
<iframe width="560" height="315" src="https://www.youtube.com/embed/oUE74McS_NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oUE74McS_NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Here are the main differences to the previous versions of Nx:

6
docs/react/migration/migration-cra.md
View File

@ -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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/_XmbVpwo1vs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Doing the migration manually
In this article, you’ll learn how to:

2
docs/react/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/HcQE5R6ucng" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HcQE5R6ucng" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies.

2
docs/react/tutorial/02-add-e2e-test.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 2: Add E2E Tests
<iframe width="560" height="315" src="https://www.youtube.com/embed/3HSzqt3WiVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3HSzqt3WiVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
By default, Nx uses [Cypress](https://cypress.io) to run E2E tests.

2
docs/react/tutorial/03-display-todos.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 3: Display Todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/fNehP0WX__c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/fNehP0WX__c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! You have a failing E2E test. Now you can make it pass!

2
docs/react/tutorial/04-connect-to-api.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 4: Connect to an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/HexxYHpIfAo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HexxYHpIfAo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.

2
docs/react/tutorial/05-add-node-app.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 5: Add Node Application Implementing API
<iframe width="560" height="315" src="https://www.youtube.com/embed/XgfknOqgxQ0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XgfknOqgxQ0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/react/tutorial/06-proxy.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 6: Proxy Configuration
<iframe width="560" height="315" src="https://www.youtube.com/embed/xfvCz-yLeEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xfvCz-yLeEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
You passed `--frontendProject=todos` when creating the node application. What did that argument do?

2
docs/react/tutorial/07-share-code.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 7: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/-zzw4_oT_2I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/-zzw4_oT_2I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/react/tutorial/08-create-libs.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 8: Create Libs
<iframe width="560" height="315" src="https://www.youtube.com/embed/a1CAYlXizWM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/a1CAYlXizWM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/react/tutorial/09-dep-graph.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 9: Dep Graph
<iframe width="560" height="315" src="https://www.youtube.com/embed/Dr7jI9RYcmY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Dr7jI9RYcmY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
docs/react/tutorial/10-computation-caching.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 10: Computation Caching
<iframe width="560" height="315" src="https://www.youtube.com/embed/aNjvT3VX1Ts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/aNjvT3VX1Ts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Nx has built-in computation caching, which helps drastically improve the performance of the commands.

2
docs/react/tutorial/11-test-affected-projects.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 11: Test Affected Projects
<iframe width="560" height="315" src="https://www.youtube.com/embed/_mBBFRjs01g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/_mBBFRjs01g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

14
docs/shared/console.md
View File

@ -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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/-nUr66MWRiE?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/-nUr66MWRiE?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
**From the Command Palette**
You can also launch the `Generate` action from the Command Palette (`⇧⌘P`) by selecting `nx: generate (ui)`.
<iframe width="560" height="420" src="https://www.youtube.com/embed/Sk2XjFwF8Zo?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/Sk2XjFwF8Zo?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/q5NTTqRYq9c?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/q5NTTqRYq9c?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### 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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/rNImFxo9gYs?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/rNImFxo9gYs?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
**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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/CsUkSyQcxwQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/CsUkSyQcxwQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### Common Nx Commands
You can also launch other common Nx commands with the options listed out in the Command Palette.
<iframe width="560" height="420" src="https://www.youtube.com/embed/v6Tso0lB6S4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/v6Tso0lB6S4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### 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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/ve_N3unDqAg?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/ve_N3unDqAg?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### Streamlining

2
docs/shared/guides/lerna-and-nx.md
View File

@ -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).
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Clarifying Misconceptions

8
docs/shared/migration/adding-to-monorepo.md
View File

@ -9,7 +9,7 @@ npx add-nx-to-monorepo
See it in action (3-minute video):
<iframe width="560" height="315" src="https://www.youtube.com/embed/jkPeUFhH5h4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Dq2ftPf3sn4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
`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.
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>
### GitHub integration
@ -142,8 +142,8 @@ import source code analysis. If the path mappings are deduced incorrectly, feel
### Speeding Up Remotion Monorepo with Nx
<iframe width="560" height="315" src="https://www.youtube.com/embed/TXySu4dZLp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TXySu4dZLp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>
### Speeding Up Storybook Monorepo with Nx
<iframe width="560" height="315" src="https://www.youtube.com/embed/3o8w6jbDr4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3o8w6jbDr4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>

2
docs/shared/nx-core.md
View File

@ -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.
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
docs/shared/nx-plugin.md
View File

@ -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.**
<iframe width="560" height="315" src="https://www.youtube.com/embed/fC1-4fAZDP4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/fC1-4fAZDP4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Generating a Plugin

2
docs/shared/workspace/structure/dependency-graph.md
View File

@ -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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## How the Project Graph is Built

6
nx-dev/nx-dev/pages/angular.tsx
View File

@ -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"
/>
</div>
@ -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"
/>
</div>

3
nx-dev/nx-dev/pages/community.tsx
View File

@ -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"
/>
</div>

9
nx-dev/nx-dev/pages/node.tsx
View File

@ -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"*/}
{/*/>*/}
</div>
@ -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"
/>
</div>
@ -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)' }}
/>

6
nx-dev/nx-dev/pages/react.tsx
View File

@ -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"
/>
</div>
@ -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"
/>
</div>

2
nx-dev/nx-dev/public/documentation/latest/angular/getting-started/intro.md
View File

@ -8,7 +8,7 @@ modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress](
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/cXOkmOy-8dk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/cXOkmOy-8dk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/02-add-e2e-test.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 2: Add E2E Tests
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/03-display-todos.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 3: Display Todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlKAwGXmpac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlKAwGXmpac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! You have a failing E2E test. Now you can make it pass!

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/04-connect-to-api.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 4: Connect to an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/digMpZzPtg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/digMpZzPtg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/05-add-node-app.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 5: Add Node Application Implementing an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/SsCx2WErVTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/SsCx2WErVTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/06-proxy.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 6: Proxy
<iframe width="560" height="315" src="https://www.youtube.com/embed/7d6jDAbmVnE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7d6jDAbmVnE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
You passed `--frontendProject=todos` when creating the node application. What did that argument do?

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/07-share-code.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 7: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/icyOSQ6gAm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/icyOSQ6gAm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/08-create-libs.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 8: Create Libs
<iframe width="560" height="315" src="https://www.youtube.com/embed/szaH7fNw0zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/szaH7fNw0zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/09-dep-graph.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 9: Using the Depedency Graph
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/10-computation-caching.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 10: Computation Caching
<iframe width="560" height="315" src="https://www.youtube.com/embed/HX3--ilBhBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HX3--ilBhBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Nx has built-in computation caching, which helps drastically improve the performance of the commands.

2
nx-dev/nx-dev/public/documentation/latest/angular/tutorial/11-test-affected-projects.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 11: Testing Affected Projects
<iframe width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects.

2
nx-dev/nx-dev/public/documentation/latest/node/getting-started/intro.md
View File

@ -4,7 +4,7 @@ Nx is a smart, fast and extensible build system. It comes with first class monor
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/iIh5h_G52kI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iIh5h_G52kI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/UcBSBQYNlhE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UcBSBQYNlhE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a server application out of common libraries using modern technologies.

2
nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 2: Display todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4-sO2LeVbU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4-sO2LeVbU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! you now have a server application set up to show some data when going to the `/api` route.

2
nx-dev/nx-dev/public/documentation/latest/node/tutorial/03-share-code.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 3: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/MqqwOoKa-Ho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MqqwOoKa-Ho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Awesome! The application is working as expected!

2
nx-dev/nx-dev/public/documentation/latest/node/tutorial/04-create-libs.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 4: Create Libraries
<iframe width="560" height="315" src="https://www.youtube.com/embed/V29I_DHGlB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/V29I_DHGlB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/node/tutorial/05-dep-graph.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 5: Dep Graph
<iframe width="560" height="315" src="https://www.youtube.com/embed/l9MjZ9IPdu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/l9MjZ9IPdu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/node/tutorial/06-computation-caching.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 6: Computation Caching
<iframe width="560" height="315" src="https://www.youtube.com/embed/gXChzhI1Qpg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gXChzhI1Qpg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Nx has built-in computation caching, which drastically improves the performance of the commands.

2
nx-dev/nx-dev/public/documentation/latest/node/tutorial/07-test-affected-projects.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 7: Test Affected Projects
<iframe width="560" height="315" src="https://www.youtube.com/embed/TRRVLyHfN60" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TRRVLyHfN60" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/react/getting-started/intro.md
View File

@ -9,7 +9,7 @@ frameworks like [Gatsby](/{{version}}/react/gatsby/overview) and [Next.js](/{{ve
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
nx-dev/nx-dev/public/documentation/latest/react/guides/storybook/migrate-webpack-final.md
View File

@ -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.
<iframe width="560" height="315" src="https://www.youtube.com/embed/oUE74McS_NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oUE74McS_NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Here are the main differences to the previous versions of Nx:

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/HcQE5R6ucng" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HcQE5R6ucng" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/02-add-e2e-test.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 2: Add E2E Tests
<iframe width="560" height="315" src="https://www.youtube.com/embed/3HSzqt3WiVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3HSzqt3WiVg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
By default, Nx uses [Cypress](https://cypress.io) to run E2E tests.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 3: Display Todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/fNehP0WX__c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/fNehP0WX__c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! You have a failing E2E test. Now you can make it pass!

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 4: Connect to an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/HexxYHpIfAo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HexxYHpIfAo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/05-add-node-app.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 5: Add Node Application Implementing API
<iframe width="560" height="315" src="https://www.youtube.com/embed/XgfknOqgxQ0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XgfknOqgxQ0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/06-proxy.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 6: Proxy Configuration
<iframe width="560" height="315" src="https://www.youtube.com/embed/xfvCz-yLeEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xfvCz-yLeEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
You passed `--frontendProject=todos` when creating the node application. What did that argument do?

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 7: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/-zzw4_oT_2I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/-zzw4_oT_2I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 8: Create Libs
<iframe width="560" height="315" src="https://www.youtube.com/embed/a1CAYlXizWM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/a1CAYlXizWM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/09-dep-graph.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 9: Dep Graph
<iframe width="560" height="315" src="https://www.youtube.com/embed/Dr7jI9RYcmY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Dr7jI9RYcmY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/10-computation-caching.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 10: Computation Caching
<iframe width="560" height="315" src="https://www.youtube.com/embed/aNjvT3VX1Ts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/aNjvT3VX1Ts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Nx has built-in computation caching, which helps drastically improve the performance of the commands.

2
nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md
View File

@ -1,6 +1,6 @@
# React Nx Tutorial - Step 11: Test Affected Projects
<iframe width="560" height="315" src="https://www.youtube.com/embed/_mBBFRjs01g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/_mBBFRjs01g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

14
nx-dev/nx-dev/public/documentation/latest/shared/console.md
View File

@ -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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/-nUr66MWRiE?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/-nUr66MWRiE?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
**From the Command Palette**
You can also launch the `Generate` action from the Command Palette (`⇧⌘P`) by selecting `nx: generate (ui)`.
<iframe width="560" height="420" src="https://www.youtube.com/embed/Sk2XjFwF8Zo?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/Sk2XjFwF8Zo?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/q5NTTqRYq9c?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/q5NTTqRYq9c?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### 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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/rNImFxo9gYs?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/rNImFxo9gYs?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
**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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/CsUkSyQcxwQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/CsUkSyQcxwQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### Common Nx Commands
You can also launch other common Nx commands with the options listed out in the Command Palette.
<iframe width="560" height="420" src="https://www.youtube.com/embed/v6Tso0lB6S4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/v6Tso0lB6S4?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### 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.
<iframe width="560" height="420" src="https://www.youtube.com/embed/ve_N3unDqAg?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="420" src="https://www.youtube.com/embed/ve_N3unDqAg?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
#### Streamlining

2
nx-dev/nx-dev/public/documentation/latest/shared/guides/lerna-and-nx.md
View File

@ -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).
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Clarifying Misconceptions

8
nx-dev/nx-dev/public/documentation/latest/shared/migration/adding-to-monorepo.md
View File

@ -9,7 +9,7 @@ npx add-nx-to-monorepo
See it in action (3-minute video):
<iframe width="560" height="315" src="https://www.youtube.com/embed/jkPeUFhH5h4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jkPeUFhH5h4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
`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.
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
### GitHub integration
@ -142,8 +142,8 @@ import source code analysis. If the path mappings are deduced incorrectly, feel
### Speeding Up Remotion Monorepo with Nx
<iframe width="560" height="315" src="https://www.youtube.com/embed/TXySu4dZLp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TXySu4dZLp0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
### Speeding Up Storybook Monorepo with Nx
<iframe width="560" height="315" src="https://www.youtube.com/embed/3o8w6jbDr4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3o8w6jbDr4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
nx-dev/nx-dev/public/documentation/latest/shared/nx-core.md
View File

@ -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.
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BO1rwynFBLM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

2
nx-dev/nx-dev/public/documentation/latest/shared/nx-plugin.md
View File

@ -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.**
<iframe width="560" height="315" src="https://www.youtube.com/embed/fC1-4fAZDP4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/fC1-4fAZDP4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Generating a Plugin

2
nx-dev/nx-dev/public/documentation/latest/shared/workspace/structure/dependency-graph.md
View File

@ -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:
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/cMZ-ReC-jWU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## How the Project Graph is Built

2
nx-dev/nx-dev/public/documentation/previous/angular/getting-started/intro.md
View File

@ -8,7 +8,7 @@ modern tools and libraries like [Jest](/{{framework}}/jest/overview), [Cypress](
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/cXOkmOy-8dk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/cXOkmOy-8dk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i37yJKK8qGI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/02-add-e2e-test.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 2: Add E2E Tests
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/owRAO75DIR4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
By default, Nx uses [Cypress](/{{framework}}/cypress/overview) to run E2E tests.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/03-display-todos.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 3: Display Todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlKAwGXmpac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JlKAwGXmpac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! You have a failing E2E test. Now you can make it pass!

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/04-connect-to-api.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 4: Connect to an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/digMpZzPtg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/digMpZzPtg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Real-world applications do not live in isolation — they need APIs to talk to. Setup your app to talk to an API.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/05-add-node-app.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 5: Add Node Application Implementing an API
<iframe width="560" height="315" src="https://www.youtube.com/embed/SsCx2WErVTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/SsCx2WErVTI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/06-proxy.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 6: Proxy
<iframe width="560" height="315" src="https://www.youtube.com/embed/7d6jDAbmVnE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7d6jDAbmVnE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
You passed `--frontendProject=todos` when creating the node application. What did that argument do?

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/07-share-code.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 7: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/icyOSQ6gAm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/icyOSQ6gAm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/08-create-libs.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 8: Create Libs
<iframe width="560" height="315" src="https://www.youtube.com/embed/szaH7fNw0zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/szaH7fNw0zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/09-dep-graph.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 9: Dep Graph
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8fr2RukmfW0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/10-computation-caching.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 10: Computation Caching
<iframe width="560" height="315" src="https://www.youtube.com/embed/HX3--ilBhBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HX3--ilBhBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Nx has built-in computation caching, which helps drastically improve the performance of the commands.

2
nx-dev/nx-dev/public/documentation/previous/angular/tutorial/11-test-affected-projects.md
View File

@ -1,6 +1,6 @@
# Angular Nx Tutorial - Step 11: Test Affected Projects
<iframe width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5t77CPl-bbM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Because Nx understands the dependency graph of your workspace, Nx is efficient at retesting and rebuilding your projects.

2
nx-dev/nx-dev/public/documentation/previous/node/getting-started/intro.md
View File

@ -4,7 +4,7 @@ Nx is a smart and extensible build framework to help you architect, test, and bu
## 10-Minute Nx Overview
<iframe width="560" height="315" src="https://www.youtube.com/embed/iIh5h_G52kI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iIh5h_G52kI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
## Philosophy

2
nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 1: Create Application
<iframe width="560" height="315" src="https://www.youtube.com/embed/UcBSBQYNlhE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UcBSBQYNlhE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
In this tutorial you use Nx to build a server application out of common libraries using modern technologies.

2
nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 2: Display todos
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4-sO2LeVbU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4-sO2LeVbU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Great! you now have a server application set up to show some data when going to the `/api` route.

2
nx-dev/nx-dev/public/documentation/previous/node/tutorial/03-share-code.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 3: Share Code
<iframe width="560" height="315" src="https://www.youtube.com/embed/MqqwOoKa-Ho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/MqqwOoKa-Ho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
Awesome! The application is working as expected!

2
nx-dev/nx-dev/public/documentation/previous/node/tutorial/04-create-libs.md
View File

@ -1,6 +1,6 @@
# Node Nx Tutorial - Step 4: Create Libraries
<iframe width="560" height="315" src="https://www.youtube.com/embed/V29I_DHGlB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/V29I_DHGlB8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
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.

Some files were not shown because too many files have changed in this diff Show More