Today, we are happy to announce the release of Nx 10.3 that includes many new features, including support for VS Code Jest plugins, improved ESLint support, Storybook 6 support and more!

Nx is a set of Extensible Dev Tools for Monorepos, which we developed at Nrwl based on our experience working at Google and helping Fortune 500 enterprises build ambitious applications at scale.

If you aren’t familiar with it, learn about Nx at nx.dev/angular and nx.dev/react.

VS Code Jest Support

Until now, Jest plugins for VS Code needed manual configuration to work properly with Nx workspaces. With Nx 10.3, projects are now configured in a way that is compatible with Jest VS Code plugins out of the box! Using the Jest support in VS Code can be a massive improvement in productivity when writing unit tests! In particular, we recommend the Jest Runner extension.

You will notice that the root jest.config.js now looks like the following:

module.exports = {
  projects: ['<rootDir>/packages/workspace',
    '<rootDir>/packages/angular',
    '<rootDir>/packages/react',
    ...
],
};

Note: The configuration that was previously here is now moved to jest.preset.js that is still extended by all other Jest configs.

This root configuration file has references to all Jest projects in the workspace and allows VSCode extensions to run any test at the click of a button.

Note: Some extensions, such as the widely recommended Jestextension, might attempt to run ALL the tests in the workspace (which might be A LOT of tests) when VSCode is first opened. We recommend either switching to the Jest Runnerextension or disabling this option:

ESLint

We worked with James Henry, a former Nrwlian and the maintainer of typescript-eslint to bring a load of improvements to Nx’s ESLint support!

Nx 10.3 has a new @nrwl/linter:eslint builder, a replacement for the @nrwl/linter:lint builder. The new builder accepts file patterns and passes them directly to ESLint instead of relying on tsconfigs to discover files to pass to ESLint. On the Nx repo for instance, using the new builder only has 64 milliseconds of overhead before executing ESLint as opposed to the 1.75 seconds of overhead with the old builder.

We have also included the .json file extension for the ESLint configuration files as .eslintrc is now deprecated.

ESLint for Angular!

When creating a new workspace, you now have the option to choose ESLint as the linter for Angular projects! The ESLint ruleset for Angular does not yet have parity with the TSLint ruleset but we will be actively addressing this very soon. See more about how Nx provides a modern Angular development experience here.

Storybook 6 Support

Nx now supports Storybook 6 that comes with a lot of exciting new features which were designed with large companies such as IBM and Cisco in mind. Nx now generates stories with Component Story Format (CSF), the new standard way of writing component stories. In upcoming versions of Nx we will be taking a look at utilizing more exciting new features of Storybook 6 such as Args, Controls, and Composition! If you have not tried Storybook yet, check out these guides for Angular and React to learn how to setup Storybook with Nx.

Unfortunately, we were unable to automatically migrate users easily to Storybook 6 with the new component story format. For large codebases, migrating all of the storybook projects can be a lengthy task. In the meantime, Nx still supports Storybook 5.x so users can upgrade as they are ready without waiting for other features in Nx 10.3. New projects that are generated will be compatible with whichever version of Storybook is installed. Once you finish migrating to Storybook 6, then Nx will automatically start using Storybook 6! Please refer to this migration guide from Storybook for details about how to migrate to Storybook 6.

In Nx 10.3, we also added Storybook support for applications! So now, you can not only add Storybook configuration and generate stories for your libraries, but applications as well!

New Nx.dev Features

NodeJS Documentation

We are excited to announce that we have added a NodeJS flavor of our documentation! This documentation is written specifically for NodeJS developers and focuses on how Nx can be used for backend development. If you are a frontend developer who has always wanted try out backend development, check out our new tutorial where you will build an API server!

Versioned Documentation

Sometimes, more important things keep you from being on the latest and greatest version of Nx. That is why Nx.dev now shows documentation for the previous major version of Nx as well! If you are not on the latest major version of Nx, select Previous from the dropdown in the sidebar!

Typescript 4 Support

Nx 10.3 adds support for Typescript 4 which was released about a month ago. Typescript 4 comes with a lot of new features!

Angular 10.1 Support

Nx 10.3 adds support for Angular 10.1! Notably, the Angular Team has decided to revert the usage of Solution Style Tsconfigs. However, we have decided not to revert the usage of Solution Style Tsconfigs in Nx workspaces. We are confident that Nx sets up Solution Style Tsconfigs in a way that benefits the developer experience. There may still be some issues with Solution Style Tsconfigs so please open an issue on our GitHub if you run into any problems.

A Glimpse into Nx 11

We are already looking ahead to Nx 11! Check this GitHub Issue which details our plans for the next major release of Nx.

How to Update Nx

Each release of Nx also contains additional minor features and bug fixes. Updating Nx can be done with the following commands, and will update your dependencies and code to the latest version:

yarn update

Or for npm

npm run update

For users on Nx 10.2.x, we noticed a bug with nx migrate, and you may see the following error:

Command failed: npm install @nrwl/[email protected]

Do not panic, there are instructions just above there that will solve the issue:

npm install --save-dev @nrwl/workspace@latest
nx migrate @nrwl/workspace@latest --from="@nrwl/[email protected]"

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 👏 below so other people will see this here on Medium.

Jason Jean is an Architect at Nrwl who works on Nx. Nrwl helps companies develop like Google. Follow him and Nrwl to read more about monorepos, Nx, Angular, and React. Also follow Jason, Nx, and Nrwl on Twitter!