Nx CLI, Distributed Caching, improved React support, and more in Nx 9!

Today, we are happy to announce the release of Nx 9 that includes many new features, including the Nx CLI, Distributed Caching, and support for design systems using Storybook!

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 8 Recap:

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

• Added support for Web Components, React, Nest, Cypress, Next.js, and more.
• Restructured the packages, and made Nx pluggable.
• Launched nx.dev.

Read more about the Nx 8 release here.

Nx CLI: The CLI for monorepos

At Nrwl, we always wanted Nx to be the tool that helps teams using different stacks work together, share code, and collaborate within a monorepo seamlessly. Nx 9 introduces the Nx CLI, a standalone CLI, that lets you extend the capabilities of Nx to many different ecosystems such as Angular, React, and Web Components.

The Nx CLI supports the same build/test/lint/e2e commands developers are used to within an Nx workspace, allowing for consistency across tools and projects. You can start with the Nx CLI with a new project:

npx create-nx-workspace myworkspace

The Nx CLI is also extensible, allowing you to add support for Stencil, Svelte, Ember, or other ecosystems. Feel free to reach out to us if you’re interested in adding support, and we will help you.

Distributed Caching

The productivity, and workflow of developer can be impacted in many ways. One of those ways is the time spent waiting on a particular task to finish, such as an application build, running tests, or lint checking for code consistency. The time it takes for these tasks to finish across an organization is amplified locally, and in a Continuous Integration(CI) environment. Nx now includes a distributed caching mechanism that takes on this problem. Each time you run a build, test, or lint command, those tasks are run against a given set of inputs, and produces an output. The inputs and outputs of those commands are stored in a cache. Nx uses this cache of inputs to intelligently determine whether to reuse the existing artifacts from the cache, and re-run only the required tasks based on your changes. We’ve already tested distributed caching against a couple of production codebases, and you can see the results in the graphic below.

Distributing caching is currently available on an invite-only basis. Learn more about how using a local cache can speed up your development workflow within an Nx workspace.

Smarter Affected Commands

Nx uses code analysis to construct a dependency graph of all projects in the workspace. It then uses the dependency graph to determine what needs to be rebuilt and retested. We have improved how this dependency analysis works with workspace projects by detecting which npm packages your projects depend on as part of building the dependency graph.

For example, you have an app named my-app that imports React.

import React from ‘react’

Nx will add the React npm package as a dependency to my-app when building the dependency graph. Any changes to the version of react in package.json will mark my-app (and any other dependent projects) as affected. This allows you to make updates to your package.json, and Nx will intelligently only rebuild, and retest affected projects instead of the entire workspace.

Improved React Support

Support for using React within an Nx workspace has gotten significantly better since we introduced it in Nx 8. A few notable features include:

• Differential loading for React applications.
• Support for publishable React Libraries.
• Support for Next.js for generating static sites using React.
• Added SVGR support so that SVG files can be imported as React components. This change makes SVG integration into React projects easier and more seemless. (See https://github.com/gregberge/svgr)
• Added --js option to React schematics so files will be generated as JS files rather than TS files. This option is useful for teams that choose not to use TypeScript for their projects.
• More integration with the Nx CLI for build/test/lint/e2e commands.

We are continuing to improve, and stabilize support for React support going forward.

Storybook Support

Storybook logo

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

With Storybook support in Nx, you can develop your Angular and React components in isolation, generate tests, and run tests against your UI libraries using Cypress in a few simple steps.

Learn more about the Angular and React integration in our API docs. And read this blog post about Storybook and Nx here.

Progress on Bazel

Bazel was recently released to 1.0, which included many new features. We have been working with the Bazel team to make it easier to integrate Bazel within an Nx workspace with minimal effort, that is planned for the Nx 10 release. Nx will handle analysis of your dependency graph, the generation and syncing of your Bazel build configuration files, and determining which projects should be rebuilt and retested using Bazel.

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 10

Nx 9 is out the door, but we’re already looking ahead to Nx 10! Read the issue on GitHub to see where we’re going next.

How to Update Nx

Each release of Nx also contains additional minor features, and bug fixes. Releases of the Angular framework, Angular CLI, NgRx libraries, React, and Redux Toolkit were also updated.

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!