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
- Powerpack 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:
1import { foo } from '@my-workspace/my-project;
2With 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:
1{
2 "name": "@my-workspace/source",
3 "version": "0.0.0",
4 "scripts": {},
5 "dependencies": {},
6 "devDependencies": {},
7 "workspaces": ["libs/**", "packages/**"]
8}
9This 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:
1{
2 "extends": "./tsconfig.base.json",
3 "compileOnSave": false,
4 "files": [],
5 "references": []
6}
7A 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:
1{
2 "extends": "./tsconfig.base.json",
3 "compileOnSave": false,
4 "files": [],
5 "references": [
6 {
7 "path": "./packages/my-package"
8 }
9 ]
10}
11Nx 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.
Powerpack Updates
Nx Powerpack is a suite of paid extensions for the Nx CLI, that enables some features like allowing for third-party storage services to be used for your remoted and shared caching, specifying specific developers as owners of specific projects in your repo, and running language-agnostic conformance rules:
Recently, we've added support 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:
We've also added the capability to allow folks to authenticate their Powerpack license via Nx Cloud (rather than requiring that the license be committed to the repository). This should enable oss library authors use Powerpack - without exposing their private license via their repo.
We are offering free Nx Powerpack licenses to all open source libraries. We also offer free licenses to smaller businesses. If you are interested, you may request a license now using Nx Cloud.
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!