Nx 12.5 includes many new features, including Per-project configuration, Storybook support for Angular 12, and more!
Nx is a smart, extensible build framework to help you architect, test, and build at any scale - integrating seamlessly with modern technologies and libraries while providing a robust CLI, computation caching, dependency management, and more.
Traditionally, in Nx workspaces, configuration for all projects is all contained in
nx.json files. For medium to large workspaces, these can be a source of merge conflicts, and limiting for existing repository structures. We've wanted to make this more flexible and scale easier for a long time, and have introduced per-project configuration in Nx workspaces using
Project configurations can be independent files, referenced by
workspace.json. For instance, a
workspace.json may contain projects configured as below.
This tells Nx that all configuration for that project is found in the
libs/mylib/project.json file. This file contains a combination of the project's configuration from both
projects in the root
Independent project configurations provide more flexibility for projects, and less possibility of merge conflicts for larger workspaces. Integration and autocompletion still work as intended with Nx Console.
Generating new standalone projects is done by passing the
nx g @nrwl/react:app my-app --standaloneConfig
To convert your existing workspace to a per-project configuration, use the
nx g @nrwl/workspace:convert-to-nx-project --all
Alternatively, you can convert individual projects with the
nx g @nrwl/workspace:convert-to-nx-project --project my-project
Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. Nx has first-class support for Storybook with Angular. With the latest release of Nx, we support Angular version 12 with Storybook, and some updated support for moving from knobs to controls.
Storybook v6 moves from "knobs" to args and controls when it comes to defining and manipulating your storybook component properties. More can be found on the official Storybook docs.
From Nx v12.5 and on, the
@nrwl/storybook package will be using
@storybook/addon-controls instead of
@storybook/addon-knobs to generate stories.
- Generators will generate your Storybook configuration files and your Stories using Controls/args instead of knobs
storybook-configurationgenerator will install the
@storybook/addon-essentialspackage, part of which is
@storybook/addon-controls. This includes some more "essential" Storybook features such as docs. To disable features you do not need anytime in your
- Cypress e2e tests will be generated, using the args URL to set args in the controls.
- If you
nx migrateto the latest version, your
package.jsonwill be updated to include the
@storybook/addon-essentialsaddon will be added in your
addonsarray in your root
main.jsfile. You will need to run
npm/yarn installto have it installed.
- If you install manually the latest version of
@nrwl/react, you will need to manually do
yarn add -D @storybook/addon-essentials. You will also need to add the addon manually in your
addonsarray in your root
- All the stories you generate from that moment on will be using controls/args
- Your existing stories will not be touched and will still work.
The Nx dependency graph is the way to always get an instant view of the dependencies between projects in your Nx workspace. We've added the additional functionality of auto-refresh to the dependency graph, so you can see changes made to new and existing projects as they occur.
Keeping our documentation up-to-date is something we put a lot of work and effort into maintaining. We have revamped our Nx website, which is now built with Next.js!
This has also given us the ability to see new documentation change previews in pull requests, making the contribution process easier for our community of contributors.
- Jest 27 support
- Webpack 5 support for React, Next.js, and other non-Angular applications.
- Added utility methods for CSS purging with Tailwind
- Auto-sorting of common configuration files including
Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:
nx migrate latest
After updating your dependencies, run any necessary migrations.
nx migrate --run-migrations
- 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.