We are excited to announce Nx version 13! We have implemented many highly anticipated features. In addition to new features, we have also drastically improved performance, implemented many bug fixes, updated docs, and cleaned up the repo.

These are the highlights:

Core Performance Improvements

The Nx team is always focused on performance from the core of the framework, to each individual plugin. Nx 13 brings 3 big performance improvements to enhance the developer experience in larger projects.

Cache Restoration

Nx performs cache restoration when searching the computation cache results in a match. Previously we would restore cache for 1 project at a time. The cache restoration is fast already, even for multiple projects. The cache restoration now happens in parallel. This resulted in a 2x improvement in some cases, decreasing this time even more.

Project Graph Construction

Along with parallel cache restoration, the project graph is now constructed in parallel. We spawn multiple threads which then pick up files to reanalyze. There is some overhead with spawning threads, so Nx only does it when enough files have changed. For smaller projects like the Nx repository, the initial recomputation of the graph can get twice as fast. For larger projects, it will get 5–8 times faster. The speed improvements affect CI the most. CI agents don’t have the cached graph, so each of them will have to recompute the graph from scratch.

Incremental Recomputation with the new Nx Daemon

When it comes to your local dev experience, incremental recomputation is what matters the most. Before, Nx needed to calculate the project graph before running the tasks. In worst-case scenarios, this resulted in a significant overhead when running tasks. To remedy this issue, the Nx daemon is a background process that calculates the project graph as changes are made to files.

The daemon keeps a lot of data structures in memory. As file changes happen, the daemon updates those data structures preemptively. As a result, when the client process is asking for the project graph, it’s already prepared, so it gets delivered very quickly. For large repos, this results in up to 10x speed improvements. All the Nx analysis happens ahead of time, so there is practically no overhead when you invoke any Nx CLI command.

To opt-in to using the new daemon process, after upgrading to Nx 13, set the following environment variable to enable it.

NX_DAEMON=true

Read more in the Nx Daemon guide. We encourage you to try out the new incremental recomputation daemon in your workspaces and to report any issues through the Nx repository. We will continue to improve the speed and stability of the Nx daemon process, and it will be enabled by default in a future version of Nx.

Consolidated Workspace and Project Configuration

In Nx workspaces, configuration for all projects was contained in theworkspace.json and nx.json file. For medium to large workspaces, these can be a source of merge conflicts and limit existing repository structures. We've made this more flexible, introduced per-project configuration in Nx workspaces using project.json files, and is now the default in Nx 13.

Project-specific configuration files

This project.json file contains a combination of the project's configuration from both workspace.json and nx.json, making projects in the root nx.json optional.

Independent project configurations provide more flexibility for projects and less possibility of merge conflicts for workspaces. Project configurations are independent files, only referenced by workspace.json. For instance, a workspace.json may contain projects configured as below.

Integration and autocompletion still work as intended with Nx Console.

To convert your existing workspace to a per-project configuration, use the convert-to-nx-project generator.

nx g @nrwl/workspace:convert-to-nx-project --all

Along with standalone configuration, we’ve also consolidated and simplified the configuration used by Nx:

• All settings that were in workspace.json, but not related to a project, such as CLI configuration and generator defaults have been moved to nx.json.
• Project-level tags and implicit dependencies have been moved to the project configurations in the respective workspace.json or project.json.
• In new workspaces, the first project will be created with a project.json file. If any project in the workspace doesn’t take advantage of this, it will still handle inline projects.

Dependencies Between Targets

We introduced the target dependencies feature to allow each project to 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 buildtarget for app1 should declare a dependency on the build target of projects that app1depends on. These dependencies can now be defined in the workspace.json within the target configuration for the project.

This behavior is now the default in Nx 13 allowing for an integrated solution for incremental builds, and a well-defined structure for organized dependent tasks.

Webpack 5

In Nx 12, we introduced support for Webpack 5 on an opt-in basis. Webpack 5 is now the default in Nx 13. If you don’t have a custom Webpack config, you should be able to migrate with no issues. If you do have a custom Webpack config, we recommend trying to migrate and making necessary changes to your config before Nx 13. Read more in the Webpack 5 migration guide.

Micro-frontends with Module Federation and Angular

Webpack 5 introduced a Module Federation Plugin enabling multiple, independently built, and deployed bundles of code to form a single application. This is the foundation of Micro-Frontend Architecture and the Module Federation Plugin makes implementing such an architecture much simpler.

Read more in our guide on how to setup a Micro-Frontend with Angular.

