Introducing Nx 11: New React Features, Angular 11, Incremental Builds, and more
Nx 11 is an exciting release with a lot of improvements across the board.
React
We aim to make Nx the best tool for building any React project regardless of the meta framework used. In the last six months we have made a lot of improvements in the core React support, the docs, and in the support for meta frameworks.
Some highlights:
- We redesigned the home page of nx.dev/react
- We launched a free Egghead.io course on Nx and React
- We published a video comparing Nx and Lerna
- We added videos to the Getting Started interactive tutorial
- ESLint setup for React has been cleaned up
React
We made small quality of life improvements to our React support. The major change in Nx 11 is that all React projects will be generated with CSS modules by default. We believe that local CSS scope leads to fewer styling bugs, but teams can use the new --globalCss option when generating code to enable global CSS scope by default.
For users of Emotion we’ve updated our React plugins to generate with Emotion 11. We also provide a migration to update your packages and code automatically to align with the Emotion setup.
Next.js
Next.js support has been improved. Thanks to the folks at Vercel who helped us iron us some issues with deployment. We continue to work with Vercel to make a great developer experience for Next.js + Nx users.
Gatsby
We have launched the Gatsby plugin for Nx. Check it out here.
React Native
The React Native plugin has been launched. We want Nx to be the de facto solution for using React Native in monorepos. The Nx workspace works out of the box so you don’t need to tinker with workspace configuration.
Node
Nx has always been a great tool for building Node applications and libraries. It also works well for microservices. Check out our new node-focused video tutorial.
Angular
Some of Nx’s core contributors are former Googlers who worked on Angular for many years, and we care deeply about making Nx the best tool for Angular developers.
Some highlights:
- TSLint has been deprecated for a long time and should not be used for any new project. Over the last few months we have worked hard (thanks go out to James Henry for doing the work!) to make ESLint stable and comparable to the TSLint one provided by the Angular team. It’s here. Select ESLint when creating a new Nx Workspace.
- Angular 11 support has been added.
- We redesigned nx.dev/angular.
Building Massive Applications
While Nx brings a lot of benefits for applications of any size and scale, it was always designed to really shine for large monorepos. The Nx “affected commands” already help to achieve this, but there are still some issues with a lot of existing tools (e.g. webpack) which are not optimized when it comes to building and serving super large applications inside an Nx workspace. For instance, running nx serve would always relink the application, thus taking a lot of time which impacts the developer experience. With Nx 11 we started addressing these issues.
A couple of versions ago, we added computation caching to Nx. That in combination with Nx Cloud builds the foundation for real incremental building and serving. Nx 11 adds:
- Buildable libraries allowing each library to be built independently
--with-depsflag when building and serving an application/library that automatically builds all libraries based on their dependencies, and caches the result using the computation cache and Nx Cloud- Lightweight library builder for Angular (
@nrwl/angular:ng-packagr-lite) for a faster and more optimized library build - A static file server (
@nrwl/angular:webpack-browser) that leverages the incremental build system, and thus drastically improves the serving of applications
We applied these changes on our large incremental repository and ran some stats on the differences between the normal and incremental build and serve times of a large Angular application.
The above chart has three different test runs:
- Normal build: visualizes using the normal Angular webpack setup executing
nx build(blue),nx serve(red) and the time to rebuild/re-serve when a file change happened (yellow) - Incremental build (cold): running all the above commands but using the Nx incremental builds without having any kind of cache. That run takes slightly more than the normal webpack build, which is expected. We will continue investigating to find ways to speed this up
- Incremental build (warm): running the Nx incremental build having already cached results from a previous run or from a coworker who has executed the build before. In a real world scenario, we expect there will always be cached results — either of the entire workspace or part of it. This is where teams gain tremendous value and speed improvements.
For more details, refer to our example repo and guide.
PNPM Support
In addition to npm and yarn, Nx now supports pnpm. You can create a new Nx workspace using pnpm as follows:
pnpx create-nx-workspace --pm=pnpm
GitHub Integration
Nx supports GitHub integration with the Nx Cloud GitHub app. This integration lets you access the result of every run — with all its logs and build insights — straight from your PR. Read more about run details and the GitHub integration in this blog post.
Plugins
Nx is a set of very extensible devtools. Plugins are developed both in-house as well as in the community. Some plugins are front-end oriented, adding integration for technologies such as Ionic (with Angular and React), supporting Vue, Gatsby, Next.js, React Native, and more. Others add support for other non-JavaScript technologies (such as Go, Python, etc.). Check out the plugins in the community page here, or by running the nx list command in an Nx workspace.
Thank You!
We hope you enjoy this release of Nx 11, and as always, thank you for using Nx! If you have any questions or issues, please visit us on the Nx GitHub repository.
