|
| 1 | +--- |
| 2 | +title: 'Nx Update: 20.3!' |
| 3 | +slug: nx-update-20-3 |
| 4 | +authors: [Zack DeRose] |
| 5 | +tags: [nx] |
| 6 | +cover_image: /blog/images/2025-01-06/nx-20-3.png |
| 7 | +--- |
| 8 | + |
| 9 | +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: |
| 10 | + |
| 11 | +- [Typescript Project References And Workspaces Support](#typescript-project-references-and-workspaces-support) |
| 12 | +- [Rspack updates](#rspack-updates) |
| 13 | +- [New Nx Console Feature: CI Pipeline Status in Your IDE!](#new-nx-console-feature-ci-pipeline-status-in-your-ide) |
| 14 | +- [Nx Cloud Enhancements](#nx-cloud-enhancements) |
| 15 | +- [Angular 19 Support](#angular-19-support) |
| 16 | +- [Core Performance Improvements](#core-performance-improvements) |
| 17 | +- [Powerpack Updates](#powerpack-updates) |
| 18 | +- [RFC for Infinite Tasks](#rfc-for-infinite-tasks) |
| 19 | + |
| 20 | +You can also catch most of these updates direct from the team from our livestream: |
| 21 | + |
| 22 | +{% youtube |
| 23 | +src="https://www.youtube.com/embed/GRiXj4tmqKA" |
| 24 | +title="Nx Live: Nx 20.3" /%} |
| 25 | + |
| 26 | +## Typescript Project References And Workspaces Support |
| 27 | + |
| 28 | +Our new support for Typescript project references has been launched! |
| 29 | + |
| 30 | +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: |
| 31 | + |
| 32 | +```typescript |
| 33 | +import { foo } from '@my-workspace/my-project; |
| 34 | +``` |
| 35 | + |
| 36 | +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"](https://www.typescriptlang.org/docs/handbook/project-references.html) using the `references` compiler option in a `tsconfig.json` file at the root of your workspace. |
| 37 | + |
| 38 | +You can see this now by creating a new nx workspace with: |
| 39 | + |
| 40 | +```shell |
| 41 | +npx create-nx-workspace@latest my-workspace --preset=ts |
| 42 | +``` |
| 43 | + |
| 44 | +After creation, you'll notice that there's now a `workspaces` field set up in your root `package.json`: |
| 45 | + |
| 46 | +```json |
| 47 | +{ |
| 48 | + "name": "@my-workspace/source", |
| 49 | + "version": "0.0.0", |
| 50 | + "scripts": {}, |
| 51 | + "dependencies": {}, |
| 52 | + "devDependencies": {}, |
| 53 | + "workspaces": ["libs/**", "packages/**"] |
| 54 | +} |
| 55 | +``` |
| 56 | + |
| 57 | +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. |
| 58 | + |
| 59 | +If we had set up this workspace to use Pnpm as our package manager (which you can do either by using pnpx: |
| 60 | + |
| 61 | +```shell |
| 62 | +pnpx create-nx-workspace@latest |
| 63 | +``` |
| 64 | + |
| 65 | +or providing a `pm` option: |
| 66 | + |
| 67 | +```shell |
| 68 | +npx create-nx-workspace@latest --pm=pnpm |
| 69 | +``` |
| 70 | + |
| 71 | +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](https://yarnpkg.com/features/workspaces). |
| 72 | + |
| 73 | +You should now also see in your `tsconfig.json` file: |
| 74 | + |
| 75 | +```json |
| 76 | +{ |
| 77 | + "extends": "./tsconfig.base.json", |
| 78 | + "compileOnSave": false, |
| 79 | + "files": [], |
| 80 | + "references": [] |
| 81 | +} |
| 82 | +``` |
| 83 | + |
| 84 | +A new `references` field here that is currently empty. If we use an nx generator to create a new lib: |
| 85 | + |
| 86 | +```shell |
| 87 | +nx g lib packages/my-package |
| 88 | +``` |
| 89 | + |
| 90 | +We'll see that this gets updated now to: |
| 91 | + |
| 92 | +```json |
| 93 | +{ |
| 94 | + "extends": "./tsconfig.base.json", |
| 95 | + "compileOnSave": false, |
| 96 | + "files": [], |
| 97 | + "references": [ |
| 98 | + { |
| 99 | + "path": "./packages/my-package" |
| 100 | + } |
| 101 | + ] |
| 102 | +} |
| 103 | +``` |
| 104 | + |
| 105 | +Nx will continue to update this file as you add packages. |
| 106 | + |
| 107 | +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! |
| 108 | + |
| 109 | +This new approach is currently what you'll get using the `ts` preset by default: |
| 110 | + |
| 111 | +```shell |
| 112 | +npx create-nx-workspaces@latest --preset=ts |
| 113 | +``` |
| 114 | + |
| 115 | +You can opt-in to the experimental support now for our react, vue, and node presets using the `--workspaces` flag: |
| 116 | + |
| 117 | +```shell |
| 118 | +npx create-nx-workspace@latest --preset=react --workspaces |
| 119 | +``` |
| 120 | + |
| 121 | +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](https://github.com/nrwl/nx/discussions/29099) for more! |
| 122 | + |
| 123 | +## Rspack updates |
| 124 | + |
| 125 | +Our [`@nx/rspack`](/nx-api/rspack) plugin has moved from labs into our main repo now, and we now have [a dedicated plugin](/nx-api/rsbuild) for [Rsbuild](https://rsbuild.dev/) (a vite-like build tool with streamlined config built on top of Rspack) as well. |
| 126 | + |
| 127 | +With the latest improvements, our Rspack plugin is now at feature parity with our [`@nx/webpack`](/nx-api/webpack) plugin, which should make it easier for teams to migrate from Webpack to Rspack now and take advantage of the significant performance gains. |
| 128 | + |
| 129 | +Our new [Rsbuild plugin](/nx-api/rsbuild) will bring support for React and Vue applications, and we have measured a massive performance increase here over webpack. Running the command: |
| 130 | + |
| 131 | +```shell |
| 132 | +nx g @nx/rsbuild:configuration |
| 133 | +``` |
| 134 | + |
| 135 | +Will create the necessary configuration for an existing targetted React or Vue application to work with Rsbuild. |
| 136 | + |
| 137 | +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. |
| 138 | + |
| 139 | +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: |
| 140 | + |
| 141 | +{% youtube |
| 142 | +src="https://www.youtube.com/embed/_c4zjYm0pYE" |
| 143 | +title="Nx Live: Module Federation w/ Rspack" /%} |
| 144 | + |
| 145 | +And Colum's package for setting up Angular with Rspack: |
| 146 | + |
| 147 | +{% youtube |
| 148 | +src="https://www.youtube.com/embed/raDY8RzdFI0" |
| 149 | +title="Nx Live: Rspack for Angular Projects" /%} |
| 150 | + |
| 151 | +## New Nx Console Feature: CI Pipeline Status in Your IDE! |
| 152 | + |
| 153 | +We launched a [new feature](/blog/nx-cloud-pipelines-come-to-nx-console) for [Nx Console](/getting-started/editor-setup#download), our IDE plugin that works for Visual Studio Code and JetBrains IDEs (like IntelliJ and WebStorm)! |
| 154 | + |
| 155 | +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! |
| 156 | + |
| 157 | +{% video-player src="/documentation/blog/media/nxconsole-ci-completion.mp4" alt="Nx Console CI Completion" /%} |
| 158 | + |
| 159 | +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. |
| 160 | + |
| 161 | +## Nx Cloud Enhancements |
| 162 | + |
| 163 | +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: |
| 164 | + |
| 165 | +{% youtube |
| 166 | +src="https://www.youtube.com/embed/TS-Fp2iSlVM" |
| 167 | +title="At-A-Glance Affected Repo Architecture On Every Pull Request! Now on Nx Cloud." /%} |
| 168 | + |
| 169 | +We also now have support for [Assignment Rules](/ci/reference/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. |
| 170 | + |
| 171 | +## Angular 19 Support |
| 172 | + |
| 173 | +Angular 19 is here, and Nx now supports migrating your Angular 18 projects to Angular 19 via [`nx migrate`](/features/automate-updating-dependencies). |
| 174 | + |
| 175 | +```shell |
| 176 | +nx migrate latest --interactive |
| 177 | +``` |
| 178 | + |
| 179 | +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). |
| 180 | + |
| 181 | +Keep in mind as well that as Angular 16 has now [fallen out of Long-Term Support (LTS)](https://angular.dev/reference/releases#actively-supported-versions), Nx will no longer support Angular 16 going forward. |
| 182 | + |
| 183 | +## Core Performance Improvements |
| 184 | + |
| 185 | +Over the past many months, we've addressed most of the glaring issues regarding the new ['inferred tasks plugins'](/concepts/inferred-tasks) 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. |
| 186 | + |
| 187 | +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. |
| 188 | + |
| 189 | +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. |
| 190 | + |
| 191 | + |
| 192 | + |
| 193 | +## Powerpack Updates |
| 194 | + |
| 195 | +[Nx Powerpack](/nx-enterprise/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](/nx-enterprise/powerpack/custom-caching), [specifying specific developers as owners of specific projects in your repo](/nx-enterprise/powerpack/owners), and [running language-agnostic conformance rules](/nx-enterprise/powerpack/conformance): |
| 196 | +{% cards cols="2" lgCols="3" mdCols="3" smCols="2" %} |
| 197 | + |
| 198 | + {% link-card title="Conformance" type="Powerpack Feature" url="/nx-enterprise/powerpack/conformance" icon="CheckBadgeIcon" /%} |
| 199 | + {% link-card title="Owners" type="Powerpack Feature" url="/nx-enterprise/powerpack/owners" icon="UserGroupIcon" /%} |
| 200 | + {% link-card title="Self-Hosted Remote Cache" type="Powerpack Feature" url="/nx-enterprise/powerpack/custom-caching" icon="ServerIcon" /%} |
| 201 | + |
| 202 | +{% /cards %} |
| 203 | + |
| 204 | +Recently, we've added support for [Azure](/nx-api/powerpack-azure-cache) and [Google Cloud Storage](/nx-api/powerpack-gcs-cache) as supported storage providers (in addition to [S3](/nx-api/powerpack-s3-cache) or [simply using a shared file system](/nx-api/powerpack-shared-fs-cache)). |
| 205 | + |
| 206 | +We've also [added support for S3 compatible providers](/nx-api/powerpack-s3-cache#s3-compatible-providers) such as: |
| 207 | + |
| 208 | +- [MinIO](https://min.io/product/s3-compatibility) |
| 209 | +- [LocalStack](https://www.localstack.cloud) |
| 210 | +- [DigitalOcean Spaces](https://www.digitalocean.com/products/spaces) |
| 211 | +- [Cloudflare](https://www.cloudflare.com/developer-platform/solutions/s3-compatible-object-storage) |
| 212 | + |
| 213 | +We've also added the capability to allow folks to authenitcate 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. |
| 214 | + |
| 215 | +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](https://cloud.nx.app/powerpack/purchase). |
| 216 | + |
| 217 | +## RFC for Infinite Tasks |
| 218 | + |
| 219 | +Last up, we have an [RFC for the concept of "Infinite Tasks"](https://github.com/nrwl/nx/discussions/29025) 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: |
| 220 | + |
| 221 | +- starting a local backend application whenever you start a frontend web server that depends on that backend running (while developing) |
| 222 | +- starting a local database whenever you start a backend application that depends on that database istance (while developing) |
| 223 | +- making sure you publish to a local registry (like verdaccio) when you are testing a package before publishing to npm |
| 224 | + |
| 225 | +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! |
| 226 | + |
| 227 | +## Learn more |
| 228 | + |
| 229 | +- [Nx Docs](/getting-started/intro) |
| 230 | +- [X/Twitter](https://twitter.com/nxdevtools) -- [LinkedIn](https://www.linkedin.com/company/nrwl/) |
| 231 | +- [Nx GitHub](https://github.com/nrwl/nx) |
| 232 | +- [Nx Official Discord Server](https://go.nx.dev/community) |
| 233 | +- [Nx Youtube Channel](https://www.youtube.com/@nxdevtools) |
| 234 | +- [Speed up your CI](/nx-cloud) |
0 commit comments