Creating a Host

A host is the term within Module Federation given to an application that loads and consumes federated modules from remotes. At build time, these modules do not exist and are instead fetched via a network request and executed at runtime. It can be likened to a modern-day approach to iframes.
A host can be configured to know the location of the federated modules at build time (called Static Federation) or it can employ a mechanism to discover the location of the federated modules at runtime, usually on startup (called Dynamic Federation).

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

Generating a Host

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

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

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

Scaffold a Host with Remotes

To scaffold a host application along with remote applications in your workspace, run the following command:

nx g @nx/react:host shell-with-remotes --directory=apps/react/with-remotes/shell --remotes=remote1,remote2

1NX Generating @nx/react:host 2 3CREATE apps/react/with-remotes/shell/src/app/app.spec.tsx 4CREATE apps/react/with-remotes/shell/src/assets/.gitkeep 5CREATE apps/react/with-remotes/shell/src/environments/environment.prod.ts 6CREATE apps/react/with-remotes/shell/src/environments/environment.ts 7CREATE apps/react/with-remotes/shell/src/favicon.ico 8CREATE apps/react/with-remotes/shell/src/index.html 9CREATE apps/react/with-remotes/shell/tsconfig.app.json 10CREATE apps/react/with-remotes/shell/webpack.config.ts 11CREATE apps/react/with-remotes/shell/.babelrc 12CREATE apps/react/with-remotes/shell/src/app/nx-welcome.tsx 13CREATE apps/react/with-remotes/shell/src/app/app.module.css 14CREATE apps/react/with-remotes/shell/src/app/app.tsx 15CREATE apps/react/with-remotes/shell/src/styles.css 16CREATE apps/react/with-remotes/shell/tsconfig.json 17CREATE apps/react/with-remotes/shell/project.json 18CREATE apps/react/with-remotes/shell/.eslintrc.json 19CREATE apps/react/with-remotes/shell/jest.config.ts 20CREATE apps/react/with-remotes/shell/tsconfig.spec.json 21CREATE apps/react/with-remotes/shell/src/bootstrap.tsx 22CREATE apps/react/with-remotes/shell/module-federation.config.ts 23CREATE apps/react/with-remotes/shell/src/main.ts 24CREATE apps/react/with-remotes/shell/webpack.config.prod.ts 25 26CREATE apps/react/with-remotes/remote1/src/app/app.spec.tsx 27CREATE apps/react/with-remotes/remote1/src/assets/.gitkeep 28CREATE apps/react/with-remotes/remote1/src/environments/environment.prod.ts 29CREATE apps/react/with-remotes/remote1/src/environments/environment.ts 30CREATE apps/react/with-remotes/remote1/src/favicon.ico 31CREATE apps/react/with-remotes/remote1/src/index.html 32CREATE apps/react/with-remotes/remote1/tsconfig.app.json 33CREATE apps/react/with-remotes/remote1/webpack.config.ts 34CREATE apps/react/with-remotes/remote1/.babelrc 35CREATE apps/react/with-remotes/remote1/src/app/nx-welcome.tsx 36CREATE apps/react/with-remotes/remote1/src/app/app.module.css 37CREATE apps/react/with-remotes/remote1/src/app/app.tsx 38CREATE apps/react/with-remotes/remote1/src/styles.css 39CREATE apps/react/with-remotes/remote1/tsconfig.json 40CREATE apps/react/with-remotes/remote1/project.json 41CREATE apps/react/with-remotes/remote1/.eslintrc.json 42CREATE apps/react/with-remotes/remote1/jest.config.ts 43CREATE apps/react/with-remotes/remote1/tsconfig.spec.json 44CREATE apps/react/with-remotes/remote1/src/bootstrap.tsx 45CREATE apps/react/with-remotes/remote1/module-federation.config.ts 46CREATE apps/react/with-remotes/remote1/src/main.ts 47CREATE apps/react/with-remotes/remote1/src/remote-entry.ts 48CREATE apps/react/with-remotes/remote1/webpack.config.prod.ts 49 50UPDATE tsconfig.base.json 51 52CREATE apps/react/with-remotes/remote2/src/app/app.spec.tsx 53CREATE apps/react/with-remotes/remote2/src/assets/.gitkeep 54CREATE apps/react/with-remotes/remote2/src/environments/environment.prod.ts 55CREATE apps/react/with-remotes/remote2/src/environments/environment.ts 56CREATE apps/react/with-remotes/remote2/src/favicon.ico 57CREATE apps/react/with-remotes/remote2/src/index.html 58CREATE apps/react/with-remotes/remote2/tsconfig.app.json 59CREATE apps/react/with-remotes/remote2/webpack.config.ts 60CREATE apps/react/with-remotes/remote2/.babelrc 61CREATE apps/react/with-remotes/remote2/src/app/nx-welcome.tsx 62CREATE apps/react/with-remotes/remote2/src/app/app.module.css 63CREATE apps/react/with-remotes/remote2/src/app/app.tsx 64CREATE apps/react/with-remotes/remote2/src/styles.css 65CREATE apps/react/with-remotes/remote2/tsconfig.json 66CREATE apps/react/with-remotes/remote2/project.json 67CREATE apps/react/with-remotes/remote2/.eslintrc.json 68CREATE apps/react/with-remotes/remote2/jest.config.ts 69CREATE apps/react/with-remotes/remote2/tsconfig.spec.json 70CREATE apps/react/with-remotes/remote2/src/bootstrap.tsx 71CREATE apps/react/with-remotes/remote2/module-federation.config.ts 72CREATE apps/react/with-remotes/remote2/src/main.ts 73CREATE apps/react/with-remotes/remote2/src/remote-entry.ts 74CREATE apps/react/with-remotes/remote2/webpack.config.prod.ts 75

Serving your Host

Your host application acts like any other application in the context of Nx, and therefore serving it locally is as simple as running:

nx serve shell

When you serve your host, Nx will discover any dependent remote applications that are also in the workspace and serve them statically. To learn more about check out our in-depth breakdown of what happens when you serve your host.

Building your Host

In the same vein, you can build your host by running:

nx build shell

To support Independent Deployability host applications do not have implicitDependencies set in their project.json. If you want to build all your remotes when you build your host, add implicitDependencies to your host's project.json with each remote listed:

1{ 2 ..., 3 "implicitDependencies": ["remote-one", "remote-two"] 4} 5