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

docs(nxdev): lazyload iframes (#8517)

Browse Source
This commit is contained in:
Benjamin Cabanes 2022-01-13 13:11:45 -05:00 committed by GitHub
parent 5d18576312
commit 1644b841cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
84 changed files with 124 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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](/cypress/overview) to run E2E tests.

2
docs/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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.

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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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/getting-started/nx-and-angular.md
View File

@ -25,7 +25,7 @@ modern tools and libraries like [Jest](/jest/overview), [Cypress](/cypress/overv
### 10-min Video 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; fullscreen"></iframe>
<iframe loading="lazy" 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>
Check out the following to get started:

2
docs/shared/getting-started/nx-and-react.md
View File

@ -25,7 +25,7 @@ frameworks like [Gatsby](/gatsby/overview), [Next.js](/guides/nextjs), Remix, an
### 10-min Video 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; fullscreen"></iframe>
<iframe loading="lazy" 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>
Check out the following to get started:

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

@ -6,7 +6,7 @@ The `@nrwl/js` package ships with corresponding generators and executors that be
> Note, you can also opt-out of TypeScript and use plain JavaScript by passing the `--js` flag to the generators.
<iframe width="560" height="315" src="https://www.youtube.com/embed/-OmQ-PaSY5M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/-OmQ-PaSY5M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
`@nrwl/js` is particularly useful if you want to

2
docs/shared/guides/storybook/migrate-webpack-final-react.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; fullscreen"></iframe>
<iframe loading="lazy" 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:

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

@ -12,7 +12,7 @@ npx add-nx-to-monorepo
Watch this 3-min video to see how the command works and what next steps are:
<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>
<iframe loading="lazy" 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:
@ -94,7 +94,7 @@ tools because it looks not just at the changed files but also at the nature of t
Run `nx dep-graph` to see a visualization of your workspace. `nx affected:dep-graph` shows what is affected by your
commit. `nx dep-graph --watch` watches your workspace for changes and updates the visualization.
<iframe width="560" height="315" src="https://www.youtube.com/embed/v87Y8NgAYLo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/v87Y8NgAYLo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>
### GitHub integration
@ -215,12 +215,12 @@ If you want to disable the source code analysis, to make Nx match Lerna, add the
### Speeding Up Facebook React Monorepo with Nx
<iframe width="560" height="315" src="https://www.youtube.com/embed/XLP2RAOwfLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/XLP2RAOwfLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### 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" allow="fullscreen"></iframe>
<iframe loading="lazy" 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" allow="fullscreen"></iframe>
<iframe loading="lazy" 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/migration/migration-cra.md
View File

@ -25,7 +25,7 @@ Start from [the commands mentioned in this article](https://nx.dev/migration/mig
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>
<iframe loading="lazy" 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

2
docs/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/nx-core.md
View File

@ -195,4 +195,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 action.
<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>
<iframe loading="lazy" 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](/getting-started/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; fullscreen"></iframe>
<iframe loading="lazy" 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/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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.

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; fullscreen"></iframe>
<iframe loading="lazy" 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

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

@ -242,6 +242,7 @@ export function Community(props: CommunityProps) {
Get started with building your own plugin!
</p>
<iframe
loading="lazy"
width="560"
height="315"
title="YouTube video player"

22
nx-dev/nx-dev/public/documentation/generated/api-detox/executors/test.md
View File

@ -11,6 +11,14 @@ Options can be configured in `workspace.json` when defining the executor, or whe
## Options
### detoxConfiguration (_**required**_)
Alias(es): C
Type: `string`
Select a device configuration from your defined configurations, if not supplied, and there's only one configuration, detox will default to it
### appLaunchArgs
Type: `number`
@ -25,6 +33,12 @@ Type: `string`
Artifacts (logs, screenshots, etc) root directory.
### buildTarget
Type: `string`
Target which builds the application
### captureViewHierarchy
Type: `string`
@ -53,14 +67,6 @@ Type: `string`
Customize how long an action/expectation can take to complete before Detox starts querying the app why it is busy. By default, the app status will be printed if the action takes more than 10s to complete.
### detoxConfiguration
Alias(es): C
Type: `string`
Select a device configuration from your defined configurations, if not supplied, and there's only one configuration, detox will default to it
### deviceLaunchArgs
Type: `string`

2
nx-dev/nx-dev/public/documentation/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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](/cypress/overview) to run E2E tests.

2
nx-dev/nx-dev/public/documentation/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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.

14
nx-dev/nx-dev/public/documentation/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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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; fullscreen"></iframe>
<iframe loading="lazy" 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

BIN
nx-dev/nx-dev/public/documentation/shared/detox-logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 37 KiB

22
nx-dev/nx-dev/public/documentation/shared/detox-plugin.md
View File

@ -87,30 +87,22 @@ In addition, you need to follow [instructions at Detox](https://github.com/wix/D
### Testing Applications
- Run `nx e2e-ios frontend-e2e` to build the iOS app and execute e2e tests with Detox for iOS (Mac only)
- Run `nx e2e-android frontend-e2e` to build the Android app and execute e2e tests with Detox for Android
- Run `nx test-ios frontend-e2e` to build the iOS app and execute e2e tests with Detox for iOS (Mac only)
- Run `nx test-android frontend-e2e` to build the Android app and execute e2e tests with Detox for Android
You can also run below commands:
You can run below commands:
- `nx build-ios frontend-e2e`: build the iOS app (Mac only)
- `nx test-ios frontend-e2e`: run e2e tests on the built iOS app (Mac only)
- `nx build-android frontend-e2e`: build the Android app
- `nx test-android frontend-e2e`: run e2e tests on the built Android app
`e2e-ios` is a shorthand command for running `build-ios` and `test-ios` sequentailly.
`android-ios` is a shorthand command for running `build-android` and `test-android` sequentailly.
### Testing against Prod Build
You can run your e2e test against a production build:
- `nx e2e-ios frontend-e2e --prod` for iOS
- `nx e2e-android frontend-e2e --prod` for Android
- `nx build-ios frontend-e2e --prod`: build the iOS app using Release configuration
- `nx test-ios frontend-e2e --prod`: run e2e tests on the built iOS app with Release configuration (Mac only)
- `nx test-ios frontend-e2e --prod`: to build the iOS app and execute e2e tests with Detox for iOS with Release configuration (Mac only)
- `nx test-android frontend-e2e`: rto build the Android app and execute e2e tests with Detox for Android with release build type
- `nx build-ios frontend-e2e --prod`: build the iOS app using Release configuration (Mac only)
- `nx build-android frontend-e2e --prod`: build the Android app using release build type
- `nx test-android frontend-e2e`: run e2e tests on the built Android app with release build type
### Using .detoxrc.json
@ -125,8 +117,6 @@ For Android, in terminal, run `emulator -list-avds` to view a list of emulators
In additon, to override the device name specified in a configuration, you could use `--device-name` option: `nx test-ios <app-name-e2e> --device-name "iPhone 11"`. The `device-name` property provides you the ability to test an application run on specific device.
```bash
nx e2e-ios frontend-e2e --device-name "iPhone 11"
nx e2e-android frontend-e2e --device-name "Pixel_4a_API_30"
nx test-ios frontend-e2e --device-name "iPhone 11"
nx test-android frontend-e2e --device-name "Pixel_4a_API_30"
```

2
nx-dev/nx-dev/public/documentation/shared/getting-started/nx-and-angular.md
View File

@ -25,7 +25,7 @@ modern tools and libraries like [Jest](/jest/overview), [Cypress](/cypress/overv
### 10-min Video 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; fullscreen"></iframe>
<iframe loading="lazy" 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>
Check out the following to get started:

2
nx-dev/nx-dev/public/documentation/shared/getting-started/nx-and-react.md
View File

@ -25,7 +25,7 @@ frameworks like [Gatsby](/gatsby/overview), [Next.js](/guides/nextjs), Remix, an
### 10-min Video 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; fullscreen"></iframe>
<iframe loading="lazy" 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>
Check out the following to get started:

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

@ -6,7 +6,7 @@ The `@nrwl/js` package ships with corresponding generators and executors that be
> Note, you can also opt-out of TypeScript and use plain JavaScript by passing the `--js` flag to the generators.
<iframe width="560" height="315" src="https://www.youtube.com/embed/-OmQ-PaSY5M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/-OmQ-PaSY5M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
`@nrwl/js` is particularly useful if you want to

8
nx-dev/nx-dev/public/documentation/shared/guides/react-native.md
View File

@ -103,13 +103,13 @@ No CLI support yet. Run in the Xcode project. See: https://reactnative.dev/docs/
**Android:**
```sh
npx nx e2e-android mobile-e2e
npx nx test-android mobile-e2e
```
**iOS:** (Mac only)
```sh
npx nx e2e-ios mobile-e2e
npx nx test-ios mobile-e2e
```
When using React Native in Nx, you get the out-of-the-box support for TypeScript, Detox, and Jest. No need to configure anything: watch mode, source maps, and typings just work.
@ -244,8 +244,8 @@ Run `npx nx build shared-ui-layout` to build the library. It will generate the f
dist/libs/shared-ui-layout/
├── README.md
├── index.d.ts
├── lib
│ └── layout
├── lib/
│ └── layout/
│ └── layout.d.ts
├── package.json
├── shared-ui-layout.esm.css

2
nx-dev/nx-dev/public/documentation/shared/guides/storybook/migrate-webpack-final-react.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; fullscreen"></iframe>
<iframe loading="lazy" 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:

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

@ -12,7 +12,7 @@ npx add-nx-to-monorepo
Watch this 3-min video to see how the command works and what next steps are:
<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>
<iframe loading="lazy" 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:
@ -94,7 +94,7 @@ tools because it looks not just at the changed files but also at the nature of t
Run `nx dep-graph` to see a visualization of your workspace. `nx affected:dep-graph` shows what is affected by your
commit. `nx dep-graph --watch` watches your workspace for changes and updates the visualization.
<iframe width="560" height="315" src="https://www.youtube.com/embed/v87Y8NgAYLo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/v87Y8NgAYLo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="fullscreen"></iframe>
### GitHub integration
@ -215,12 +215,12 @@ If you want to disable the source code analysis, to make Nx match Lerna, add the
### Speeding Up Facebook React Monorepo with Nx
<iframe width="560" height="315" src="https://www.youtube.com/embed/XLP2RAOwfLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/XLP2RAOwfLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### 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" allow="fullscreen"></iframe>
<iframe loading="lazy" 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" allow="fullscreen"></iframe>
<iframe loading="lazy" 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
nx-dev/nx-dev/public/documentation/shared/migration/migration-cra.md
View File

@ -25,7 +25,7 @@ Start from [the commands mentioned in this article](https://nx.dev/migration/mig
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>
<iframe loading="lazy" 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

2
nx-dev/nx-dev/public/documentation/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/nx-core.md
View File

@ -195,4 +195,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 action.
<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>
<iframe loading="lazy" 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/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](/getting-started/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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/shared/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; fullscreen"></iframe>
<iframe loading="lazy" 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.

2
nx-dev/nx-dev/public/documentation/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; fullscreen"></iframe>
<iframe loading="lazy" 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

1
nx-dev/ui-home/src/lib/getting-started.tsx
View File

@ -201,6 +201,7 @@ function AngularPane(): ReactComponentElement<any> {
<div className="mt-12 sm:mt-16 lg:mt-0 lg:py-16 lg:col-start-2">
<div className="px-4 flex flex-col items-center justify-center lg:px-0 relative lg:h-full">
<iframe
loading="lazy"
className="max-w-screen-sm"
width="100%"
height="315"