 Courses from Juri Strumpflohner

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

You can create private libraries in your monorepo that you can share between your other packages and applications. 

To do this all you need to do is create a new folder containing a package.json in your packages directory. You can then use pnpm filter commands to add external libraries to your package without ever having to cd into it! 

Then just make sure to create an entry point and set the `main` field in your package.json to where your code will compile when built. 

Create a Shared Library in a pnpm Workspace


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.


Create AI Prompts Based on a Directory of Files


With Cursor's "Composer" feature, you can select and entire directory and make changes to every file. This video walks through the process of selecting a folder and refactoring all the files from JavaScript to TypeScript. It also demonstrates other tips around generating terminal commands and customizing your main Cursor "Rules for AI".


Run an AI Refactor on Every File in a Directory with Cursor


This lesson breaks down the concept of asynchronous iterators and generators in JavaScript. Using the Node.js glob function as a practical example, you'll learn how Array.fromAsync facilitates the creation of arrays from asynchronous iterables and how generators can improve performance in file processing tasks.

Efficient File Processing in Node.js with Async Generators and Array.fromAsync

Learn the concept of asynchronous iterators and generators in JavaScript and Node.js Array.fromAsync


With the introduction of Svelte 5, the Svelte team has created a CLI, `sv`, that unifies all the tasks that previously spread across a handful of CLIS (create, add plugins, and migrate).

This lesson will create a Svelte project using the new `sv` CLI and build a counter component to showcase the new `$state`, `$derived`, and `$effect` runes that ship with the new version.



Get Started with Svelte 5 using the sv CLI

You'll create a SvelteKit project using the sv CLI and build a counter component showcasing Svelte $state, $derived, and $effect runes.



pnpm ships with a streamlined, easy way of managing Node.js versions for youself and your team. This video demonstrates why pnpm uses a specific version of Node.js, how to configure it globally, and how to set up your project so that anyone who is running your project will automatically use the same version of Node.js even if that version of Node.js is not installed.


use pnpm as a Node.js version manager

How you build with Angular has changed quite a lot over the years.

For example, the `inject` function was introduced in version 14 but you might still be familiar with Angular's constructor injection.

Similarly, structural directives like `ngif` or `ngfor` have been replaced with `@if` and `@for` blocks since version 17 and beyond.

These are patterns that need to be adjusted if you want to stay up-to-date with the latest Angular has to provide.

Luckily, Angular gives you great tools in the form of a migration CLI for supporting your migration efforts as you incrementally update your App from older version features and patterns. 

When you're done with this course you'll know how to target specific features, folders, and files to migrate to the latest Angular version.

You'll learn how to 'migrate':
- Structural directives with control flow syntax
- Constructor dependency inject to inject function
- Make components standalone
- Lazy load routes
- Input/Output decorators to signal-based API


Angular Migrations in Practice

Migrate old Angular patterns for version 18 and beyond

When we import assets in React components outside of the `public` folder that Nitro reads for assets by default when running the development server we need to tell Nitro how to find them with the `devProxy` configuration option.

```typescript
export default defineNitroConfig({
  renderer: './renderer.ts',
  devProxy: {
    '/app/assets': 'http://localhost:5173/app/assets'
  }
})
```

This is ultimately inadequate in scenarios where you want to import assets arbitrarily and have them "just work" but works in a pinch.



Use devProxy in Nitro Config to Serve Static Imported Assets in Dev Mode via Vite

Learn how to use devProxy in Nitro Config with Vite to serve static assets in React components in dev mode.

Start with a basic Vite React TypeScript app and enhance it for production use by integrating Nitro as the server. 

This requires a custom Vite plugin for nitro as well as a custom renderer and manually creating Nitro config.

The other way to approach this would be to add Vite to a Nitro app instead. Same basic result.

