 Courses from Juri Strumpflohner

If you're in an Nx workspace and want to figure out which tasks take the longest, you can prefix the `NX_PROFILE` environment variable to any command and have a JSON file produce which you can directly import into Chrome Devtools under the performance tab.

Profile tasks in an Nx workspace with Chrome Devtools

By now we're accustomed to have a HMR experience when developing. When we change a file, the underlying dev server watches for the changes and automatically re-compiles. In a monorepo this is more tricky. Consider you have your dev server running on `APP` with a dependency tree that looks like `APP ->  LIB-A -> LIB-B -> LIB-C`. You'd have to watch all of these dependencies of `APP` s.t. if you change any of them it'd automatically recompile it. And it should work even as you change that dependency tree while developing.

Nx has [such command](https://nx.dev/recipes/running-tasks/workspace-watching) built-in:

```
nx watch --projects=app1 --includeDependentProjects -- echo \$NX_PROJECT_NAME
```

Let's have a look how this works in an NPM workspace monorepo.

Watch for Changes and Automatically Rebuild Projects in an NPM Workspace Monorepo

Automatically rebuild dependencies when they change within an Nx monorepo

In this video we're going to setup so-called "task pipelines" and "task caching" to enhance the DX of your existing monorepo. I'm using an NPM workspaces monorepo specifically, but it'd also apply to Yarn or PNPM workspaces in the very same way.

One of the issues you might encounter in an NPM workspace monorepo is that you have dependencies among projects. Like in this example I'm showing, there's a Vite based React app which depends on a `shared-ui` package. As such when you serve or build your React app, you need to make sure to have `shared-ui` built first. A task pipeline can automate that process.

Finally, we're going to also configure caching for our `build` tasks to speed up our monorepo. Task caching avoids re-running the same task if the underlying input (the `src` and other files) haven't changed.

Improve the DX of an NPM Workspaces Monorepo with Task Pipelines and Caching

Set up a task pipeline with Nx to properly build dependent projects (like a shared UI) before projects that use those dependents.

After setting up an initial monorepo using npm/yarn/pnpm workspaces and creating the first well-configured package, the next challenge is replicating this package creation process efficiently. While manually copying and modifying existing packages is an option, it is prone to errors and can be cumbersome.

Automating package creation is beneficial for streamlined onboarding of new developers and maintaining consistency across an organization, especially when there are specific setup requirements, dedicated lint rules, and coding style guides.

This guide explores leveraging Nx in an existing npm/yarn/pnpm workspace to automate new package creation. It details the steps to create a "tooling package" (or Nx Plugin) within the monorepo, and demonstrates using the Nx devkit to develop a generator for scaffolding new TypeScript packages seamlessly.

## Relevant Links

- [Extending Nx Documentation](https://nx.dev/extending-nx/intro/getting-started)


Automate Package Scaffolding in NPM/Yarn/PNPM Monorepo Workspaces

We'll explore how to  automate new package creation for your existing npm/yarn/pnpm using Nx. Learn to build an Nx Plugin for consistent, error-free package scaffolding. Perfect for easy dev onboarding and maintaining coding standards.

Bite-size video tutorials for badass web developers.

egghead

Watch for changes and automatically rebuild projects in an NPM workspace monorepo

Improve the DX of an NPM workspaces monorepo with task pipelines and caching

Nx helps architect, test, and build at any scale:
integrations with modern frameworks, distributed task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more.

In this course we'll be focusing on a package-based monorepo setup. 

Basically, we have a collection of packages, each with their own `package.json`. We'll then use pnpm workspaces to set up a monorepo that allows us to share these packages between each other locally. 

As our app grows we'll bring in Nx to get more advanced features such as build pipelines and caching.

So let's dive right in! If you have any questions don't hesitate to leave a comment. 

Introduction to Build High-Speed Monorepos with Nx and pnpm Workspaces

By default Nx stores the cache locally. We can gain additional benefits if we distribute our cache so a CI or our coworkers may benefit from it. 

The easiest way to set it up is to just run this command `pnpx nx connect-to-nx-cloud`

Distribute Your Cache with Nx Cloud

As your workspace grows you may need to start using more advanced optimizations. 

A great option that Nx provides are "affected commands". These use git to determine the changes between your current branch and the base branch, and **run a command on all projects that were affected by the changes**

Further Optimize Your Nx Workspace with Affected Commands

Not only do you get excellent speed and caching features, you also get a really cool graph from Nx that lets you see a visual representation of your workspace.

Use the Nx Graph to Visualize Your Workspace

Since dependencies on other local packages in the workspace are really just symlinks to those projects, we'll run into issues if we haven't ran their build script. 

We can make sure that this happens automatically by using Nx's task pipeline features. In our `nx.json` we can add a `dependsOn` field and set the commands that need to be ran within a project's dependencies. 

Use the Nx Task Pipeline to Run Commands Within Local Dependencies

Sometimes you might want to use a pattern you defined for a certain input in a different one somewhere else in your nx.json confg. 

You can do that by defining a `namedInputs` object field and setting your named input's name as the key, and the glob pattern as the value. 

Use Nx Named Inputs to Reuse Glob Patterns Across Inputs

By default, Nx considers all the files in the project as inputs to the cache, so any changes will invalidate it. But, that might not be the behavior we want. Especially if we are just doing something like updating a README.

To selectively ignore certain files, we can specify an inputs field where we are configuring the custom output. There, we can use a glob pattern to define the files you'd like to ignore. 

Configure Nx Cache to Ignore Changes to Specified Files

Nx has some default settings when restoring the cache. When you create a custom build output in your `tsconfig` for example, Nx won't automatically know about it. 

But, Nx gives you some really easy to use options for configuring these settings. On the project level you can tell Nx about your custom output target in the `package.json` 

You can also set a default for all the projects in the workspace in your `nx.json` config!

Configure the Nx Cache Output Location

It's a waste of computation resources to run your build scripts if there haven't been any changes. 

Nx's caching features save you time and resources. Get started by just running the `nx init` command and then setting the scripts you want to cache in the generated `nx.json`  

Configure Nx Caching

You can run multiple projects using the `run-many` command from Nx and setting a `--target` flag with the command you want to run.

For example `npx nx run-many --target=build`

Use Nx run-many to Run Commands in Multiple Projects

Nx provides you with a more convenient syntax to run commands within your workspace projects. 

Either `nx <target> <project>` or `nx run <project>:<target>` will work, but usually the first one is more convenient to use.

Run Commands with Nx

Even running all your scripts at once will get slow and tedious as your project grows. 

That's where Nx come in. [Nx will generally optimize the experience with caching and selectively running commands.](https://nx.dev/) 

Install Nx to Start Optimizing Your pnpm Workspace

While its convenient to be able to use filter commands to run scripts without having to cd into package/app folders, it's still a tedious task if you need to run commands in several projects at once.

It's actually __very__ easy to recursively run a script in all projects with pnpm using the `-r` flag. For example, `pnpm run -r build` will go through each project in the workspace and attempt to run the build command. 

Recursively Run Scripts in All pnpm Workspace Projects

Adding your local packages as dependencies in a pnpm worksapce mostly works the same way as adding external packages.

You can add them using the pnpm `add` command with a filter and the -`-workspace` flag set. For example, `pnpm add shared-ui --filter my-remix-app --workspace`

The workspace flag ensures that it'll search for the package locally. Just make sure that you've remembered to run the build script in your package!

Add a Local Package as a Dependency to an App Within a pnpm Workspace

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


Juri Strumpflohner

Search Results

Profile tasks in an Nx workspace with Chrome Devtools

Watch for Changes and Automatically Rebuild Projects in an NPM Workspace Monorepo

Improve the DX of an NPM Workspaces Monorepo with Task Pipelines and Caching

Automate Package Scaffolding in NPM/Yarn/PNPM Monorepo Workspaces

Watch for changes and automatically rebuild projects in an NPM workspace monorepo

Improve the DX of an NPM workspaces monorepo with task pipelines and caching

Automate Package Scaffolding in NPM/Yarn/PNPM Monorepo Workspaces

Introduction to Build High-Speed Monorepos with Nx and pnpm Workspaces

Distribute Your Cache with Nx Cloud

Further Optimize Your Nx Workspace with Affected Commands

Use the Nx Graph to Visualize Your Workspace

Use the Nx Task Pipeline to Run Commands Within Local Dependencies

Use Nx Named Inputs to Reuse Glob Patterns Across Inputs

Configure Nx Cache to Ignore Changes to Specified Files

Configure the Nx Cache Output Location

Configure Nx Caching

Use Nx run-many to Run Commands in Multiple Projects

Run Commands with Nx

Install Nx to Start Optimizing Your pnpm Workspace

Recursively Run Scripts in All pnpm Workspace Projects

Add a Local Package as a Dependency to an App Within a pnpm Workspace