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:

~/workspace

nx g @nx/react:remote myremote --directory=apps/react/myremote

1NX Generating @nx/react:remote 2 3CREATE apps/react/myremote/src/app/app.spec.tsx 4CREATE apps/react/myremote/src/assets/.gitkeep 5CREATE apps/react/myremote/src/environments/environment.prod.ts 6CREATE apps/react/myremote/src/environments/environment.ts 7CREATE apps/react/myremote/src/favicon.ico 8CREATE apps/react/myremote/src/index.html 9CREATE apps/react/myremote/tsconfig.app.json 10CREATE apps/react/myremote/webpack.config.ts 11CREATE apps/react/myremote/.babelrc 12CREATE apps/react/myremote/src/app/nx-welcome.tsx 13CREATE apps/react/myremote/src/app/app.module.css 14CREATE apps/react/myremote/src/app/app.tsx 15CREATE apps/react/myremote/src/styles.css 16CREATE apps/react/myremote/tsconfig.json 17CREATE apps/react/myremote/project.json 18CREATE apps/react/myremote/.eslintrc.json 19CREATE apps/react/myremote/jest.config.ts 20CREATE apps/react/myremote/tsconfig.spec.json 21CREATE apps/react/myremote/src/bootstrap.tsx 22CREATE apps/react/myremote/module-federation.config.ts 23CREATE apps/react/myremote/src/main.ts 24CREATE apps/react/myremote/src/remote-entry.ts 25CREATE apps/react/myremote/webpack.config.prod.ts 26UPDATE tsconfig.base.json 27
Nx 15 and lower use @nrwl/ instead of @nx/

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.

apps/react/shell/module-federation.config.ts
1import { ModuleFederationConfig } from '@nx/webpack'; 2 3const config: ModuleFederationConfig = { 4 name: 'shell', 5 remotes: ['myremote'], // <-- add the name of your remote to the remotes array 6}; 7export default config; 8
Nx 15 and lower use @nrwl/ instead of @nx/
Creating a Host

If you do not already have a host application in your workspace, look at the Create a Host Recipe for more information on how to achieve this.

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:

~/workspace

nx g @nx/react:remote myremote --directory=apps/react/myremote --host=shell

1NX Generating @nx/react:remote 2 3CREATE apps/react/myremote/src/app/app.spec.tsx 4CREATE apps/react/myremote/src/assets/.gitkeep 5CREATE apps/react/myremote/src/environments/environment.prod.ts 6CREATE apps/react/myremote/src/environments/environment.ts 7CREATE apps/react/myremote/src/favicon.ico 8CREATE apps/react/myremote/src/index.html 9CREATE apps/react/myremote/tsconfig.app.json 10CREATE apps/react/myremote/webpack.config.ts 11CREATE apps/react/myremote/.babelrc 12CREATE apps/react/myremote/src/app/nx-welcome.tsx 13CREATE apps/react/myremote/src/app/app.module.css 14CREATE apps/react/myremote/src/app/app.tsx 15CREATE apps/react/myremote/src/styles.css 16CREATE apps/react/myremote/tsconfig.json 17CREATE apps/react/myremote/project.json 18CREATE apps/react/myremote/.eslintrc.json 19CREATE apps/react/myremote/jest.config.ts 20CREATE apps/react/myremote/tsconfig.spec.json 21CREATE apps/react/myremote/src/bootstrap.tsx 22CREATE apps/react/myremote/module-federation.config.ts 23CREATE apps/react/myremote/src/main.ts 24CREATE apps/react/myremote/src/remote-entry.ts 25CREATE apps/react/myremote/webpack.config.prod.ts 26UPDATE apps/react/shell/module-federation.config.ts 27UPDATE tsconfig.base.json 28
Nx 15 and lower use @nrwl/ instead of @nx/

Building your Remote

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

nx build myremote

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:

nx serve myremote

nx serve-static myremote

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.

This has been further expanded upon. When you serve the host application, Nx will build (or pull from cache) your remote applications and serve them all via a single file server, to further reduce resource consumption.

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:

nx serve host --devRemotes=myremote

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