The [Nitro config reference](https://nitro.unjs.io/config) is a great read of you'd like to explore more options.


Configure a Vite React TypeScript Application on a Basic Nitro Server

Configure a Vite React TypeScript app by integrating Nitro for production, using custom plugins, renderers, and configs.

Quick Get Started style introduction to Vite using `pnpm create vite` with the React TypeScript template.

See [more in the official docs](https://vite.dev/guide/).

Create a Vite App with the React TypeScript Preset

Quick guide to start a Vite app using React TypeScript template with pnpm.

Over the years, your application have grown huge. Sometimes, really HUGE.

Many developers have contributed to the codebase. One day they pushed one coding style, a different one another day. Sometimes even different patterns and solutions for similar problems.

You want to keep your codebase consistent. In the Angular ecosystem, there were well established patterns for doing things the right way ™️. But the old solutions are being challenged by signal-based approach.

Eventually, you ask yourself the key question: **Should you integrate with the NEW solutions or stick to the battle-tested ones, but already considered LEGACY**?

That's a very good question indeed. Don't rush with architectural decisions 🤓.

## First, think of what problems you want to solve by introducing the change.

Do you have 1k LoC Angular components? Maybe even 2k? Do you and your team enjoy working with these? 😏

Where does the **domain logic and state management code** belong to - do you have a clear guidance on which code should be put where? Have you spot that different devs implement similar features in totally different ways?

Do you keep on asking the same questions over and over again: **whether this certain piece of code** should be **imperative** (plain old object properties and variables) or **reactive** (streams)? It'd be nice to keep all thinga reactive, but more often than not, it introduces complexity.

## Second, think of long-term consequences.

You are going to have more than one way to **manage the state**. But is that really an issue? If your codebase is modular, separate modules should not depend on each other in any way. Inner abstractions of one should be invisible to the other, etc.

You are going to introduce a **new tool**. On one hand, you need to learn it, and so does your team. But on the other hand, it's a breathe of fresh air. And it's useful to question the way you've been doing things so far. Maybe there's a more effective way?

You are going to embrace signal-based APIs. And that means taking taking advantage of Zoneless Angular. This means using all modern Angular APIs. And you know that signals are the future. Why would you want to stick to the **less performant, less type-safe, less flexible and, objectively, less effective solutions**?

## Finally, plan your INCREMENTAL integration.

INCREMENTAL is the absolute keyword here. You don't want to tell your PM you need to stop delivering features because of a refactor.

Actually, there's no need for a "refactor". Just pick the first new feature to be implemented. Or pick the one that needs to be extended.

NGRX Signal Store allows you to create both very simple & small stores, as well as bigger ones. **Composition** is the key here.

**Start simple**.

Create a `withState` section with the signals that hold the state. That's already reactive. And relatively simple.

```ts
const initialState: CartState = {
  items: ...,
  rebate: ...,
}

export const CartStore = signalStore(
  withState(initialState)
);
```

Create a `withMethods` section to provide ways to change the state:

```ts
export const CartStore = signalStore(
  ...
  withMethods((store) => ({
    addItem(item: ShoppingItem): void {
      patchState(store, (state) => ({ items: [ ...state.items, item ] }));
    },
    ...
);
```

Create a `withComputed` section to provide all derived computations:

```ts
export const CartStore = signalStore(
  ...
  withComputed(({ items }) => ({
    totalPrice: computed(() => items().reduce(...))
    ...
);
```

**Start simple**.

Now you can (literally) **`inject` this code into your existing solution**. All you need is to inject your brand new NGRX Signal Store implementation into a component, or a service:

```ts
@Injectable()
class ExistingBigService {
  cartStore = inject(CartStore)
  //...  
}
```

and that's it! What's beatiful is that NGRX Signal Store should remain an implementation details (of a component, service, etc). It **shouldn't leak outside to the entire application unintentionally**. Small NGRX Signal Stores help us to **keep logic more modular**.

Don't hesitate - give NGRX Signal Store a try! Start with the [_**Scalable Signals Angular Architecture with NGRX Signal Store**_](https://egghead.io/courses/scalable-signals-angular-architecture-with-ngrx-signal-store-a33abd39) course now!

Integrating NGRX Signal Store with an existing Angular application

Integrate NGRX Signal Store into your Angular app incrementally for modular, reactive state management. Improve consistency and performance with modern APIs.

Juri Strumpflohner

Search Results

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

Create a Shared Library in a pnpm Workspace