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 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/rspack.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
24Scaffold 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 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/rspack.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
24
25CREATE apps/react/with-remotes/remote1/src/app/app.spec.tsx
26CREATE apps/react/with-remotes/remote1/src/assets/.gitkeep
27CREATE apps/react/with-remotes/remote1/src/environments/environment.prod.ts
28CREATE apps/react/with-remotes/remote1/src/environments/environment.ts
29CREATE apps/react/with-remotes/remote1/src/favicon.ico
30CREATE apps/react/with-remotes/remote1/src/index.html
31CREATE apps/react/with-remotes/remote1/tsconfig.app.json
32CREATE apps/react/with-remotes/remote1/rspack.config.ts
33CREATE apps/react/with-remotes/remote1/.babelrc
34CREATE apps/react/with-remotes/remote1/src/app/nx-welcome.tsx
35CREATE apps/react/with-remotes/remote1/src/app/app.module.css
36CREATE apps/react/with-remotes/remote1/src/app/app.tsx
37CREATE apps/react/with-remotes/remote1/src/styles.css
38CREATE apps/react/with-remotes/remote1/tsconfig.json
39CREATE apps/react/with-remotes/remote1/project.json
40CREATE apps/react/with-remotes/remote1/.eslintrc.json
41CREATE apps/react/with-remotes/remote1/jest.config.ts
42CREATE apps/react/with-remotes/remote1/tsconfig.spec.json
43CREATE apps/react/with-remotes/remote1/src/bootstrap.tsx
44CREATE apps/react/with-remotes/remote1/module-federation.config.ts
45CREATE apps/react/with-remotes/remote1/src/main.ts
46CREATE apps/react/with-remotes/remote1/src/remote-entry.ts
47
48UPDATE tsconfig.base.json
49
50CREATE apps/react/with-remotes/remote2/src/app/app.spec.tsx
51CREATE apps/react/with-remotes/remote2/src/assets/.gitkeep
52CREATE apps/react/with-remotes/remote2/src/environments/environment.prod.ts
53CREATE apps/react/with-remotes/remote2/src/environments/environment.ts
54CREATE apps/react/with-remotes/remote2/src/favicon.ico
55CREATE apps/react/with-remotes/remote2/src/index.html
56CREATE apps/react/with-remotes/remote2/tsconfig.app.json
57CREATE apps/react/with-remotes/remote2/rspack.config.ts
58CREATE apps/react/with-remotes/remote2/.babelrc
59CREATE apps/react/with-remotes/remote2/src/app/nx-welcome.tsx
60CREATE apps/react/with-remotes/remote2/src/app/app.module.css
61CREATE apps/react/with-remotes/remote2/src/app/app.tsx
62CREATE apps/react/with-remotes/remote2/src/styles.css
63CREATE apps/react/with-remotes/remote2/tsconfig.json
64CREATE apps/react/with-remotes/remote2/project.json
65CREATE apps/react/with-remotes/remote2/.eslintrc.json
66CREATE apps/react/with-remotes/remote2/jest.config.ts
67CREATE apps/react/with-remotes/remote2/tsconfig.spec.json
68CREATE apps/react/with-remotes/remote2/src/bootstrap.tsx
69CREATE apps/react/with-remotes/remote2/module-federation.config.ts
70CREATE apps/react/with-remotes/remote2/src/main.ts
71CREATE apps/react/with-remotes/remote2/src/remote-entry.ts
72Serving 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": ["remote1", "remote2"]
4}
5