Creating a Module Federation Host
Ahost is the term withinModule Federation given to an application that loads and consumes federated modules fromremotes. 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
Section titled “Generating a Host”To generate only a host application in your workspace, run the following command:
NX Generating @nx/react:hostCREATE apps/react/shell/src/app/app.spec.tsxCREATE apps/react/shell/src/assets/.gitkeepCREATE apps/react/shell/src/environments/environment.prod.tsCREATE apps/react/shell/src/environments/environment.tsCREATE apps/react/shell/src/favicon.icoCREATE apps/react/shell/src/index.htmlCREATE apps/react/shell/tsconfig.app.jsonCREATE apps/react/shell/rspack.config.tsCREATE apps/react/shell/.babelrcCREATE apps/react/shell/src/app/nx-welcome.tsxCREATE apps/react/shell/src/app/app.module.cssCREATE apps/react/shell/src/app/app.tsxCREATE apps/react/shell/src/styles.cssCREATE apps/react/shell/tsconfig.jsonCREATE apps/react/shell/project.jsonCREATE apps/react/shell/.eslintrc.jsonCREATE apps/react/shell/jest.config.tsCREATE apps/react/shell/tsconfig.spec.jsonCREATE apps/react/shell/src/bootstrap.tsxCREATE apps/react/shell/module-federation.config.tsCREATE apps/react/shell/src/main.tsNX Generating @nx/angular:hostCREATE apps/angular/shell/project.jsonCREATE apps/angular/shell/src/assets/.gitkeepCREATE apps/angular/shell/src/favicon.icoCREATE apps/angular/shell/src/index.htmlCREATE apps/angular/shell/src/styles.cssCREATE apps/angular/shell/tsconfig.app.jsonCREATE apps/angular/shell/tsconfig.jsonCREATE apps/angular/shell/src/app/app.cssCREATE apps/angular/shell/src/app/app.htmlCREATE apps/angular/shell/src/app/app.spec.tsCREATE apps/angular/shell/src/app/app.tsCREATE apps/angular/shell/src/app/app.routes.tsCREATE apps/angular/shell/src/app/nx-welcome.tsCREATE apps/angular/shell/src/main.tsCREATE apps/angular/shell/.eslintrc.jsonCREATE apps/angular/shell/jest.config.tsCREATE apps/angular/shell/src/test-setup.tsCREATE apps/angular/shell/tsconfig.spec.jsonCREATE apps/angular/shell/module-federation.config.tsCREATE apps/angular/shell/webpack.config.tsCREATE apps/angular/shell/webpack.prod.config.tsCREATE apps/angular/shell/src/bootstrap.tsScaffold a Host with Remotes
Section titled “Scaffold a Host with Remotes”To scaffold a host application along with remote applications in your workspace, run the following command:
NX Generating @nx/react:hostCREATE apps/react/with-remotes/shell/src/app/app.spec.tsxCREATE apps/react/with-remotes/shell/src/assets/.gitkeepCREATE apps/react/with-remotes/shell/src/environments/environment.prod.tsCREATE apps/react/with-remotes/shell/src/environments/environment.tsCREATE apps/react/with-remotes/shell/src/favicon.icoCREATE apps/react/with-remotes/shell/src/index.htmlCREATE apps/react/with-remotes/shell/tsconfig.app.jsonCREATE apps/react/with-remotes/shell/rspack.config.tsCREATE apps/react/with-remotes/shell/.babelrcCREATE apps/react/with-remotes/shell/src/app/nx-welcome.tsxCREATE apps/react/with-remotes/shell/src/app/app.module.cssCREATE apps/react/with-remotes/shell/src/app/app.tsxCREATE apps/react/with-remotes/shell/src/styles.cssCREATE apps/react/with-remotes/shell/tsconfig.jsonCREATE apps/react/with-remotes/shell/project.jsonCREATE apps/react/with-remotes/shell/.eslintrc.jsonCREATE apps/react/with-remotes/shell/jest.config.tsCREATE apps/react/with-remotes/shell/tsconfig.spec.jsonCREATE apps/react/with-remotes/shell/src/bootstrap.tsxCREATE apps/react/with-remotes/shell/module-federation.config.tsCREATE apps/react/with-remotes/shell/src/main.tsCREATE apps/react/with-remotes/remote1/src/app/app.spec.tsxCREATE apps/react/with-remotes/remote1/src/assets/.gitkeepCREATE apps/react/with-remotes/remote1/src/environments/environment.prod.tsCREATE apps/react/with-remotes/remote1/src/environments/environment.tsCREATE apps/react/with-remotes/remote1/src/favicon.icoCREATE apps/react/with-remotes/remote1/src/index.htmlCREATE apps/react/with-remotes/remote1/tsconfig.app.jsonCREATE apps/react/with-remotes/remote1/rspack.config.tsCREATE apps/react/with-remotes/remote1/.babelrcCREATE apps/react/with-remotes/remote1/src/app/nx-welcome.tsxCREATE apps/react/with-remotes/remote1/src/app/app.module.cssCREATE apps/react/with-remotes/remote1/src/app/app.tsxCREATE apps/react/with-remotes/remote1/src/styles.cssCREATE apps/react/with-remotes/remote1/tsconfig.jsonCREATE apps/react/with-remotes/remote1/project.jsonCREATE apps/react/with-remotes/remote1/.eslintrc.jsonCREATE apps/react/with-remotes/remote1/jest.config.tsCREATE apps/react/with-remotes/remote1/tsconfig.spec.jsonCREATE apps/react/with-remotes/remote1/src/bootstrap.tsxCREATE apps/react/with-remotes/remote1/module-federation.config.tsCREATE apps/react/with-remotes/remote1/src/main.tsCREATE apps/react/with-remotes/remote1/src/remote-entry.tsUPDATE tsconfig.base.jsonCREATE apps/react/with-remotes/remote2/src/app/app.spec.tsxCREATE apps/react/with-remotes/remote2/src/assets/.gitkeepCREATE apps/react/with-remotes/remote2/src/environments/environment.prod.tsCREATE apps/react/with-remotes/remote2/src/environments/environment.tsCREATE apps/react/with-remotes/remote2/src/favicon.icoCREATE apps/react/with-remotes/remote2/src/index.htmlCREATE apps/react/with-remotes/remote2/tsconfig.app.jsonCREATE apps/react/with-remotes/remote2/rspack.config.tsCREATE apps/react/with-remotes/remote2/.babelrcCREATE apps/react/with-remotes/remote2/src/app/nx-welcome.tsxCREATE apps/react/with-remotes/remote2/src/app/app.module.cssCREATE apps/react/with-remotes/remote2/src/app/app.tsxCREATE apps/react/with-remotes/remote2/src/styles.cssCREATE apps/react/with-remotes/remote2/tsconfig.jsonCREATE apps/react/with-remotes/remote2/project.jsonCREATE apps/react/with-remotes/remote2/.eslintrc.jsonCREATE apps/react/with-remotes/remote2/jest.config.tsCREATE apps/react/with-remotes/remote2/tsconfig.spec.jsonCREATE apps/react/with-remotes/remote2/src/bootstrap.tsxCREATE apps/react/with-remotes/remote2/module-federation.config.tsCREATE apps/react/with-remotes/remote2/src/main.tsCREATE apps/react/with-remotes/remote2/src/remote-entry.ts> NX Generating @nx/angular:hostCREATE apps/angular/with-remotes/shell/project.jsonCREATE apps/angular/with-remotes/shell/src/assets/.gitkeepCREATE apps/angular/with-remotes/shell/src/favicon.icoCREATE apps/angular/with-remotes/shell/src/index.htmlCREATE apps/angular/with-remotes/shell/src/styles.cssCREATE apps/angular/with-remotes/shell/tsconfig.app.jsonCREATE apps/angular/with-remotes/shell/tsconfig.jsonCREATE apps/angular/with-remotes/shell/src/app/app.cssCREATE apps/angular/with-remotes/shell/src/app/app.htmlCREATE apps/angular/with-remotes/shell/src/app/app.spec.tsCREATE apps/angular/with-remotes/shell/src/app/app.tsCREATE apps/angular/with-remotes/shell/src/app/app.routes.tsCREATE apps/angular/with-remotes/shell/src/app/nx-welcome.tsCREATE apps/angular/with-remotes/shell/src/main.tsCREATE apps/angular/with-remotes/shell/.eslintrc.jsonCREATE apps/angular/with-remotes/shell/jest.config.tsCREATE apps/angular/with-remotes/shell/src/test-setup.tsCREATE apps/angular/with-remotes/shell/tsconfig.spec.jsonCREATE apps/angular/with-remotes/shell/module-federation.config.tsCREATE apps/angular/with-remotes/shell/webpack.config.tsCREATE apps/angular/with-remotes/shell/webpack.prod.config.tsCREATE apps/angular/with-remotes/shell/src/bootstrap.tsCREATE apps/angular/with-remotes/ng-remote1/project.jsonCREATE apps/angular/with-remotes/ng-remote1/src/assets/.gitkeepCREATE apps/angular/with-remotes/ng-remote1/src/favicon.icoCREATE apps/angular/with-remotes/ng-remote1/src/index.htmlCREATE apps/angular/with-remotes/ng-remote1/src/styles.cssCREATE apps/angular/with-remotes/ng-remote1/tsconfig.app.jsonCREATE apps/angular/with-remotes/ng-remote1/tsconfig.jsonCREATE apps/angular/with-remotes/ng-remote1/src/app/app.tsCREATE apps/angular/with-remotes/ng-remote1/src/app/app.routes.tsCREATE apps/angular/with-remotes/ng-remote1/src/main.tsCREATE apps/angular/with-remotes/ng-remote1/.eslintrc.jsonCREATE apps/angular/with-remotes/ng-remote1/jest.config.tsCREATE apps/angular/with-remotes/ng-remote1/src/test-setup.tsCREATE apps/angular/with-remotes/ng-remote1/tsconfig.spec.jsonCREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.tsCREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.routes.tsCREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/nx-welcome.tsCREATE apps/angular/with-remotes/ng-remote1/module-federation.config.tsCREATE apps/angular/with-remotes/ng-remote1/webpack.config.tsCREATE apps/angular/with-remotes/ng-remote1/webpack.prod.config.tsCREATE apps/angular/with-remotes/ng-remote1/src/bootstrap.tsUPDATE tsconfig.base.jsonCREATE apps/angular/with-remotes/ng-remote2/project.jsonCREATE apps/angular/with-remotes/ng-remote2/src/assets/.gitkeepCREATE apps/angular/with-remotes/ng-remote2/src/favicon.icoCREATE apps/angular/with-remotes/ng-remote2/src/index.htmlCREATE apps/angular/with-remotes/ng-remote2/src/styles.cssCREATE apps/angular/with-remotes/ng-remote2/tsconfig.app.jsonCREATE apps/angular/with-remotes/ng-remote2/tsconfig.jsonCREATE apps/angular/with-remotes/ng-remote2/src/app/app.tsCREATE apps/angular/with-remotes/ng-remote2/src/app/app.routes.tsCREATE apps/angular/with-remotes/ng-remote2/src/main.tsCREATE apps/angular/with-remotes/ng-remote2/.eslintrc.jsonCREATE apps/angular/with-remotes/ng-remote2/jest.config.tsCREATE apps/angular/with-remotes/ng-remote2/src/test-setup.tsCREATE apps/angular/with-remotes/ng-remote2/tsconfig.spec.jsonCREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.tsCREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.routes.tsCREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/nx-welcome.tsCREATE apps/angular/with-remotes/ng-remote2/module-federation.config.tsCREATE apps/angular/with-remotes/ng-remote2/webpack.config.tsCREATE apps/angular/with-remotes/ng-remote2/webpack.prod.config.tsCREATE apps/angular/with-remotes/ng-remote2/src/bootstrap.tsServing your Host
Section titled “Serving your Host”Yourhost application acts like any other application in the context of Nx, and therefore serving it locally is as simple as running:
nxserveshellWhen you serve yourhost, 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 ofwhat happens when you serve your host.
Building your Host
Section titled “Building your Host”In the same vein, you can build your host by running:
nxbuildshellTo supportIndependent Deployabilityhost applications do not haveimplicitDependencies set in theirproject.json. If you want to build all yourremotes when you build yourhost, addimplicitDependencies to yourhost'sproject.json with eachremote listed:
{...,"implicitDependencies": ["remote1","remote2"]}