Skip to content

Commit

Permalink
docs(core): angular monorepo tutorial video (#26819)
Browse files Browse the repository at this point in the history 
Add video to Angular monorepo tutorial
  • Loading branch information
@isaacplmann
isaacplmann authored Jul 22, 2024
1 parent 5217c33 commit 199ffd1
Showing 1 changed file with 22 additions and 14 deletions.
36 changes: 22 additions & 14 deletions docs/shared/tutorials/angular-monorepo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,14 @@ Here's the source code of the final result for this tutorial.

<!-- {% stackblitz-button url="github.com/nrwl/nx-recipes/tree/main/angular-standalone?file=README.md" /%} -->

<!-- {% youtube
src="https://www.youtube.com/embed/OQ-Zc5tcxJE"
title="Tutorial: Standalone Angular Application"
/%} -->
{% 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/OQ-Zc5tcxJE?t=64" /%} -->
{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=90" /%}

Create a new Angular monorepo with the following command:

Expand Down Expand Up @@ -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/OQ-Zc5tcxJE?t=207" /%} -->
{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=138" /%}

To serve your new Angular application, just run:

Expand All @@ -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"}
Expand Down Expand Up @@ -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/OQ-Zc5tcxJE?t=706" /%} -->
{% 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:

Expand Down Expand Up @@ -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/OQ-Zc5tcxJE?t=986" /%} -->
{% 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.

Expand Down Expand Up @@ -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/OQ-Zc5tcxJE?t=1041" /%} -->
{% 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:

Expand Down Expand Up @@ -367,7 +369,7 @@ Each of these libraries

### Importing Libraries into the Angular Applications

<!-- {% video-link link="https://youtu.be/OQ-Zc5tcxJE?t=1245" /%} -->
<!-- {% video-link link="https://youtu.be/ZzTP4bVJEnI?t=1245" /%} -->

All libraries that we generate automatically have aliases created in the root-level `tsconfig.base.json`.

Expand Down Expand Up @@ -491,7 +493,7 @@ export class AppComponent {

## Visualizing your Project Structure

<!-- {% video-link link="https://youtu.be/OQ-Zc5tcxJE?t=1416" /%} -->
{% 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.

Expand Down Expand Up @@ -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/OQ-Zc5tcxJE?t=410" /%} -->
{% 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:

Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -1021,7 +1027,7 @@ npx nx graph --affected

## Building the Apps for Deployment

<!-- {% video-link link="https://youtu.be/OQ-Zc5tcxJE?t=856" /%} -->
{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=608" /%}

If you're ready and want to ship your applications, you can build them using

Expand Down Expand Up @@ -1070,7 +1076,7 @@ npx nx affected -t deploy

## Imposing Constraints with Module Boundary Rules

<!-- {% video-link link="https://youtu.be/OQ-Zc5tcxJE?t=1456" /%} -->
{% 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:

Expand Down Expand Up @@ -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).
Expand Down

0 comments on commit 199ffd1

Please sign in to comment.