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/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 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