Skip to content

Commit fae2455

Browse files
ZackDeRoseFrozenPandaz
authored andcommitted
docs(misc): nx 20.3 blogpost (#29512)
<!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> <!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes # (cherry picked from commit 3f3c874)
1 parent 5c51d92 commit fae2455

File tree

3 files changed

+234
-0
lines changed

3 files changed

+234
-0
lines changed
+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
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+
![](/blog/images/2025-01-06/project-graph-spinner.gif)
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)
310 KB
Loading
Loading

0 commit comments

Comments
 (0)