More customizable workspaces, Angular 10 support, Better WebStorm/Jest integration, and more in Nx 10!

Published in

Nx Devtools

8 min readJul 20, 2020

Today, we are happy to announce the release of Nx 10 that includes many new features, including support for Angular 10!

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.

Nx 9 Recap:

We continued to add new features and support new platforms in Nx 9. Here are some highlights:

Improvements to the Nx CLI’s local caching, and launched distributed caching with Nx Cloud.
Added Nx Plugins, allowing community plugins to be built on top of Nx.
Improved React ecosystem support including Next.js.

More Customizable Workspaces

An Nx workspace provides reasonable defaults when a new workspace is created for building applications and libraries. Nx has also been improved to support workspaces with different configurations:

Custom Layouts: custom workspace layouts provide alternatives to apps and libs for your top-level folders.
Default Base Branch For Affected Commands: traditionally, the name of the main development branch is master. This branch is used to determined the affected projects calculated from the dependency graph. This name is configurable in the nx.json now to allow for other defaults, such as main or trunk.
OSS preset: For open source projects, there is now an oss preset that allows you to create an alternate-style workspace layout for your open source projects. And any open source project has unlimited access to Nx Cloud.

These changes allow more flexibility in the style of projects that can be used within an Nx workspace and better transition from existing workspaces that use Lerna in combination with TypeScript or JavaScript today.

Angular 10 Support

Nx 10 also includes the latest major release of the Angular framework. This release contains many bug fixes and features such as:

Optional stricter settings for applications
TypeScript 3.9 support
Removal of support for IE11 and older browsers
Updated to the NestJS 7.0.0 release

Solution-style TypeScript configuration files

One significant change for Nx workspaces for is the addition of solution-style tsconfigs. Solution-style tsconfig support was added with TypeScript 3.9. Solution-style tsconfigs are a new feature of TypeScript that allows the IDE to use specific tsconfig files for references to different files. Previously, using global methods available for unit tests in application code would not be identified as an error in the IDE because all files in a project use the tsconfig.json. Now, the tsconfig.json file is a solution-style tsconfig that does not apply to any files itself but has references to the tsconfig.app.json and tsconfig.spec.json, allowing the IDE to properly show an error if types for tests are used in application code.

As part of this change, we are renaming the root tsconfig.json more appropriately to tsconfig.base.json as it should only contain the base config and is not a tsconfig file that should be directly used by the IDE.

Better WebStorm Integration with Jest

Nx has always provided first-class support for running tests with Jest inside an Nx workspace. We’ve improved the integration specifically for WebStorm users to be able to run tests in an Nx workspace through the WebStorm native UI.

This allows you to run anything from a specific test to an entire test suite using WebStorm’s integrated functionality. You can also debug tests by using breakpoints.

Continued Improvements for React and Next.js

Nx support for the React ecosystem also continued to improve. Some highlights for this release include:

Addition of styled-jsx support for components, apps, and libraries.
Custom babel configuration per project in an Nx workspace.
Support for custom .env files per workspace and project.
Generate React apps with <React.StrictMode> by default.
Removal of IE11 and older browsers from the default config.

Dependency Graph Enhancements

Using the dep-graph command is a powerful way to explore your workspace visually. Using this within a workspace with a large number of projects can be pretty slow, so to optimize the initial view, we’ve changed the default to not select any projects. This way, your initial view is fast and you can add what you need to. If you want to see all your projects again, you can click the “Select All” button.

To make that initial view even more useful, we have added some CLI options for you to refine your first project choices. Providing —-filter is an option that accepts the name of a project in your workspace. Like clicking “Focus” on a project, this shows that project and any projects that depend on it or are depended on by it. If that’s still too many projects for you, the —-exclude option accepts a comma-delimited list of projects that will be excluded. Finally, the —-groupByFolder option will toggle on the “group by folder” option for you.

We’ve also added an option to filter projects by text in the browser view. The filter text box accepts a comma-delimited list of terms and searches for any projects that contain those terms. This gives you an easy way to filter down projects to see only your e2e projects or projects that start with a specific prefix. You can also click the “include projects in path” box to include projects that depend on or are depended on by any projects found.

Seamless Connection to Nx Cloud

A small change to use Nx can result in faster builds locally. This time savings can be applied across teams and across an organization. Nx Cloud provides a distributed cache, to enable faster builds locally, and in your Continuous Integration environments. To make this process even more seamless, Nx Cloud provides a package to connect to Nx Cloud in two easy steps.

First, install the Nx Cloud package:

yarn add @nrwl/nx-cloud --dev

Next, add the Nx Cloud integration to your workspace.

yarn nx g @nrwl/nx-cloud:init

And that’s it! Your account on Nx Cloud will be automatically created, and connected to our free tier and start saving time on your builds. Connect your account using the provided link to get advanced insights about your build process to improve your team’s velocity at https://nx.app.

Initial support for Gatsby

Nx workspaces support many different types of applications, ecosystems, and libraries. Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. Gatsby includes support for multiple data sources and deployment to many different hosts. Within an Nx workspace, you can now generate a Gatsby application, along with the integration to build, test, and lint the project. Combined with the power of Nx to easily generate shared libraries, integrate with the dependency graph, local caching, and more, your Gatsby applications and websites can work more easily within an Nx workspace. To try out Gatsby:

Install the Nx Plugin for Gatsby in your Nx workspace.

yarn add @nrwl/gatsby --dev

npm install @nrwl/gatsby --save-dev

Generate a new Gatsby application:

nx generate @nrwl/gatsby:app myblog

To serve the application:

nx serve myblog

To build and serve the production application, use the --prod flag.

To build the application:

nx build myblog

We are continuing to work to ensure the support for Gatsby continues to improve. Feel free to provide us feedback on GitHub on how to improve the experience.

New video course for Nx Workspaces!

We also recently launched a brand new premium video course on advanced practices for Nx workspaces. You can get it here!

We also have a free Nx workspaces course on youtube, where you’ll find all you need to know to get started with Nx! Instructor and Nrwl consultant, Isaac Mann, takes you through 5-minute video sessions on specific topics for a total of 30 minutes of learning time. You’ll learn how an Nx workspace enables you to do more with your Angular and React apps and take advantage of the tool:

Out-of-the-box configuration for modern frameworks and tooling
Easy code-sharing with enforced API boundaries
Dependency-graph-aware tooling that allows you to run commands only on the code affected by a particular change
Ensure that Angular and React apps and their backend code all live happily in the same monorepo

A glimpse into Nx 11

Nx 10 is out the door, but we’re already looking ahead to Nx 11! Check our GitHub page for updates regarding our plans for the next major release.

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

Explore More

Publishing React Libraries Made Easy
Why You Should Switch from Lerna to Nx
Monorepos and Microfrontends: A Perfect Match
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 👏 below so other people will see this here on Medium. Follow Brandon Roberts and @nrwl_io to read more about Nx and Nrwl. Also follow Brandon, Nx, and Nrwl on Twitter!