From 6fbdc332b1460af8feb0a1a1d96cea1bfe979bff Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Mon, 16 Oct 2023 15:39:05 +0100 Subject: [PATCH] docs(misc): add create a host module federation doc (#19629) --- docs/generated/manifests/menus.json | 42 +++ docs/generated/manifests/nx.json | 52 ++++ docs/map.json | 13 + .../module-federation/creating-a-host.md | 270 ++++++++++++++++++ docs/shared/reference/sitemap.md | 2 + 5 files changed, 379 insertions(+) create mode 100644 docs/shared/recipes/module-federation/creating-a-host.md diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 5f632c9908c78..ec062b4a8ced4 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -1911,6 +1911,23 @@ ], "disableCollapsible": false }, + { + "name": "Module Federation", + "path": "/recipes/module-federation", + "id": "module-federation", + "isExternal": false, + "children": [ + { + "name": "How to create a Module Federation Host Application", + "path": "/recipes/module-federation/create-a-host", + "id": "create-a-host", + "isExternal": false, + "children": [], + "disableCollapsible": false + } + ], + "disableCollapsible": false + }, { "name": "Enforce Module Boundaries", "path": "/recipes/enforce-module-boundaries", @@ -3260,6 +3277,31 @@ "children": [], "disableCollapsible": false }, + { + "name": "Module Federation", + "path": "/recipes/module-federation", + "id": "module-federation", + "isExternal": false, + "children": [ + { + "name": "How to create a Module Federation Host Application", + "path": "/recipes/module-federation/create-a-host", + "id": "create-a-host", + "isExternal": false, + "children": [], + "disableCollapsible": false + } + ], + "disableCollapsible": false + }, + { + "name": "How to create a Module Federation Host Application", + "path": "/recipes/module-federation/create-a-host", + "id": "create-a-host", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, { "name": "Enforce Module Boundaries", "path": "/recipes/enforce-module-boundaries", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index d238125e70dbd..461766fc73240 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2383,6 +2383,27 @@ "path": "/recipes/webpack", "tags": [] }, + { + "id": "module-federation", + "name": "Module Federation", + "description": "Advanced guides to utilize Module Federation with Nx.", + "file": "", + "itemList": [ + { + "id": "create-a-host", + "name": "How to create a Module Federation Host Application", + "description": "A guide on how to create a Module Federation Host Application in your Nx workspace", + "file": "shared/recipes/module-federation/creating-a-host", + "itemList": [], + "isExternal": false, + "path": "/recipes/module-federation/create-a-host", + "tags": [] + } + ], + "isExternal": false, + "path": "/recipes/module-federation", + "tags": [] + }, { "id": "enforce-module-boundaries", "name": "Enforce Module Boundaries", @@ -4066,6 +4087,37 @@ "path": "/recipes/webpack/webpack-plugins", "tags": [] }, + "/recipes/module-federation": { + "id": "module-federation", + "name": "Module Federation", + "description": "Advanced guides to utilize Module Federation with Nx.", + "file": "", + "itemList": [ + { + "id": "create-a-host", + "name": "How to create a Module Federation Host Application", + "description": "A guide on how to create a Module Federation Host Application in your Nx workspace", + "file": "shared/recipes/module-federation/creating-a-host", + "itemList": [], + "isExternal": false, + "path": "/recipes/module-federation/create-a-host", + "tags": [] + } + ], + "isExternal": false, + "path": "/recipes/module-federation", + "tags": [] + }, + "/recipes/module-federation/create-a-host": { + "id": "create-a-host", + "name": "How to create a Module Federation Host Application", + "description": "A guide on how to create a Module Federation Host Application in your Nx workspace", + "file": "shared/recipes/module-federation/creating-a-host", + "itemList": [], + "isExternal": false, + "path": "/recipes/module-federation/create-a-host", + "tags": [] + }, "/recipes/enforce-module-boundaries": { "id": "enforce-module-boundaries", "name": "Enforce Module Boundaries", diff --git a/docs/map.json b/docs/map.json index 4e5a7df55f688..e2726f93f2bcd 100644 --- a/docs/map.json +++ b/docs/map.json @@ -817,6 +817,19 @@ } ] }, + { + "name": "Module Federation", + "id": "module-federation", + "description": "Advanced guides to utilize Module Federation with Nx.", + "itemList": [ + { + "id": "create-a-host", + "name": "How to create a Module Federation Host Application", + "description": "A guide on how to create a Module Federation Host Application in your Nx workspace", + "file": "shared/recipes/module-federation/creating-a-host" + } + ] + }, { "name": "Enforce Module Boundaries", "id": "enforce-module-boundaries", diff --git a/docs/shared/recipes/module-federation/creating-a-host.md b/docs/shared/recipes/module-federation/creating-a-host.md new file mode 100644 index 0000000000000..2a20b93c43b39 --- /dev/null +++ b/docs/shared/recipes/module-federation/creating-a-host.md @@ -0,0 +1,270 @@ +# Creating a Host + +A `host` is the term within [Module Federation](https://module-federation.io/docs/en/mf-docs/0.2/getting-started/) 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: + +{% tabs %} +{% tab label="React" %} + +```{% command="nx g @nx/react:host shell --directory=apps/react/shell" %} +> NX Generating @nx/react:host + +CREATE apps/react/shell/src/app/app.spec.tsx +CREATE apps/react/shell/src/assets/.gitkeep +CREATE apps/react/shell/src/environments/environment.prod.ts +CREATE apps/react/shell/src/environments/environment.ts +CREATE apps/react/shell/src/favicon.ico +CREATE apps/react/shell/src/index.html +CREATE apps/react/shell/tsconfig.app.json +CREATE apps/react/shell/webpack.config.ts +CREATE apps/react/shell/.babelrc +CREATE apps/react/shell/src/app/nx-welcome.tsx +CREATE apps/react/shell/src/app/app.module.css +CREATE apps/react/shell/src/app/app.tsx +CREATE apps/react/shell/src/styles.css +CREATE apps/react/shell/tsconfig.json +CREATE apps/react/shell/project.json +CREATE apps/react/shell/.eslintrc.json +CREATE apps/react/shell/jest.config.ts +CREATE apps/react/shell/tsconfig.spec.json +CREATE apps/react/shell/src/bootstrap.tsx +CREATE apps/react/shell/module-federation.config.ts +CREATE apps/react/shell/src/main.ts +CREATE apps/react/shell/webpack.config.prod.ts +``` + +{% /tab %} +{% tab label="Angular" %} + +```{% command="nx g @nx/angular:host shell --directory=apps/angular/shell" %} +> NX Generating @nx/angular:host + +CREATE apps/angular/shell/project.json +CREATE apps/angular/shell/src/assets/.gitkeep +CREATE apps/angular/shell/src/favicon.ico +CREATE apps/angular/shell/src/index.html +CREATE apps/angular/shell/src/styles.css +CREATE apps/angular/shell/tsconfig.app.json +CREATE apps/angular/shell/tsconfig.editor.json +CREATE apps/angular/shell/tsconfig.json +CREATE apps/angular/shell/src/app/app.component.css +CREATE apps/angular/shell/src/app/app.component.html +CREATE apps/angular/shell/src/app/app.component.spec.ts +CREATE apps/angular/shell/src/app/app.component.ts +CREATE apps/angular/shell/src/app/app.module.ts +CREATE apps/angular/shell/src/app/app.routes.ts +CREATE apps/angular/shell/src/app/nx-welcome.component.ts +CREATE apps/angular/shell/src/main.ts +CREATE apps/angular/shell/.eslintrc.json +CREATE apps/angular/shell/jest.config.ts +CREATE apps/angular/shell/src/test-setup.ts +CREATE apps/angular/shell/tsconfig.spec.json +CREATE apps/angular/shell/module-federation.config.ts +CREATE apps/angular/shell/webpack.config.ts +CREATE apps/angular/shell/webpack.prod.config.ts +CREATE apps/angular/shell/src/bootstrap.ts +``` + +{% /tab %} +{% /tabs %} + +### Scaffold a Host with Remotes + +To scaffold a host application along with remote applications in your workspace, run the following command: + +{% tabs %} +{% tab label="React" %} + +```{% command="nx g @nx/react:host shell-with-remotes --directory=apps/react/with-remotes/shell --remotes=remote1,remote2" %} +> NX Generating @nx/react:host + +CREATE apps/react/with-remotes/shell/src/app/app.spec.tsx +CREATE apps/react/with-remotes/shell/src/assets/.gitkeep +CREATE apps/react/with-remotes/shell/src/environments/environment.prod.ts +CREATE apps/react/with-remotes/shell/src/environments/environment.ts +CREATE apps/react/with-remotes/shell/src/favicon.ico +CREATE apps/react/with-remotes/shell/src/index.html +CREATE apps/react/with-remotes/shell/tsconfig.app.json +CREATE apps/react/with-remotes/shell/webpack.config.ts +CREATE apps/react/with-remotes/shell/.babelrc +CREATE apps/react/with-remotes/shell/src/app/nx-welcome.tsx +CREATE apps/react/with-remotes/shell/src/app/app.module.css +CREATE apps/react/with-remotes/shell/src/app/app.tsx +CREATE apps/react/with-remotes/shell/src/styles.css +CREATE apps/react/with-remotes/shell/tsconfig.json +CREATE apps/react/with-remotes/shell/project.json +CREATE apps/react/with-remotes/shell/.eslintrc.json +CREATE apps/react/with-remotes/shell/jest.config.ts +CREATE apps/react/with-remotes/shell/tsconfig.spec.json +CREATE apps/react/with-remotes/shell/src/bootstrap.tsx +CREATE apps/react/with-remotes/shell/module-federation.config.ts +CREATE apps/react/with-remotes/shell/src/main.ts +CREATE apps/react/with-remotes/shell/webpack.config.prod.ts + +CREATE apps/react/with-remotes/remote1/src/app/app.spec.tsx +CREATE apps/react/with-remotes/remote1/src/assets/.gitkeep +CREATE apps/react/with-remotes/remote1/src/environments/environment.prod.ts +CREATE apps/react/with-remotes/remote1/src/environments/environment.ts +CREATE apps/react/with-remotes/remote1/src/favicon.ico +CREATE apps/react/with-remotes/remote1/src/index.html +CREATE apps/react/with-remotes/remote1/tsconfig.app.json +CREATE apps/react/with-remotes/remote1/webpack.config.ts +CREATE apps/react/with-remotes/remote1/.babelrc +CREATE apps/react/with-remotes/remote1/src/app/nx-welcome.tsx +CREATE apps/react/with-remotes/remote1/src/app/app.module.css +CREATE apps/react/with-remotes/remote1/src/app/app.tsx +CREATE apps/react/with-remotes/remote1/src/styles.css +CREATE apps/react/with-remotes/remote1/tsconfig.json +CREATE apps/react/with-remotes/remote1/project.json +CREATE apps/react/with-remotes/remote1/.eslintrc.json +CREATE apps/react/with-remotes/remote1/jest.config.ts +CREATE apps/react/with-remotes/remote1/tsconfig.spec.json +CREATE apps/react/with-remotes/remote1/src/bootstrap.tsx +CREATE apps/react/with-remotes/remote1/module-federation.config.ts +CREATE apps/react/with-remotes/remote1/src/main.ts +CREATE apps/react/with-remotes/remote1/src/remote-entry.ts +CREATE apps/react/with-remotes/remote1/webpack.config.prod.ts + +UPDATE tsconfig.base.json + +CREATE apps/react/with-remotes/remote2/src/app/app.spec.tsx +CREATE apps/react/with-remotes/remote2/src/assets/.gitkeep +CREATE apps/react/with-remotes/remote2/src/environments/environment.prod.ts +CREATE apps/react/with-remotes/remote2/src/environments/environment.ts +CREATE apps/react/with-remotes/remote2/src/favicon.ico +CREATE apps/react/with-remotes/remote2/src/index.html +CREATE apps/react/with-remotes/remote2/tsconfig.app.json +CREATE apps/react/with-remotes/remote2/webpack.config.ts +CREATE apps/react/with-remotes/remote2/.babelrc +CREATE apps/react/with-remotes/remote2/src/app/nx-welcome.tsx +CREATE apps/react/with-remotes/remote2/src/app/app.module.css +CREATE apps/react/with-remotes/remote2/src/app/app.tsx +CREATE apps/react/with-remotes/remote2/src/styles.css +CREATE apps/react/with-remotes/remote2/tsconfig.json +CREATE apps/react/with-remotes/remote2/project.json +CREATE apps/react/with-remotes/remote2/.eslintrc.json +CREATE apps/react/with-remotes/remote2/jest.config.ts +CREATE apps/react/with-remotes/remote2/tsconfig.spec.json +CREATE apps/react/with-remotes/remote2/src/bootstrap.tsx +CREATE apps/react/with-remotes/remote2/module-federation.config.ts +CREATE apps/react/with-remotes/remote2/src/main.ts +CREATE apps/react/with-remotes/remote2/src/remote-entry.ts +CREATE apps/react/with-remotes/remote2/webpack.config.prod.ts +``` + +{% /tab %} +{% tab label="Angular" %} + +```{% command="nx g @nx/angular:host shell --directory=apps/angular/with-remtoes/shell --remotes=remote1,remote2" %} +> NX Generating @nx/angular:host + +CREATE apps/angular/with-remotes/shell/project.json +CREATE apps/angular/with-remotes/shell/src/assets/.gitkeep +CREATE apps/angular/with-remotes/shell/src/favicon.ico +CREATE apps/angular/with-remotes/shell/src/index.html +CREATE apps/angular/with-remotes/shell/src/styles.css +CREATE apps/angular/with-remotes/shell/tsconfig.app.json +CREATE apps/angular/with-remotes/shell/tsconfig.editor.json +CREATE apps/angular/with-remotes/shell/tsconfig.json +CREATE apps/angular/with-remotes/shell/src/app/app.component.css +CREATE apps/angular/with-remotes/shell/src/app/app.component.html +CREATE apps/angular/with-remotes/shell/src/app/app.component.spec.ts +CREATE apps/angular/with-remotes/shell/src/app/app.component.ts +CREATE apps/angular/with-remotes/shell/src/app/app.module.ts +CREATE apps/angular/with-remotes/shell/src/app/app.routes.ts +CREATE apps/angular/with-remotes/shell/src/app/nx-welcome.component.ts +CREATE apps/angular/with-remotes/shell/src/main.ts +CREATE apps/angular/with-remotes/shell/.eslintrc.json +CREATE apps/angular/with-remotes/shell/jest.config.ts +CREATE apps/angular/with-remotes/shell/src/test-setup.ts +CREATE apps/angular/with-remotes/shell/tsconfig.spec.json +CREATE apps/angular/with-remotes/shell/module-federation.config.ts +CREATE apps/angular/with-remotes/shell/webpack.config.ts +CREATE apps/angular/with-remotes/shell/webpack.prod.config.ts +CREATE apps/angular/with-remotes/shell/src/bootstrap.ts + +CREATE apps/angular/with-remotes/ng-remote1/project.json +CREATE apps/angular/with-remotes/ng-remote1/src/assets/.gitkeep +CREATE apps/angular/with-remotes/ng-remote1/src/favicon.ico +CREATE apps/angular/with-remotes/ng-remote1/src/index.html +CREATE apps/angular/with-remotes/ng-remote1/src/styles.css +CREATE apps/angular/with-remotes/ng-remote1/tsconfig.app.json +CREATE apps/angular/with-remotes/ng-remote1/tsconfig.editor.json +CREATE apps/angular/with-remotes/ng-remote1/tsconfig.json +CREATE apps/angular/with-remotes/ng-remote1/src/app/app.component.ts +CREATE apps/angular/with-remotes/ng-remote1/src/app/app.module.ts +CREATE apps/angular/with-remotes/ng-remote1/src/app/app.routes.ts +CREATE apps/angular/with-remotes/ng-remote1/src/main.ts +CREATE apps/angular/with-remotes/ng-remote1/.eslintrc.json +CREATE apps/angular/with-remotes/ng-remote1/jest.config.ts +CREATE apps/angular/with-remotes/ng-remote1/src/test-setup.ts +CREATE apps/angular/with-remotes/ng-remote1/tsconfig.spec.json +CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.component.ts +CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.module.ts +CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/entry.routes.ts +CREATE apps/angular/with-remotes/ng-remote1/src/app/remote-entry/nx-welcome.component.ts +CREATE apps/angular/with-remotes/ng-remote1/module-federation.config.ts +CREATE apps/angular/with-remotes/ng-remote1/webpack.config.ts +CREATE apps/angular/with-remotes/ng-remote1/webpack.prod.config.ts +CREATE apps/angular/with-remotes/ng-remote1/src/bootstrap.ts + +UPDATE tsconfig.base.json + +CREATE apps/angular/with-remotes/ng-remote2/project.json +CREATE apps/angular/with-remotes/ng-remote2/src/assets/.gitkeep +CREATE apps/angular/with-remotes/ng-remote2/src/favicon.ico +CREATE apps/angular/with-remotes/ng-remote2/src/index.html +CREATE apps/angular/with-remotes/ng-remote2/src/styles.css +CREATE apps/angular/with-remotes/ng-remote2/tsconfig.app.json +CREATE apps/angular/with-remotes/ng-remote2/tsconfig.editor.json +CREATE apps/angular/with-remotes/ng-remote2/tsconfig.json +CREATE apps/angular/with-remotes/ng-remote2/src/app/app.component.ts +CREATE apps/angular/with-remotes/ng-remote2/src/app/app.module.ts +CREATE apps/angular/with-remotes/ng-remote2/src/app/app.routes.ts +CREATE apps/angular/with-remotes/ng-remote2/src/main.ts +CREATE apps/angular/with-remotes/ng-remote2/.eslintrc.json +CREATE apps/angular/with-remotes/ng-remote2/jest.config.ts +CREATE apps/angular/with-remotes/ng-remote2/src/test-setup.ts +CREATE apps/angular/with-remotes/ng-remote2/tsconfig.spec.json +CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.component.ts +CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.module.ts +CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/entry.routes.ts +CREATE apps/angular/with-remotes/ng-remote2/src/app/remote-entry/nx-welcome.component.ts +CREATE apps/angular/with-remotes/ng-remote2/module-federation.config.ts +CREATE apps/angular/with-remotes/ng-remote2/webpack.config.ts +CREATE apps/angular/with-remotes/ng-remote2/webpack.prod.config.ts +CREATE apps/angular/with-remotes/ng-remote2/src/bootstrap.ts +``` + +{% /tab %} +{% /tabs %} + +## 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: + +```shell +nx serve shell +``` + +## Building your Host + +In the same vein, you can build your host by running: + +```shell +nx build shell +``` diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index 95edbb72bc750..d993c6e4b3ca5 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -136,6 +136,8 @@ - [Webpack](/recipes/webpack) - [How to configure webpack on your Nx workspace](/recipes/webpack/webpack-config-setup) - [Webpack plugins](/recipes/webpack/webpack-plugins) + - [Module Federation](/recipes/module-federation) + - [How to create a Module Federation Host Application](/recipes/module-federation/create-a-host) - [Enforce Module Boundaries](/recipes/enforce-module-boundaries) - [Ban Dependencies with Certain Tags](/recipes/enforce-module-boundaries/ban-dependencies-with-tags) - [Tag in Multiple Dimensions](/recipes/enforce-module-boundaries/tag-multiple-dimensions)