Micro-Frontends using Module Federation, presets for React and Storybook, TypeScript compiler plugins, and more in Nx 12.8!
Tags: nx, angular, react, nestjs
Published: 2021-08-25 15:06:05

Nx 12.8 includes many fixes, and new features, including support for Micro-frontends using Module Federation and Angular, presets for React and Storybook, support for TypeScript compiler plugins, 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).

---

## Nx Conf is coming in September!

![Nx Conf logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc508ozllaqjeva79dt4.jpeg)

Nx Conf is a new, online & free-to-attend, 2-day conference featuring members of the Nx team and community. Join us as we share our ideas and expertise about making development faster, more scalable, and more collaborative.

In addition to the conference there will be a **2-day workshop on September 14th and 15th** on **How to Develop at Scale with Nx Monorepos**, presented by members of the Nx Core Team. Workshop registration is $800 per attendee.

Grab your [FREE Nx Conf ticket](https://ti.to/nrwl/nx-conf-2021?utm_source=devto) and save your workshop seat today!

---

## Support for Micro-frontends with Module Federation and Angular

Webpack 5 introduced a Module Federation Plugin enabling multiple, independently built and deployed bundles of code to form a single application. This is the foundation of Micro-Frontend Architecture and the Module Federation Plugin makes implementing such an architecture much simpler.

Building on top of the work down by [Manfred Steyer and the community](https://github.com/angular-architects/module-federation-plugin/blob/main/libs/mf/README.md), we have updated our Angular executors and generators to better support this use case out of the box. 

Colum Ferry does a walkthrough of starting a Micro-Frontend project with Angular in the video below.

{% youtube e8-hBYw5bx0 %}

This makes getting up and running with Module Federation more manageable and consistent at scale, allow you to scaffold and build a Micro-Frontend Architecture from a monorepo with all the additional benefits of Nx.

Read more in our guide on [how to setup a Micro-Frontend with Angular](https://nx.dev/latest/angular/guides/setup-mfe-with-angular).

---

## Preset for React and Storybook

In Nx 12.7, we added a dedicated Storybook preset for React which dramatically simplifies the Storybook setup and makes sure that Storybook uses the same Webpack configuration as your React applications running within an Nx workspace.

Here are the main differences to the previous versions of Nx:

- No additional webpack.config.js needed; Custom webpack configurations can be added in the `webpackFinal` property of the `main.js` file.
- The `main.js` file now contains a predefined Storybook preset exported by `@nrwl/react/plugins/storybook`.

The video below by Juri Strumpflohner gives a walkthrough of the new feature to simplify the Storybook and React setup.

{% youtube oUE74McS_NY %}

Storybook support has also been extended to projects using Web Components and [Vue](https://vuejs.org).

---

## Support for TypeScript compiler plugins with NestJS

TypeScript Plugins are quite popular as they allow plugin authors to alter the code of the consumers using an Abstract Syntax Tree (AST). The TypeScript Transformer API hooks into the TypeScript transform process. 

To better support this, Nx now supports adding TypeScript compiler plugins to the `build` config for Node/NestJS projects.

An example would be using the NestJS Swagger plugin to generate DTOs.

First, install the `@nestjs/swagger` package:

```sh
npm install @nestjs/swagger@4.8.2 --save-dev
```

Next, add the `@nestjs/swagger/plugin` to the `tsPlugins` array in your `build` target options:

{% gist https://gist.github.com/brandonroberts/df9dccb10df6515f9b6913d1ea84e3e8 %}

An example DTO below shows the class before the plugin ins applied.

{% gist https://gist.github.com/brandonroberts/acaf9f74b6119e042af4f8e4c1d68bb8 %}

And the compiled output included the bundle.

{% gist https://gist.github.com/brandonroberts/c1828e18c89c1b7c79b89f5d416334b0 %}

Watch a more detailed walkthrough from Chau Tran using compiler plugins with NestJS and Swagger.

{% youtube Ct_ybXIN8rI %}

---

## New npm preset for workspaces

There is a misconception that Nx is best for apps and, it is not used for publishing to npm. The Nx repo itself, which consists primarily out of publishable packages, is built with Nx.

The publishable `npm` use case has always worked well, but in 12.8 we added a new preset `npm` that creates a new workspace closer to what you're familiar with. It's pre-configured for when you want to use Nx in combination with `npm`, `yarn`, or `pnpm` workspaces. 

Use the `npm` preset when creating a new workspace.

```
npx create-nx-workspace --preset=npm
```

If you already have an existing workspace with publishable packages, you can add Nx to it by running:

```
npx add-nx-to-monorepo
```

This adds a minimal amount of packages and configuration for Nx to be integrated into your existing workspace. This gives you all the benefits of Nx, without having to go "all-in" and keeping your existing structure in place. 

Read more in our [Nx and Lerna/Yarn Workspace](https://nx.dev/latest/react/guides/lerna-and-nx) guide.

We've also minimized the amount of scripts and dependencies added for new workspaces.

{% gist https://gist.github.com/brandonroberts/09ebeacd5f8bc2c14430a9eaef0f2b8e %}

You can always find the full list of commands by using the `help` option.

```sh
npx nx --help
```

---

## Other Highlights

- Refreshed guides and documentation.
- Support has been added for Next.js 11.1.
- Support has been added for Cypress 8.x.
- Added fast refresh support for Webpack 5 with React.
- Added `--changedSince` flag to jest runner for React.
- The computation cache directory can now be set with an environment variable.
- Nx now detects the package manager used to create new workspaces and installs the dependencies using that package manager, whether it be `npm`, `yarn`, or `pnpm`.

---

## 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)!

---

Be sure to click the :heart: so other people will see it. Follow us [on Twitter](https://twitter.com/NxDevTools), and subscribe to the [YouTube Channel](https://youtube.com/nrwl_io?sub_confirmation=1) for more information on [Angular](https://angular.io), [React](https://reactjs.org), [Nx](https://nx.dev), and 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](https://nrwl.io/services/consulting).