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 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 just 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
25Scaffold 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
75Serving 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
Building your Host
In the same vein, you can build your host by running:
❯
nx build shell