Creating a Remote

In the concept of Module Federation a remote is the term given to an application that exposes modules that can be shared to and consumed by host applications.
This is the key difference between a remote and host.

• A remote exposes modules that can be consumed
• A host consumes exposed modules

Nx includes first-class support for helping you to scaffold a Module Federation Architecture for your React and Angular application(s).

Generating a Remote

To generate a remote application in your workspace, run the following command:

After the remote application is generated, you can then update your host application's Module Federation Config File to specify that it can consume federated modules from this remote.

Let Nx add your Remote to your Host

The remote generators also allow you to specify a --host option, which will allow the generator to add your remote to your host automatically. This can save you time by skipping the manual step above.
The command would look like the following:

Building your Remote

Your remote application acts like any other application in the context of Nx, and therefore building it as simple as running:

Serving your Remote

The remote application is generated with two serve-like targets. These are:

• serve
• serve-static

They can be run as usual with Nx:

Serve Target

The serve target will use webpack-dev-server to serve your application, allowing for HMR and Live Reload. This is useful when you're working locally on that specific remote application.

Serve-Static Target

The serve-static target will first build your application, storing the build artifact in the defined output directory (usually dist/path/to/remote). It will then use http-server to serve the built application locally.
This is less memory and CPU intensive than webpack-dev-server but it does not support HMR or Live Reload.

The purpose of the serve-static target is to allow you to serve your host application, along with all of the remote applications it depends on without being too resource intensive.

Serving your Remote via your Host

Generally, your host is the main application that you deploy and that users visit. It consumes modules from remote applications, but those remote applications are usually never visited directly by a user.
Therefore, to support developing your application in a manner that replicates how users use the application, when serving a host application, Nx will serve all the dependent remotes automatically.

By default, the dependent remote applications will be served via the serve-static command. However, if you are working on a specific remote application, you can tell Nx to serve the host application and any number of remote applications via the webpack-dev-server allowing those remote applications to take advantage of HMR and Live Reloading as you work on them.

To do this, run the command:

This informs Nx to run the serve command of myremote, rather than the serve-static command.