We are excited to announce Nx version 12! We have implemented many highly anticipated features. In addition to new features, we have also been able to drastically improve performance, implement many bug fixes, write docs, and clean up the repo.

These are the highlights:

Simplify Adding Nx to Existing Projects

Nx is split into two parts:

1. Core: computation cache, dependency graph creation and analysis, affected commands, and more.

2. Plugins: code generation and task executors for common tools like Jest, React, Next.js, Angular, Cypress, and more.

Most of our docs talk about using both, so this may lead to an impression that adding the core of Nx to an existing project is a lot of work. In practice though adding Nx without plugins only takes a few minutes, and it still provides a lot of value.

Adding Nx to an Existing Monorepo

Run npx add-nx-to-monorepoto add a minimal Nx setup to an existing monorepo. After about a minute, you will be able to use your existing scripts and build tools plus Nx’s computation caching, dep graph analysis, GitHub integration, and additional tooling.

We’ve put together a few videos showing how easy it is to add Nx to an existing repo:

Speeding Up Storybook Monorepo with Nx:

Speeding Up Remotion Monorepo with Nx:

Convert CRA Projects to Nx

To convert an existing Create React App project to Nx, run:

npx cra-to-nx

Learn more in our CRA migration docs.

Convert Angular CLI Projects to Nx

Converting an existing Angular CLI project to Nx by running:

ng add @nrwl/workspace

To preserve your existing Angular CLI workspace structure, run:

ng add @nrwl/workspace --preserveAngularCLILayout

Find out more in the Angular CLI workspace migration docs.

Performance Improvements

Some highlights:

1. We have improved the performance of the Nx CLI (up to 3x faster in some cases).

2. We improved the hashing algorithm for computation caching. Now, a repo with 5k files can be hashed in about 30–40ms on a typical laptop.

3. We have also updated the hasher to treat global configuration files in a more intelligent way. Most updates to workspace.json, nx.json, and package.json should no longer result in a global cache invalidation.

4. We have optimized the algorithm to avoid unnecessarily copying files for cached tasks. This fixes performance issues folks had on Windows (where I/O is a lot slower) when using incremental builds.

5. We have improved the performance of the lint checks.

6. We have made the create-nx-workspace command significantly faster.

Improved Multi-Language Support

Nx has always supported non-JavaScript projects. We at Nrwl use Kotlin to write our APIs. A lot of folks we work with use Nx to manage Go/Java/.Net projects. One thing that was missing is a way for folks to plug into our dependency graph creation process. This process works by analyzing the source code and figuring out how projects depend on each other. Until now, folks had to manually specify implicit dependencies between non-JavaScript projects in nx.json. Now Nx can do it for you.

We’ve extended the Nx plugin API to allow you to register a plugin that will analyze, say, Gradle files and will create the right dependencies automatically. As always, we are striving to make the API as small, and as beginner-accessible, as it can be. Learn more in Extending the Project Graph guide.

Node

We have redesigned our Node landing page, and put together a new 10-min walk-through video showing why Nx should be your first choice for any project.

We have also added presets helping to get up and running quickly:

To create an Nx workspace and express application, run:

npx create-nx-workspace --preset=express

For an Nx workspace and NestJS application, run:

npx create-nx-workspace --preset=nest

If you aren’t sure about monorepos and microservices, read this blog post about using Nx and Microservices, and you will get convinced.

React

In Nx 12, we have enabled the new JSX transform, which ships with React 17. This change means developers no longer need to import React in order to use JSX in their components. The corresponding ESLint rules have been disabled as well, including react/react-in-jsx-scope and react/jsx-uses-react.

We have also upgraded Next.js and Gatsby to their latest versions (10.1.3 and 3.2.1 respectively). Please see the Next.js and Gatsby release notes for more information on the changes in those frameworks.

Another exciting change for Gatsby is that we have moved the Nx Plugin for Gatsby into the main Nx monorepo. This move signifies our commitment to make Nx the best build tool to compliment Gatsby apps.

Angular

We are committed to our goal to make Nx the best build framework to support modern Angular development. Learn more in our recent blog post: Nx is Modern Angular.

In this release, we have improved the ESLint setup for Angular, which has been the default for many months.

We also cannot (and don’t want to) abandon the Angular users who have existing projects using TSLint, so we will continue to support TSLint. That said, TSLint has been deprecated for a long time, and remaining TSLint users should seriously consider migrating to ESLint. We have added a generator that allows you to automatically move from TSLint to ESLint.

Ivy support for Storybook and Jest

We also improved compatibility with Ivy for running tests with Storybook or Jest by updating the initial compilation done by ngcc. Now, these tests run with Ivy-enabled for new workspaces. For existing workspaces, our migrations move the compilation update to the new behavior but may cause issues with existing tests now running with Ivy. As we are committed to not intentionally breaking any workspaces, read more about this change on GitHub for further details and implications.

1. We have updated docs for Nx Devkit, part of the core set of tooling that powers generators, executors, and the Nx CLI.

2. We have rewritten the Getting started section to better explain what Nx does.

3. We have refreshed the design of nx.dev.

Nx Console

Nx Console, the UI for the Nx CLI, has received recent improvements also, including:

1. Light and Dark mode icons ☀️🌑
2. Filtering in the Nx project tree view ⏳
3. Better overall performance, including a 150x faster startup time when opening large workspaces⚡️
4. Dry runs are only run when all the fields are valid ✅

Nx Cloud

• The Nx Cloud website has received a fresh redesign, making it easier to find key information.
• The Nx Cloud GitHub integration has an enhanced detailed view of the tasks performed.
• Nx Private Cloud is available and ready for teams of all sizes, today.

Nx Cloud has a free tier and is unlimited and free for open source projects. Popular open-source projects such as NativeScript, NgRx, Scully, and Nx itself use Nx Cloud.

Updating to Nx 12

To update your workspace to Nx 12. 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.

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 Nx Office Hours twice a month on YouTube. Find out more on our Nx Community page.

Thank You!

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