Nuxtstop

For all things nuxt.js

Per-project configuration, Storybook support for Angular 12, auto-refresh for Dependency Graph, and more in Nx 12.5!

#angular #storybook #nx #monorepo
Per-project configuration, Storybook support for Angular 12, auto-refresh for Dependency Graph, and more in Nx 12.5!
9 0

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.

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

Per-project Configuration

Traditionally, in Nx workspaces, configuration for all projects is all contained in workspace.json and 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.json files.

Project-specific configuration files

Project configurations can be independent files, referenced by workspace.json. For instance, a workspace.json may contain projects configured as below.

{
  "projects": {
    "mylib": "libs/mylib"
  }
}
Enter fullscreen mode Exit fullscreen mode

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 workspace.json and nx.json, making projects in the root nx.json optional.

{
  "root": "libs/mylib/",
  "sourceRoot": "libs/mylib/src",
  "projectType": "library",
  "targets": {},
  "tags": [],
  "implicitDependencies": []
}
Enter fullscreen mode Exit fullscreen mode

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 --standaloneConfig flag.

nx g @nrwl/react:app my-app --standaloneConfig
Enter fullscreen mode Exit fullscreen mode

To convert your existing workspace to a per-project configuration, use the convert-to-nx-project generator.

nx g @nrwl/workspace:convert-to-nx-project --all
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can convert individual projects with the --project flag.

nx g @nrwl/workspace:convert-to-nx-project --project my-project
Enter fullscreen mode Exit fullscreen mode

Storybook Support for Angular 12

Storybook logo

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.

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.

For new Nx workspaces

  • Generators will generate your Storybook configuration files and your Stories using Controls/args instead of knobs
  • The storybook-configuration generator will install the @storybook/addon-essentials package, 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 main.js.
  • Cypress e2e tests will be generated, using the args URL to set args in the controls.

For existing Nx workspaces

  • If you nx migrate to the latest version, your package.json will be updated to include the @storybook/addon-essentials package. The @storybook/addon-essentials addon will be added in your addons array in your root main.js file. You will need to run npm/yarn install to have it installed.
  • If you install manually the latest version of @nrwl/storybook, @nrwl/workspace and @nrwl/angular or @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 addons array in your root main.js file.
  • 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.

Dependency Graph Auto-Refresh

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.

Nx dep graph watch mode

New Nx Docs website

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!

New nx.dev website

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.

Other Highlights

  • 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 nx.json, workspace.json, and tsconfig.base.json.

How to Update Nx

Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:

nx migrate latest
Enter fullscreen mode Exit fullscreen mode

After updating your dependencies, run any necessary migrations.

nx migrate --run-migrations
Enter fullscreen mode Exit fullscreen mode

Explore More

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.

Add comment