Nx 12.3 includes many new features, including Incremental Build Improvements, Angular 12, Distributed Task Execution, and more!
Nx is a suite of powerful, extensible dev tools to help you architect, test, and build at any scale - integrating seamlessly with modern technologies and libraries while providing a robust CLI, computation caching, dependency management, and more.
If you aren't familiar with it, learn about Nx at nx.dev/angular and nx.dev/react.
Incremental Build Improvements
Nx already supports incremental builds, and to enhance this feature we have introduced Target Dependencies. Each project's target may now declare other targets that the project depends on, meaning that those targets are completed before the project target is run.
As an example, let's look at an application with a dependency on a buildable library. The following workspace configuration below displays app1 and lib1 with lib1 needing to be built before app1 is built. Previously, the --with-deps option was always required to build the dependencies of app1. Without specifying this option, the application would not build because its dependencies were not built. Because this requirement always has to be met, the build target for app1 should declare a dependency on the build target of projects that app1 depends on. These dependencies can now be defined in the workspace.json within the target configuration for the project.
Now running nx build app1 will also schedule and build nx build lib1 without passing --with-deps.
Another example is serving an application that requires building itself beforehand. Now you can also specify that the target depends on another target defined for the same project.
Now serving app1 will first build app1, along with any additional target dependencies. Target Dependencies give you more control and customization over project dependencies. Now for incremental builds, you don't have to specifically pass --with-deps; The build is always incremental based on its target dependencies.
Support for updating to Angular version 12
- Angular version 12 was just recently released and includes new features that many users are excited about, such as:
- Support for TypeScript 4.2.
- Full support for Webpack 5. In Angular 11, Webpack 5 was an opt-in feature.
- Support for NgRx version 12.
- Deprecation of Protractor as an E2E solution. Fortunately, Nx provides first-party support for Cypress E2E testing.
- Angular ESLint has been updated to version 12.
- Updated Angular Storybook to use the new Storybook version 6 syntax.
- Removal of the lint target with TSLint in favor of community-maintained packages. Fortunately, Nx also provides first-party support for Angular ESLint.
Nx also helps users migrate from TSLint to ESLint automatically. See the video below for a walkthrough.
Migrating Angular Applications from TSLint to ESLint
As an additional note, users of Storybook 5 must upgrade to Storybook 6.2+ before upgrading to Angular 12. This is necessary because Storybook 6.2+ is needed to support Webpack 5+. See our Storybook 5 to 6 migration guide for more details on how you can upgrade.
Other Highlights
Each release of Nx also contains additional minor features and bug fixes. Some notable features include:
- Gatsby is listed as a preset when creating new Nx workspaces.
- Added style-jsx support for Gatsby.
- Next.js has been updated to version 10.2.
- Next.js apps now have support for incremental builds.
- Added getJestProjects() utility method to @nrwl/jest package for the root jest.config.js.
- Added strict option when generating React applications. ESLint now has a recommended extension included for new workspaces.
How to Update Nx
Updating Nx is done with the following command, and will update your dependencies and code to the latest version:
nx migrate latest
After updating your dependencies, run any necessary migrations.
nx migrate --run-migrations
Distributed Task Execution for Nx Cloud
When working in large codebases, only running tasks based on what is affected in your Continuous Integration(CI) environment is a time-saver. Even when you do need to run those sets of tasks, it's better to run them in parallel to speed up your CI process. Traditionally, you would set up a parent job to split your tasks such as linting and testing into "buckets", and use child jobs to run each bucket of tasks, each with its own task details. This turns into a very challenging and ongoing effort to distribute and gather results from these tasks across a grid of machines. We've solved this problem numerous times, and are working on an exciting new feature for Nx Cloud called Distributed Task Execution (DTE). DTE is a new way to distribute the work of many tasks across many machines. DTE provides a Zero-Config️ way to coordinate and schedule all the tasks, execute them across multiple machines, and collect the results from these tasks into a single run, giving you a clean consolidated view of all tasks run and their details.
Watch as Victor Savkin demos this new feature using the Nx GitHub repo.
DTE is in private beta right now, and will available to the public soon, and will be free for open-source projects.
Explore More
- Nx is Modern Angular
- How to never build or test the same code twice
- Plugging into the Dependency Graph Construction for Nx
- Smarter and Faster Angular Development with Nx
- Get our free basic Nx workspaces course on youtube!
- Purchase our premium video course on advanced practices for Nx workspaces: here!
As always, if you are looking for enterprise consulting, training and support, you can find out more about how we work with our clients here.
If you liked this, click the ❤️ so other people will see it. Follow Brandon Roberts and @nrwl_io to read more about Nx and Nrwl. Also follow Brandon, Nx, and Nrwl on Twitter!
Top comments (0)