Per-project configuration, Storybook support for Angular 12, auto-refresh for Dependency Graph, and more in Nx 12.5!
Tags: angular, storybook, nx, monorepo
Published: 2021-06-28 18:16:40

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](https://nx.dev/angular), [nx.dev/react](https://nx.dev/react), and [nx.dev/node](https://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.

```json
{
  "projects": {
    "mylib": "libs/mylib"
  }
}
```

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.

```json
{
  "root": "libs/mylib/",
  "sourceRoot": "libs/mylib/src",
  "projectType": "library",
  "targets": {},
  "tags": [],
  "implicitDependencies": []
}
```

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.

```sh
nx g @nrwl/react:app my-app --standaloneConfig
```

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

```bash
nx g @nrwl/workspace:convert-to-nx-project --all
```

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

```bash
nx g @nrwl/workspace:convert-to-nx-project --project my-project
```

---

## Storybook Support for Angular 12

![Storybook logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nptrmhjjjambmvcjb9z.png)

[Storybook](https://storybook.js.org) 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](https://storybook.js.org/docs/react/writing-stories/args).

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`](https://storybook.js.org/docs/riot/essentials/introduction) 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](https://storybook.js.org/docs/riot/essentials/introduction#disabling-addons) anytime in your `main.js`.
- Cypress e2e tests will be generated, [using the args URL](https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzaty8xuool2a4ogf1hh.gif)

---

## 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](https://nextjs.org)!

![New nx.dev website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eot3e64n9z8txxb9pjaw.png)

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:

```sh
nx migrate latest
```

After updating your dependencies, run any necessary migrations.

```sh
nx migrate --run-migrations
```
---

## Explore More

- Get our [free basic Nx workspaces course on YouTube](https://youtu.be/2mYLe9Kp9VM)!
- Purchase our premium video course on advanced practices for Nx workspaces: [here](https://nxplaybook.com/p/advanced-nx-workspaces)!

---

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](https://nrwl.io/services/consulting).