Storybook support, run-many command, UI improvements, and more in Nx 8.8

Today, we are happy to announce the release of Nx 8.8 that includes support for 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.

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.

You can use the @nrwl/storybook package which contains a collection of schematics to set up Storybook configuration and a Cypress configuration to run UI tests against your stories.

After the @nrwl/storybook package is installed, you can use @nrwl/angular:storybook-configuration and @nrwl/react/storybook-configuration schematics to configure a specific library to use Storybook. For Angular, the storybook-configuration schematic generates Cypress configuration, with the option of generating stories, and tests specs for your components. The storybook-configuration for React also generates Cypress configuration.

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

New run-many command

Nx provides the nx print-affected command, to intelligently figure out which projects were affected by a given set of changes, and provide the associated build/test/lint tasks in JSON format. In your continuous integration environment, you use this information run these tasks across a set of machines. The run-many commands gives you the flexibility and control over which jobs to run.

For example, in a parent task you determine which projects were affected using nx print-affected, and split them into two sets of tasks. In your child tasks, use the run-many command to run the tasks across sets of machines.

nx run-many --target=test --projects=PROJS1 --parallel // machine 1
nx run-many --target=test --projects=PROJS2 --parallel // machine 2

UI and additional improvements

In addition to the new features, visual enhancements were added to the nx list command, displaying installed and available Nx plugins. Releases of the Angular framework, Angular CLI, and NgRx libraries were also updated.

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

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 50 % off our premium video course on advanced practices for Nx workspaces: here!
• Get our free basic Nx workspaces course on youtube!

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!