We're proud to announce the release of Nx version 16! In this article, we'll go over the major updates from Nx 16 and the key pieces of information you'll need to know for the changes that Nx 16 brings!
But before we jump into the new features of Nx 16, let's recap some of the recent features from our Nx 15 minor releases!
- We introduced simpler presets for React, Angular, and Node starter applications
- We added official support for Vite and Vitest for integrated Nx monorepos
- We introduced an official Deno plugin, including integration for Node and Deno project collocation and project graph support for Deno imports
- We added Rust into the Nx codebase to speed up core functionality
- We added support for non-npm workspaces to support workspaces focused on other languages like C#, Java, and Kotlin, and saw some of those in action with community plugins for .NET and Java/Kotlin
- Introduced Nx Console for JetBrains IDEs like IntelliJ and WebStorm
- We have decoupled the Nx version from Angular versions allowing you to update Nx without updating Angular
Table of Contents
· Here's how to Upgrade with Nx Migrate
· Rescoping From @nrwl/_ to @nx/_
· Deno Standalone Apps, Edge Deployment and More
· Cypress Feature Testing
· Task Graph
· The Nx Repo Switches to PNPM for its Package Manager
· Learn more
Here's how to Upgrade with Nx Migrate
As with all new Nx releases, nx migrate can be used to bump your Nx packages to the appropriate version, as well as run any necessary changes to your codebase.
To update to Nx 16, run
This will update your dependencies to the latest version, as well as update those dependencies in your root package.json file.
If further migrations are available, you'll see a migrations.json file in the root of your workspace. This file will describe any further code generation scripts that should be run. To run these, use the command..
nx migrate --run-migrations…as prompted in the terminal.
After the migrations have been run, you should be able to see them in your source control tools. Ensure that everything is still working properly by running any automated testing you have set up.
Check out this real-world example using the nx migrate command for the Tanstack/query repo:
Also as a reminder to our Angular users — we’ve now decoupled the Nx version from Angular versions, so as long as you’re on an LTS version of Angular, you’re clear to migrate to the latest Nx version without having to touch your Angular version! To do so, be sure to use the interactive option (e.g. nx migrate --interactive). Check out this video for more info:
Rescoping From @nrwl/_ to @nx/_
One of the more impactful changes from Nx 16 is that we’ll be changing the npm scope that we publish our packages under from @nrwl to @nx. In other words, @nrwl/react will now be published as @nx/react.
Nx will handle this migration automatically via the nx migrate command to update your workspaces!
To ensure that community plugins are not broken, the @nrwl/* versions of these packages are deprecated but will continue to be published until Nx 17 which is scheduled for October 2023.
Deno Standalone Apps, Edge Deployment and More
Nx has had support for developing Node-based backends for a while. It was a popular choice for building your BFF in a monorepo-based setup alongside your React or Angular application. In Nx 15.7 we decided to expand that support and really go deep into improving the overall DX.
Deno got quite some love in this iteration:
- Standalone App support — You can now scaffold a new single-project Deno workspace with Nx. Just run
npx create-nx-workspace --preset=@nx/deno. Probably the fastest way to get up and running with Deno - We also added Nx generators to set up Deno with oak. Just pass the
--frameworkoption when you set up a new Deno app (or use Nx Console)
It’s all about Edge functions recently (and, well, serverless in general). Especially when developing with Node it is common that you might want to deploy to the Edge or some serverless environment. Therefore, we..
- created a brand new
@nx/netlifypackage (currently in labs) which allows you to set up a brand new project for developing and pushing Netlify functions, or you can add serverless deployment support to an existing project, using the@nx/netlify:setup-serverlessgenerator. Check out our in-depth recipe on the topic: /technologies/node/recipes/node-serverless-functions-netlify - published anew
@nx/aws-lambdafor deploying Lambda functions to AWS. All details in our latest recipe: /technologies/node/recipes/node-aws-lambda - Improved our existing Deno package to add support for serverless deployment to both Deno Deploy as well as Netlify. Such support can be added to an existing app using the
@nx/deno:setup-serverlessgenerator and providing the--platformflag that either point todeno-deployornetlify.
Cypress Feature Testing
Nx sets up e2e tests for apps that tend to collect many features. This ends up as a large atomic suite that Nx isn’t good at separating out. With Nx 16, we’ve made it easier to distribute these tests closer to the actual feature they test. This will make it much easier for nx affected to determine which tests are actually necessary.
I also had the opportunity to have a live stream with Nx’s own Caleb (who lead most of the development for this feature), as well as Cypress’s Jordan Powell who also contributed to this effort — check it out:
Task Graph
Nx 16.0 also introduces more helpful tools for visualizing your project and task graph as determined by Nx:
The task graph in particular is helpful for visualizing what actually runs when you run commands, and with Nx 16.0, you can now use the --graph option when running most Nx commands to visualize the graph of tasks that would have run - for example:
The task graph was also highlighted in a recent video demonstrating feature parity between our VsCode and JetBrains plugin:
The Nx Repo Switches to PNPM for its Package Manager
Internally, the Nx repo switched to using pnpm as its package manager. Since switching we have noted the following advantages:
- publish is 2x faster
- CI times decreased
- install times decreased
While we are using pnpm as our package manager, we are not using the pnpm workspaces functionality in the Nx repo, but we've found that Nx actually works extremely well with pnpm workspace setups. Juri had released an article on this topic previously, and we used this approach to introduce Task Caching and Distributed Caching (via Nx and Nx Cloud) to the Tanstack/query repo, which yielded excellent results:
Wrapping up!
That’s about it for Nx 16.0 — we’ve really loved the opportunity to bring you all this cool stuff, and we’re eager to start our next iteration with a steady focus on making Nx an awesome tool for increasing your productivity by taking all the repo management tasks out of the equation so you can focus on shipping great stuff.