 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



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

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


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


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

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