Nx Module Federation Technical Overview

Nx's Module Federation support is provided through a mixture ofexecutors and thewithModuleFederation() util that is used in yourwebpack.config orrspack.config file. Understanding what is happening under the hood can help when developing applications that use Module Federation as well as debugging any potential issues you run into. With Rspack, Module Federation support can also be provided through theNxModuleFederationPlugin andNxModuleFederationDevServerPlugin plugins that can be used in therspack.config file when utilizingInferred Tasks.

What happens when you serve your host?

When you serve your host application vianx serve host, the Nxmodule-federation-dev-server executor orNxModuleFederationDevServerPlugin is invoked. These do a few things that aim to provide a more holistic local development while ensuring a great DX (development experience).

Using Module Federation with SSR?

The same technique outlined below also applies to themodule-federation-ssr-dev-server and theNxModuleFederationSSRDevServerPlugin. This is important to know when it comes to deploying your SSR Module Federation application as it indicates that you can place the build artifacts from theremotes onto something like an Amazon S3 Bucket and yourhost will be able to find these files correctly.

The executor does the following:

  1. Finds all theremotes that thehost depends on.
  2. Determines whichremotes need to be served statically and which need to be served viawebpack-dev-server.
  3. For thestatic remotes, it will invokenx run-many -t build --projects={listOfStaticRemotes}.
  4. If required, it will move the built artifacts of eachremote to a common directory.
  5. It will runhttp-server at the common directory such that those files are available on the network from a single port.
  6. It will create proxy servers viaexpress listening on the ports where eachremoteshould be located (as configured in the host'smodule-federation.config.ts ormodule-federation.manifest.json file).
    • These proxy servers will proxy requests from the server to thehttp-server to fetch the correct files as requested by Module Federation.
  7. Only Applicable for Executor Usage: If the--devRemotes option has been passed, it will serve eachdev remote viawebpack-dev-server allowing for HMR and live reloading when working on those remotes.
  8. It will serve thehost viawebpack-dev-server.

If you prefer diagrams, the one below outlines the above steps.

Nx Module Federation Host Serve Flow

Using Module Federation with Continuous Tasks

Continuous Tasks are a new feature in Nx 21. Using Rspack Module Federation, you can now use Continuous Tasks to serve yourremotes andhost application.

Thanks to the benefits of Continuous Tasks, you no longer need to runnx serve host --devRemotes=remote to serve yourhost application with HMR enabled for your remote applications.
Instead, you can runnx serve remote and it will serve theremote along with yourhost application with HMR enabled.

This is a great way to develop your application locally and have a great DX. It also makes it easier to explain to your team how to work with Module Federation as there is no longer any special command required to serve their application.

Using Continuous Tasks with Webpack Module Federation?

Webpack Module Federation does not support Continuous Tasks. If you are using Webpack Module Federation, you should use the--devRemotes option to specify theremote you are currently developing; e.g.npx nx serve host --devRemotes=remote.

TheNxRuntimeLibraryControlPlugin

Previously, when using shared workspace libraries as part of your Module Federation application, there was a chance that the workspace library would be provided by one of thestatic remotes. This would cause issues where changes to those shared libraries would not be reflected in the locally served application.

To combat this issue, we developed theNxRuntimeLibraryControlPlugin. This is aRuntime Plugin that will ensure that workspace libraries are only shared via any activedev remote. This means that any changes to the shared library will be picked up bywebpack-dev-server and, as such, reflected in the locally served application.

This plugin is enabled by default, however, you can turn it off in yourmodule-federation.config file:

1exportconst config: ModuleFederationConfig = {2 ...,3disableNxRuntimeLibraryControlPlugin:true4}5