Other highlights include:

• RxJS 7 support
• Webpack 5 enabled by default
• Support for Tailwind CSS with publishable libraries

We will also provide an upgrade to the version 13 release of the Angular framework when it becomes available.

Preset for React and Storybook

We added a dedicated Storybook preset for React which dramatically simplifies the Storybook setup and makes sure that Storybook uses the same Webpack configuration as your React applications running within an Nx workspace.

The video below by Juri Strumpflohner gives a walkthrough of the new feature to simplify the Storybook and React setup.

Storybook support has also been extended to projects using Web Components and Vue.

Other highlights:

• React Native support is provided as a first-party package.
• Next.JS 11.x support
• Improved support for incremental builds in React/Next.JS applications

Also, check out our blog series on building a web application with Next.JS from Juri Strumpflohner.

Storybook Controls Integration

Storybook v6 moves from “knobs” to args and controls when it comes to defining and manipulating your storybook component properties. More can be found on the official Storybook docs.

The @nrwl/storybook package uses @storybook/addon-controls instead of @storybook/addon-knobs to generate stories.

Other highlights include:

• Webpack 5 support for Storybook and Angular

Support for TypeScript compiler plugins with NestJS

TypeScript Plugins are quite popular as they allow plugin authors to alter the code of the consumers using an Abstract Syntax Tree (AST). The TypeScript Transformer API hooks into the TypeScript transform process.

To better support this, Nx now supports adding TypeScript compiler plugins to the build config for Node/NestJS projects. Walk the walkthrough from Chau Tran

New Nx Docs website

Keeping our documentation up-to-date is something we put a lot of work and effort into maintaining. We have revamped our Nx website, which is now built with Next.js!

We’ve also refreshed the guides for new Nx users, API docs, and recipe guides.

Distributed CI Tools and Guides

Integrating Nx into your CI environment is one way to speed up your CI environment. By only building/testing/linting what is affected, distributing tasks, and by using distributed caching you can drastically reduce your average CI times for pull requests and merged changes.

To help make this process more straightforward, we’ve added integrations with GitHub Actions and CircleCI. Read more in our post from Miro about Speeding up computations in GitHub/CircleCI workflows with Affected Commands.

We’ve also added an overview page for CI environments with Nx along with new and refreshed guides for using GitHub Actions, Azure Pipelines, CircleCI and Jenkins.

Nx Dependency Graph

The dependency graph is an evergreen way to visualize the dependencies between applications and libraries in your Nx workspace.

Visual Refresh

As we keep improving the dependency graph with new features, we gave the dependency graph a visual refresh. Nrwlians Philip Fulcher and Ben Cabanes collaborated on updates to the dependency graph look and feel which is now cleaner than ever! See the demo from Ben below.

Nx Console

Nx Console, the UI for the Nx CLI, has received recent improvements also. Here’s the summary of all the major features since the last major release of Nx.

• Projects are sorted alphabetically in the project view
• Use VSCode settings for shell execution, enabling customization for Nx Console tasks.
• Shortcuts for adding applications and libraries directly.
• Welcome view and getting started walkthrough for new installations.
• Intellisense for workspace configuration including workspace.json, angular.json, and project.json, files that provide information on builders that are currently installed along with their associated options.
• Codelens support for workspace configuration files for quick task execution

Updating to Nx 13

To update your workspace to Nx 13, use the following commands:

Update the Nx workspace package versions:

nx migrate latest

After you are satisfied, run npm install, yarn, or pnpm install. Run the migrations to update your workspace.

nx migrate --run-migrations

For more information on the update process, visit our Updating Nx page.

Nx Cloud Updates

Nx Cloud version 2.2 was also recently released, with a focus on User Experience and Enterprise Readiness. The features include:

• Mini-guides to help with setting up a new Nx Cloud workspace.
• Displaying “near misses” on Nx Cloud hits to provide actionable insights on computation cache usage.
• GitHub user management for Nx Private Cloud

Learn more about these features in the post by Jo Hanna Pearce about Nx Cloud 2.2 with better distribution of tasks using Distributed Task Execution.

Join Our Community

The Nx community is growing every day with new users of Nx, as well as Nx Plugin authors. Join our Slack workspace if you’re new to Nx, or an existing user looking to collaborate with others in the community. Join us for livestreams twice a month on YouTube. Find out more on our Nx Community page.

Thank You!

We hope you enjoy this release of Nx 13, and as always, thank you for using Nx! If you have any questions or issues, please visit us on the Nx GitHub repository.