From 199ffd1d54e0710b492fe48d4e84bdef61b29125 Mon Sep 17 00:00:00 2001 From: Isaac Mann Date: Mon, 22 Jul 2024 11:17:21 -0400 Subject: [PATCH] docs(core): angular monorepo tutorial video (#26819) Add video to Angular monorepo tutorial --- docs/shared/tutorials/angular-monorepo.md | 36 ++++++++++++++--------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/docs/shared/tutorials/angular-monorepo.md b/docs/shared/tutorials/angular-monorepo.md index 11a71904b0fba..3d31f77da4335 100644 --- a/docs/shared/tutorials/angular-monorepo.md +++ b/docs/shared/tutorials/angular-monorepo.md @@ -40,14 +40,14 @@ Here's the source code of the final result for this tutorial. - +{% youtube +src="https://www.youtube.com/embed/ZzTP4bVJEnI" +title="Nx Angular Monorepo Tutorial Walkthrough" +/%} ## Creating a new Angular Monorepo - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=90" /%} Create a new Angular monorepo with the following command: @@ -112,7 +112,7 @@ The [`nx.json` file](/reference/nx-json) contains configuration settings for Nx ## Serving the App - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=138" /%} To serve your new Angular application, just run: @@ -128,6 +128,8 @@ Nx uses the following syntax to run tasks: ### Manually Defined Tasks +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=160" /%} + The project tasks are defined in the `project.json` file. ```json {% fileName="apps/angular-store/project.json"} @@ -183,7 +185,7 @@ Learn more about how to [run tasks with Nx](/features/run-tasks). We'll [revisit ## Adding Another Application - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=182" /%} Nx plugins usually provide [generators](/features/generate-code) that allow you to easily scaffold code, configuration or entire projects. To see what capabilities the `@nx/angular` plugin provides, run the following command and inspect the output: @@ -275,7 +277,7 @@ npx nx g @nx/angular:app inventory --directory=apps/inventory ## Sharing Code with Local Libraries - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=232" /%} When you develop your Angular application, usually all your logic sits in the `app` folder. Ideally separated by various folder names which represent your "domains". As your app grows, however, the app becomes more and more monolithic and the code is unable to be shared with other applications. @@ -310,7 +312,7 @@ Nx allows you to separate this logic into "local libraries". The main benefits i ### Creating Local Libraries - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=254" /%} Let's assume our domain areas include `products`, `orders` and some more generic design system components, called `ui`. We can generate a new library for each of these areas using the Angular library generator: @@ -367,7 +369,7 @@ Each of these libraries ### Importing Libraries into the Angular Applications - + All libraries that we generate automatically have aliases created in the root-level `tsconfig.base.json`. @@ -491,7 +493,7 @@ export class AppComponent { ## Visualizing your Project Structure - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=364" /%} Nx automatically detects the dependencies between the various parts of your workspace and builds a [project graph](/features/explore-graph). This graph is used by Nx to perform various optimizations such as determining the correct order of execution when running tasks like `npx nx build`, identifying [affected projects](/features/run-tasks#run-tasks-on-projects-affected-by-a-pr) and more. Interestingly you can also visualize it. @@ -596,7 +598,7 @@ Exercise for you: change the codebase such that `shared-ui` is used by `orders` ## Testing and Linting - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=410" /%} Our current setup not only has targets for serving and building the Angular application, but also has targets for unit testing, e2e testing and linting. The `test` and `lint` targets are defined in the application `project.json` file, while the `e2e` target is [inferred from the `apps/angular-store-e2e/cypress.config.ts` file](#inferred-tasks). We can use the same syntax as before to run these tasks: @@ -608,6 +610,8 @@ npx nx e2e angular-store-e2e # runs e2e tests for the angular-store ### Inferred Tasks +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=424" /%} + Nx identifies available tasks for your project from [tooling configuration files](/concepts/inferred-tasks), `package.json` scripts and the targets defined in `project.json`. All tasks from the `angular-store` project are defined in its `project.json` file, but the companion `angular-store-e2e` project has its tasks inferred from configuration files. To view the tasks that Nx has detected, look in the [Nx Console](/getting-started/editor-setup), [Project Details View](/recipes/nx-console/console-project-details) or run: ```shell @@ -899,6 +903,8 @@ Not all tasks might be cacheable though. You can [configure which tasks are cach ### Testing Affected Projects +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=551" /%} + Commit your changes to git. ```shell @@ -1021,7 +1027,7 @@ npx nx graph --affected ## Building the Apps for Deployment - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=608" /%} If you're ready and want to ship your applications, you can build them using @@ -1070,7 +1076,7 @@ npx nx affected -t deploy ## Imposing Constraints with Module Boundary Rules - +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=663" /%} Once you modularize your codebase you want to make sure that the libs are not coupled to each other in an uncontrolled way. Here are some examples of how we might want to guard our small demo workspace: @@ -1234,6 +1240,8 @@ Learn more about how to [enforce module boundaries](/features/enforce-module-bou ## Set Up CI for Your Angular Monorepo +{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=791" /%} + This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution. - Nx reduces wasted time in CI with the [`affected` command](/ci/features/affected).