Nx Update: 20.3! | Nx Blog

It's been a few months now since our last major update with Nx 20, let's check in with the latest updates since 20 came out, as we've now dropped 3 minor releases since them. Here's a rundown of everything new:

Typescript Project References And Workspaces Support
Rspack updates
New Nx Console Feature: CI Pipeline Status in Your IDE!
Nx Cloud Enhancements
Angular 19 Support
Core Performance Improvements
Self-hosted Cache Updates
RFC for Infinite Tasks

You can also catch most of these updates direct from the team from our livestream:

Typescript Project References And Workspaces Support

Our new support for Typescript project references has been launched!

Prior this enhancement, by default, Nx workspaces were treated as a single unit from the perspective of your package manager, and at the Typescript level, we used path aliases (using the path compiler option in your tsconfig.base.json file) in order for your different projects to know where to import from in import statements like:

import { foo } from '@my-workspace/my-project;

With the new enhancement, when you run our generators, we'll instead manage creating each project as a new project from the perspective of your package manager (whether that's npm, yarn, pnpm, or bun), and setting up Typescript to know about this project as a "project reference" using the references compiler option in a tsconfig.json file at the root of your workspace.

You can see this now by creating a new nx workspace with:

npx create-nx-workspace@latest my-workspace --preset=ts

After creation, you'll notice that there's now a workspaces field set up in your root package.json:

{
  "name": "@my-workspace/source",
  "version": "0.0.0",
  "scripts": {},
  "dependencies": {},
  "devDependencies": {},
  "workspaces": ["libs/**", "packages/**"]
}

This is how you inform your package manager as to where to find packages in your workspace. Note that because we used npx to create this workspace, Nx set up the workspace for Npm's workspaces feature.

If we had set up this workspace to use Pnpm as our package manager (which you can do either by using pnpx:

pnpx create-nx-workspace@latest

or providing a pm option:

npx create-nx-workspace@latest --pm=pnpm

Then a pnpm-workspace.yaml file would have been created to support pnpm's workspaces feature. Similar support and considerations are given for Yarn workspaces.

You should now also see in your tsconfig.json file:

{
  "extends": "./tsconfig.base.json",
  "compileOnSave": false,
  "files": [],
  "references": []
}

A new references field here that is currently empty. If we use an nx generator to create a new lib:

nx g lib packages/my-package

We'll see that this gets updated now to:

{
  "extends": "./tsconfig.base.json",
  "compileOnSave": false,
  "files": [],
  "references": [
    {
      "path": "./packages/my-package"
    }
  ]
}

Nx will continue to update this file as you add packages.

Note that dependending on which package manager you use, you may need to run an install from your package manager (for example npm install) after adding a new package for your package manager to set things up correctly!

This new approach is currently what you'll get using the ts preset by default:

npx create-nx-workspaces@latest --preset=ts

You can opt-in to the experimental support now for our react, vue, and node presets using the --workspaces flag:

npx create-nx-workspace@latest --preset=react --workspaces

And we will continue to add this as the default to all our official presets soon. You can follow along with the discussion on the RFC here for more!

Rspack updates

Our @nx/rspack plugin has moved from labs into our main repo now, and we now have a dedicated plugin for Rsbuild (a vite-like build tool with streamlined config built on top of Rspack) as well.

With the latest improvements, our Rspack plugin is now at feature parity with our @nx/webpack plugin, which should make it easier for teams to migrate from Webpack to Rspack now and take advantage of the significant performance gains.

Our new Rsbuild plugin will bring support for React and Vue applications, and we have measured a massive performance increase here over webpack. Running the command:

nx g @nx/rsbuild:configuration

Will create the necessary configuration for an existing targetted React or Vue application to work with Rsbuild.

When using the @nx/react and @nx/vue application generators, we'll also now include rsbuild as an option for the bundler to use when setting up the application.

For more on our Rspack support, be sure to check out previous livestreams with Colum, including this one for setting up Module Federation with Rspack:

And Colum's package for setting up Angular with Rspack:

New Nx Console Feature: CI Pipeline Status in Your IDE!

We launched a new feature for Nx Console, our IDE plugin that works for Visual Studio Code and JetBrains IDEs (like IntelliJ and WebStorm)!

This feature allows you to have access to the status of your pending pipelines - including the ability to get notifications when one of your Nx Cloud pipelines completes - right from your IDE!

You have access to this feature today if you're using the VsCode version of the plugin, and we plan to bring this to the JetBrains version soon.

Nx Cloud Enhancements

Available now on Nx Cloud - you can see the affected project graph for each individual PR, using the new composite graph view! Check out this video for more details:

We also now have support for Assignment Rules. Assignment Rules allow you to specify specific machines for various tasks when running your Nx Cloud pipelines with a fleet of different machines. For example, if you have a very computationally intensive build task, you can specify that this task should be picked up only by your largest sized machine.

Angular 19 Support

Angular 19 is here, and Nx now supports migrating your Angular 18 projects to Angular 19 via nx migrate.

nx migrate latest --interactive

By using the --interactive flag (like above) you can opt into migrating specific dependencies (for example if you want to upgrade to the latest version of Nx, but not Angular just yet).

Keep in mind as well that as Angular 16 has now fallen out of Long-Term Support (LTS), Nx will no longer support Angular 16 going forward.

Core Performance Improvements

Over the past many months, we've addressed most of the glaring issues regarding the new 'inferred tasks plugins' that were first introduced in Nx v18. Now, in the last recent months, we've started to address some of the more fine-grained issues that we has seen in supporting this new functionality - including performance.

One place we've improved performance is in the loading of a local custom plugin, written in Typescript. Prior to this enhancement, loading of these plugins was fairly costly in terms of time and memory, and we've now reduced both of those costs dramatically. If you had been using a custom inferred task plugin, you should see a noticeable performance improvement now.

We've also introduced spinners into the terminal ui for instances where a task is delayed due to Nx calculating your workspace's graph. This will give some visual feedback to the user whenever Nx is still calculating your graph - whereas prior to this, it might seem as if nothing is happening.

Self-hosted Cache Updates

Update: Self-hosted cache was previously part of Powerpack. But no more, it is no free for everyone to use.

We just improved support for our self-hosted caching packages by adding adapters for Azure and Google Cloud Storage as supported storage providers (in addition to S3 or simply using a shared file system).

We've also added support for S3 compatible providers such as:

RFC for Infinite Tasks

Last up, we have an RFC for the concept of "Infinite Tasks" on GitHub now. This is a new feature that we'll be adding soon to support non-discrete tasks in terms of the task dependencies. It should come in handy for use-cases like:

starting a local backend application whenever you start a frontend web server that depends on that backend running (while developing)
starting a local database whenever you start a backend application that depends on that database istance (while developing)
making sure you publish to a local registry (like verdaccio) when you are testing a package before publishing to npm

We're very excited to implement this soon and greatly appreciate feedback as we know this is something that many of our users have been asking about!

推荐订阅源

Nx Blog