Micro-Frontends using Module Federation, presets for React and Storybook, TypeScript compiler plugins, and more in Nx 12.8!

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, nx.dev/react, and nx.dev/node.

Nx Conf is coming in September!

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 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, 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.

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.

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.

Storybook support has also been extended to projects using Web Components and Vue.

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:

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

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

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

And the compiled output included the bundle.

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

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 guide.

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

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

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:

nx migrate latest

After updating your dependencies, run any necessary migrations.

nx migrate --run-migrations

Explore More

• Get our free basic Nx workspaces course on YouTube!
• Purchase our premium video course on advanced practices for Nx workspaces: here!

Be sure to click the ❤️ so other people will see it. Follow us on Twitter, and subscribe to the YouTube Channel for more information on Angular, React, Nx, 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.