From 4a3a8a9c905bd3ccaa1bb287dea8508714631cfd Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:07:52 -0400
Subject: [PATCH] docs(core): npm workspaces tutorial video (#26821)

Add video for npm workspaces tutorial
---
 docs/shared/tutorials/npm-workspaces.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/docs/shared/tutorials/npm-workspaces.md b/docs/shared/tutorials/npm-workspaces.md
index 5d2c6b7202233..347aa344e6ad9 100644
--- a/docs/shared/tutorials/npm-workspaces.md
+++ b/docs/shared/tutorials/npm-workspaces.md
@@ -22,8 +22,15 @@ Here's the source code of the final result for this tutorial.
 
 {% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/npm-workspaces" /%} -->
 
+{% youtube
+src="https://www.youtube.com/embed/ZA9K4iT3ANc"
+title="Nx NPM Workspaces Tutorial Walkthrough"
+/%}
+
 ## Starting Repository
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=51" /%}
+
 To get started, fork [the sample repository](https://github.com/nrwl/tuskydesign/fork) and clone it on your local machine:
 
 ```shell
@@ -69,6 +76,8 @@ Now that you have a basic understanding of the repository we're working with, le
 
 ## Smart Monorepo
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=170" /%}
+
 Nx offers many features, but at its core, it is a task runner. Out of the box, it can cache your tasks and ensure those tasks are run in the correct order. After the initial set up, you can incrementally add on other features that would be helpful in your organization.
 
 ### Add Nx
@@ -96,6 +105,8 @@ Second, the script asks a series of questions to help set up caching for you.
 
 ### Explore Your Workspace
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=250" /%}
+
 If you run `nx graph` as instructed, you'll see the dependencies between your projects.
 
 ```shell {% path="~/tuskydesigns" %}
@@ -109,6 +120,8 @@ Nx uses this graph to determine the order tasks are run and enforce module bound
 
 ### Caching Pre-configured
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=285" /%}
+
 Nx has been configured to run your `build`, `typecheck` and `lint` tasks. You can run a single task like this:
 
 ```shell {% path="~/tuskydesigns" %}
@@ -159,6 +172,8 @@ You can see the same caching behavior working when you run `npx nx lint` or `npx
 
 ### Use Task Pipelines
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=358" /%}
+
 You may be wondering why the caching message in the previous section mentioned 3 tasks when you only ran the `build` task from the terminal. When we said that `build` tasks must be run in order during the setup script, Nx created a simple task pipeline. You can see the configuration for it in the `nx.json` file:
 
 ```json {% fileName="nx.json" %}
@@ -200,6 +215,8 @@ Not only does the build complete successfully, but it finishes instantly and the
 
 ### Create a Task Pipeline
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=450" /%}
+
 You may have noticed in the `apps/demo/package.json` file, there is a `prebuild` script that runs `typecheck` before the `build` script in order to catch any type errors. Let's set up this same behavior in the Nx task pipeline as well.
 
 ```json {% fileName="nx.json" highlightLines=[5] %}
@@ -226,6 +243,8 @@ The `dependsOn` line makes Nx run the `typecheck` task for the current project a
 
 ### Use Nx Plugins to Enhance Vite Tasks with Caching
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=507" /%}
+
 You may remember that we defined the `outputs` property in `nx.json` when we were answering questions in the `nx init` script. The value is currently hard-coded so that if you change the output path in your `vite.config.ts`, you have to remember to also change the `outputs` array in the `build` task configuration. This is where plugins can help. They directly infer information from the actual tooling configuration files (`vite.config.ts` in this case).
 
 Nx plugins can:
@@ -312,6 +331,8 @@ npx nx run @tuskdesign/demo:build --graph
 
 ## Manage Releases
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=713" /%}
+
 If you decide to publish the `forms` or `buttons` packages on NPM, Nx can also help you [manage the release process](/features/manage-releases). Release management involves updating the version of your package, populating a changelog, and publishing the new version to the NPM registry.
 
 First you'll need to define which projects Nx should manage releases for by setting the `release.projects` property in `nx.json`:
@@ -346,6 +367,8 @@ After this first release, you can remove the `--first-release` flag and just run
 Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can fork the [sample repository with Nx already added](https://github.com/nrwl/nx-recipes/tree/main/npm-workspaces).
 {% /callout %}
 
+{% video-link link="https://youtu.be/ZA9K4iT3ANc?t=821" /%}
+
 So far in this tutorial you've seen how Nx improves 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).