Skip to content

Commit

Permalink
docs(core): npm workspaces tutorial video (#26821)
Browse files Browse the repository at this point in the history
Add video for npm workspaces tutorial
  • Loading branch information
isaacplmann authored Jul 25, 2024
1 parent 529fa42 commit 4a3a8a9
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions docs/shared/tutorials/npm-workspaces.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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" %}
Expand All @@ -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" %}
Expand Down Expand Up @@ -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" %}
Expand Down Expand Up @@ -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] %}
Expand All @@ -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:
Expand Down Expand Up @@ -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`:
Expand Down Expand Up @@ -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).
Expand Down

0 comments on commit 4a3a8a9

Please sign in to comment.