### Install styled-components

Source: https://module-federation.io/guide/basic/css-isolate.html

Command to install the styled-components library.

```bash
npm install styled-components
```

--------------------------------

### Interactive creation of rsbuild consumer

Source: https://module-federation.io/guide/start/quick-start.html

Example of running npm create module-federation@latest and selecting options to create an rsbuild consumer project. The output shows the prompts and final next steps (cd mf_consumer, npm install, npm run dev).

```text
➜  ~  ✗ npm create module-federation@latest

> npx
> create-module-federation

◆  Create Module Federation Project
│
◇  Please input Module Federation name:
│  mf_consumer
│
◇  Please select the type of project you want to create:
│  Application
│
◇  Select template
│  Rsbuild
│
◇  Please select the role of project you want to create:
│  Consumer
│
◇  Next steps ─────╮
│                  │
│  cd mf_consumer  │
│  npm install     │
│  npm run dev     │
│                  │
├──────────────────╯
│
└  Done.
```

--------------------------------

### Install @module-federation/vite with bun

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using bun as an alternative to npm.

```bash
bun add @module-federation/vite --save
```

--------------------------------

### Install @module-federation/node with bun

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using bun. Run this in your project root.

```bash
bun add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install dependencies for mfe1

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Navigate to the `mfe1` directory and install dependencies with `pnpm i`.

```bash
cd mfe1
pnpm i
```

--------------------------------

### Install @module-federation/observability-plugin

Source: https://module-federation.io/plugin/plugins/observability-plugin.html

Installs the observability plugin package via npm.

```bash
npm install @module-federation/observability-plugin
```

--------------------------------

### Interactive creation of rsbuild provider

Source: https://module-federation.io/guide/start/quick-start.html

Example of running npm create module-federation@latest and selecting options to create an rsbuild provider project. The output shows the prompts and final next steps (cd mf_provider, npm install, npm run dev).

```text
➜  ~  ✗ npm create module-federation@latest

> npx
> create-module-federation

◆  Create Module Federation Project
│
◇  Please input Module Federation name:
│  mf_provider
│
◇  Please select the type of project you want to create:
│  Application
│
◇  Select template
│  Rsbuild
│
◇  Please select the role of project you want to create:
│  Provider
│
◇  Next steps ─────╮
│                  │
│  cd mf_provider  │
│  npm install     │
│  npm run dev     │
│                  │
├──────────────────╯
│
└  Done.
```

--------------------------------

### Install dependencies for mfe2

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Navigate to the `mfe2` directory and install dependencies with `pnpm i`.

```bash
cd mfe2
pnpm i
```

--------------------------------

### init Usage Example

Source: https://module-federation.io/guide/runtime/runtime-api.html

Example of using the init function to initialize a ModuleFederation runtime instance with a remote and shared dependencies. The example shows how to configure the host name, remote entry, and shared React library.

```javascript
import { init, loadRemote } from '@module-federation/enhanced/runtime';

init({
  name: "mf_host",
  remotes: [
    {
      name: "remote",
      // After configuring an alias, it can be loaded directly through the alias
      alias: "app1",
      // Decide which module to load by specifying the address of the module's manifest.json file
      entry: "http://localhost:2001/mf-manifest.json"
    }
  ],
});
```

--------------------------------

### Install @module-federation/node with npm

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using npm. Run this in your project root.

```bash
npm add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install @module-federation/node with pnpm

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using pnpm. Run this in your project root.

```bash
pnpm add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install with bun

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using bun. Requires @rstest/core@0.11.4 or newer.

```bash
bun add @module-federation/rstest @rstest/core --dev
```

--------------------------------

### Install @module-federation/rsbuild-plugin with bun

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using bun.

```bash
bun add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Install @module-federation/node with yarn

Source: https://module-federation.io/plugin/plugins/index.html

Install the required packages using yarn. Run this in your project root.

```bash
yarn add @module-federation/enhanced @module-federation/node --save
```

--------------------------------

### Install @module-federation/bridge-react with pnpm

Source: https://module-federation.io/guide/bridge/react/export-app.html

Install the bridge-react package using pnpm.

```bash
pnpm add @module-federation/bridge-react@latest
```

--------------------------------

### Install @module-federation/vite with yarn

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using yarn as an alternative to npm.

```bash
yarn add @module-federation/vite --save
```

--------------------------------

### Install @module-federation/vite with pnpm

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using pnpm as an alternative to npm.

```bash
pnpm add @module-federation/vite --save
```

--------------------------------

### Install @module-federation/bridge-react with npm

Source: https://module-federation.io/guide/bridge/react/export-app.html

Install the bridge-react package using npm.

```bash
npm install @module-federation/bridge-react@latest
```

--------------------------------

### Install retry-plugin via npm

Source: https://module-federation.io/plugin/plugins/retry-plugin.html

Install the @module-federation/retry-plugin package using npm.

```bash
npm install @module-federation/retry-plugin
```

--------------------------------

### Install for existing projects with bun

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies using bun.

```bash
bun add @module-federation/nextjs-mf webpack -D
```

--------------------------------

### Install @module-federation/bridge-react with yarn

Source: https://module-federation.io/guide/bridge/react/export-app.html

Install the bridge-react package using yarn.

```bash
yarn add @module-federation/bridge-react@latest
```

--------------------------------

### Install @module-federation/nextjs-mf in mfe1

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies in the mfe1 app, then installs dependencies with pnpm.

```bash
cd mfe1
pnpm add @module-federation/nextjs-mf webpack -D
pnpm i
```

--------------------------------

### Install @module-federation/bridge-vue3 with yarn

Source: https://module-federation.io/integrations/practice/vue.html

Install the bridge-vue3 package using yarn.

```bash
yarn add @module-federation/bridge-vue3
```

--------------------------------

### Install @auth0/auth0-angular

Source: https://module-federation.io/integrations/framework/angular/auth0.html

Install the Auth0 Angular SDK package via npm.

```bash
npm i @auth0/auth0-angular
```

--------------------------------

### Install @module-federation/modern-js with bun

Source: https://module-federation.io/integrations/framework/modernjs/index.html

Install the Module Federation plugin for Modern.js v2 using bun.

```bash
bun add @module-federation/modern-js --save
```

--------------------------------

### Install @module-federation/rsbuild-plugin with pnpm

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using pnpm.

```bash
pnpm add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Install @module-federation/vite with npm

Source: https://module-federation.io/integrations/build-tool/vite.html

Install the plugin using npm. This is the first step in setting up Module Federation with Vite.

```bash
npm add @module-federation/vite --save
```

--------------------------------

### Install and enable Divebell MF Extension

Source: https://module-federation.io/plugin/plugins/observability-plugin.html

Installs the Divebell CLI and MF Extension, then sets up and opens a page with MF diagnostics enabled. Use for a one-off live page investigation without adding the Observability Plugin to the application.

```bash
npm install --global @divebell/cli
divebell extensions add @divebell/extension-mf
divebell setup
divebell open "https://example.com" --mf
```

--------------------------------

### Install with npm

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using npm. Requires @rstest/core@0.11.4 or newer.

```bash
npm add @module-federation/rstest @rstest/core --save-dev
```

--------------------------------

### Install for existing projects with npm

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies using npm.

```bash
npm i @module-federation/nextjs-mf webpack -D
```

--------------------------------

### Install @module-federation/rsbuild-plugin with npm

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using npm.

```bash
npm add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### loading Examples

Source: https://module-federation.io/guide/bridge/react/load-app.html

Three example loading props that render different UI while the remote is loading: a div, a string, and a Spinner component.

```typescript
loading: <div>Loading...</div>
```

```typescript
loading: 'Loading remote app...'
```

```typescript
loading: <Spinner />
```

--------------------------------

### Install @module-federation/modern-js with pnpm

Source: https://module-federation.io/integrations/framework/modernjs/index.html

Install the Module Federation plugin for Modern.js v2 using pnpm.

```bash
pnpm add @module-federation/modern-js --save
```

--------------------------------

### Example __SHARE__ object

Source: https://module-federation.io/guide/debug/variables.html

Shows a concrete example of the __SHARE__ debug variable, illustrating the structure with two instances (manifest_host:0.0.0 and app1:0.1.94) and their shared modules like react-dom/client, react-dom, react/jsx-dev-runtime, react, and react/jsx-runtime.

```json
"__SHARE__": {
  "manifest_host:0.0.0": {
    "default": {
      "react-dom/client": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react-dom": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-dev-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": ["app1", "webpack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "app1", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "app1",
          "loading": null,
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "strategy": "loaded-first"
        }
      }
    }
  },
  "app1:0.1.94": {
    "default": {
      "react-dom/client": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react-dom": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-dev-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": ["app1", "webpack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react": {
        "18.3.1": {
          "deps": [],
          "useIn": ["webpack_provider", "app1", "rspack_provider"],
          "from": "webpack_provider",
          "loading": {},
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "loaded": true,
          "strategy": "version-first",
          "lib": "function (){}"
        }
      },
      "react/jsx-runtime": {
        "18.3.1": {
          "deps": [],
          "useIn": [],
          "from": "app1",
          "loading": null,
          "get": "function (){}",
          "scope": ["default"],
          "shareConfig": {
            "requiredVersion": "^18.3.1",
            "singleton": true,
            "eager": false,
            "strictVersion": false,
            "layer": null
          },
          "strategy": "loaded-first"
        }
      }
    }
  }
}
```

--------------------------------

### Example file layout for data fetching

Source: https://module-federation.io/guide/data/data-fetch.html

Shows the directory structure where each exposed module is paired with a `.data` file of the same name.

```text
.
└── src
    ├── List.tsx
    └── List.data.ts
```

--------------------------------

### Install with yarn

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using yarn. Requires @rstest/core@0.11.4 or newer.

```bash
yarn add @module-federation/rstest @rstest/core --dev
```

--------------------------------

### Install @module-federation/rsbuild-plugin with yarn

Source: https://module-federation.io/integrations/build-tool/rsbuild.html

Install the plugin as a dev dependency using yarn.

```bash
yarn add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Install @module-federation/bridge-vue3 with pnpm

Source: https://module-federation.io/integrations/practice/vue.html

Install the latest version of the bridge-vue3 package using pnpm.

```bash
pnpm add @module-federation/bridge-vue3@latest
```

--------------------------------

### Install with pnpm

Source: https://module-federation.io/integrations/build-tool/rstest.html

Install the plugin and core package using pnpm. Requires @rstest/core@0.11.4 or newer.

```bash
pnpm add @module-federation/rstest @rstest/core --save-dev
```

--------------------------------

### Install @module-federation/modern-js-v3 with bun

Source: https://module-federation.io/guide/runtime/index.html

Install the `@module-federation/modern-js-v3` package using bun for Modern.js v3 projects.

```bash
bun add @module-federation/modern-js-v3 --save
```

--------------------------------

### Install for existing projects with pnpm

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies using pnpm.

```bash
pnpm add @module-federation/nextjs-mf webpack -D
```

--------------------------------

### Install @module-federation/bridge-vue3 with npm

Source: https://module-federation.io/integrations/practice/vue.html

Install the latest version of the bridge-vue3 package using npm.

```bash
npm install @module-federation/bridge-vue3@latest
```

--------------------------------

### Install @module-federation/modern-js with npm

Source: https://module-federation.io/integrations/framework/modernjs/index.html

Install the Module Federation plugin for Modern.js v2 using npm.

```bash
npm add @module-federation/modern-js --save
```

--------------------------------

### Install mf skill

Source: https://module-federation.io/ai/index.html

Install the Module Federation agent skill using npx. Run this in your terminal to enable the agent to read the latest docs and answer questions.

```bash
npx skills add module-federation/agent-skills --skill mf -y
```

--------------------------------

### Module Federation exposes Configuration Example

Source: https://module-federation.io/configure/exposes.html

Example configuration for the `exposes` option in a Module Federation plugin, showing how to expose modules like the default export, a utility function, and a component. Note that `"./"` is not supported; use `.` for default export.

```javascript
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'provider',
      exposes: {
        // Note: "./" is not supported. Exporting as `.` indicates a default export
        '.': './src/index.tsx',
        './add': './src/utils/add.ts',
        './Button': './src/components/Button.tsx',
      },
    }),
  ],
};
```

--------------------------------

### shareScope configuration example

Source: https://module-federation.io/configure/remotes.html

Shows how to set shareScope for a remote to include multiple scopes, such as 'default' and 'scope1'.

```javascript
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    remote: {
      external: 'app_remote@http://localhost:2001/remoteEntry.js',
      shareScope: ['default', 'scope1'],
    },
  },
});
```

--------------------------------

### Install @module-federation/modern-js-v3 with pnpm

Source: https://module-federation.io/guide/runtime/index.html

Install the `@module-federation/modern-js-v3` package using pnpm for Modern.js v3 projects.

```bash
pnpm add @module-federation/modern-js-v3 --save
```

--------------------------------

### Install with bun

Source: https://module-federation.io/integrations/documentation/rspress.html

Install the plugin using bun. Requires Rspress version 2.0.0-beta.16 or higher.

```bash
bun add @module-federation/rspress-plugin
```

--------------------------------

### Install @module-federation/modern-js with yarn

Source: https://module-federation.io/integrations/framework/modernjs/index.html

Install the Module Federation plugin for Modern.js v2 using yarn.

```bash
yarn add @module-federation/modern-js --save
```

--------------------------------

### Example of __FEDERATION__.moduleInfo structure

Source: https://module-federation.io/guide/debug/variables.html

Shows the structure of the `moduleInfo` object, which contains keys like `{moduleName}(:{moduleVersion})`. Use this to inspect module dependencies, shared modules, and remote entry URLs. The example includes a host and two providers with their remote entries and shared dependencies.

```json
moduleInfo: {
  "manifest_host": {
    "version": "",
    "remoteEntry": "",
    "remotesInfo": {
      "webpack_provider": {
        "matchedVersion": "http://localhost:3009/mf-manifest.json"
      },
      "rspack_manifest_provider": {
        "matchedVersion": "http://localhost:3011/mf-manifest.json"
      },
      "app1": {
        "matchedVersion": "http://127.0.0.1:4001/mf-manifest.json"
      },
      "rspack_provider": {
        "matchedVersion": "http://localhost:3010/mf-manifest.json"
      }
    }
  },
  "rspack_manifest_provider:http://localhost:3011/mf-manifest.json": {
    "version": "http://localhost:3011/mf-manifest.json",
    "buildVersion": "0.0.0",
    "globalName": "rspack_manifest_provider",
    "remoteEntry": "remoteEntry.js",
    "remoteEntryType": "global",
    "remoteTypes": "",
    "remoteTypesZip": "@mf-types.zip",
    "remoteTypesAPI": "@mf-types.d.ts",
    "remotesInfo": {},
    "shared": [
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js-_9b5b0.js",
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js-_9b5b1.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom/client",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom",
        "version": "18.3.1"
      },
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react_18_3_1_node_modules_react_index_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react",
        "version": "18.3.1"
      }
    ],
    "modules": [
      {
        "moduleName": "Component",
        "modulePath": "./Component",
        "assets": {
          "js": {
            "sync": [
              "__federation_expose_Component.js"
            ],
            "async": [
              "src_asyncFile_ts.js"
            ]
          },
          "css": {
            "sync": [],
            "async": []
          }
        }
      }
    ],
    "publicPath": "http://localhost:3011/"
  },
  "webpack_provider:http://localhost:3009/mf-manifest.json": {
    "version": "http://localhost:3009/mf-manifest.json",
    "buildVersion": "0.0.0",
    "globalName": "webpack_provider",
    "remoteEntry": "remoteEntry.js",
    "remoteEntryType": "global",
    "remoteTypes": "",
    "remoteTypesZip": "@mf-types.zip",
    "remoteTypesAPI": "@mf-types.d.ts",
    "remotesInfo": {},
    "shared": [
      {
        "assets": {
          "js": {
            "async": [],
            "sync": [
              "node_modules_pnpm_react-dom_18_3_1_react_18_3_1_node_modules_react-dom_client_js.js"
            ]
          },
          "css": {
            "async": [],
            "sync": []
          }
        },
        "sharedName": "react-dom/client",
        "version": "18.3.1"
      }
    ]
  }
}
```

--------------------------------

### Install @angular-architects/module-federation with Nx CLI

Source: https://module-federation.io/integrations/framework/angular/angular-cli.html

For Nx users, install the plugin as a dev dependency and then run the init generator for each project.

```bash
npm i @angular-architects/module-federation -D
ng g @angular-architects/module-federation:init --project shell --port 4200 --type host
ng g @angular-architects/module-federation:init --project mfe1 --port 4201 --type remote
```

--------------------------------

### Module Federation shared configuration example

Source: https://module-federation.io/configure/shared.html

Example of configuring shared dependencies in Module Federation, setting react and react-dom as singletons.

```javascript
new ModuleFederationPlugin({
  name: '@demo/host',
  shared: {
    react: {
      singleton: true,
    },
    'react-dom': {
      singleton: true,
    },
  },
  //...
});
```

--------------------------------

### Install @module-federation/modern-js-v3 with npm

Source: https://module-federation.io/guide/runtime/index.html

Install the `@module-federation/modern-js-v3` package using npm for Modern.js v3 projects.

```bash
npm install @module-federation/modern-js-v3 --save
```

--------------------------------

### Markdown docs URLs

Source: https://module-federation.io/ai/index.html

Example URLs showing how to get Markdown versions of docs pages by replacing .html with .md.

```text
# HTML version
https://module-federation.io/guide/basic/runtime.html

# Markdown version
https://module-federation.io/guide/basic/runtime.md
```

--------------------------------

### Before async startup: entrypoint with dynamic import and bootstrap.js

Source: https://module-federation.io/blog/hoisted-runtime.html

Shows the previous approach requiring a dynamic import in the entrypoint and a separate bootstrap.js file that renders the React app. This is the 'Before' tab in the comparison.

```javascript
// entrypoint
import('./bootstrap.js')
```

```javascript
// bootstrap.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
  <App />
</React.StrictMode>,
);
```

--------------------------------

### Install for existing projects with yarn

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies using yarn.

```bash
yarn add @module-federation/nextjs-mf webpack -D
```

--------------------------------

### Install Module Federation plugins

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Install the Module Federation enhanced plugin and the Rsbuild plugin as a dev dependency.

```bash
pnpm add @module-federation/enhanced
pnpm add @module-federation/rsbuild-plugin --save-dev
```

--------------------------------

### Start Shell and Micro-frontend with ng serve

Source: https://module-federation.io/integrations/framework/angular/angular-cli.html

Starts the Shell (Host) and Micro-frontend (Remote) applications. The -o flag opens each application in the browser. Run these commands in separate terminals to test the Module Federation configuration.

```bash
ng serve shell -o
ng serve mfe1 -o
```

--------------------------------

### After async startup: simplified entrypoint

Source: https://module-federation.io/blog/hoisted-runtime.html

Shows the simplified entrypoint when async startup is enabled, with no dynamic import or separate bootstrap file. This is the 'After' tab in the comparison.

```javascript
// entrypoint
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
  <App />
</React.StrictMode>,
);
```

--------------------------------

### registerShared usage with build plugin

Source: https://module-federation.io/guide/runtime/runtime-api.html

Example of registering shared dependencies (react, react-dom, antd) using the build plugin approach. Uses lib for synchronous modules and get for async loading of antd.

```typescript
import { registerShared } from '@module-federation/enhanced/runtime';
import React from 'react';
import ReactDom from 'react-dom';

registerShared({
  react: {
    version: '18.0.0',
    scope: 'default',
    lib: () => React,
    shareConfig: {
      singleton: true,
      requiredVersion: '^18.0.0',
    },
  },
  'react-dom': {
    version: '18.0.0',
    scope: 'default',
    lib: () => ReactDom,
    shareConfig: {
      singleton: true,
      requiredVersion: '^18.0.0',
    },
  },
  antd: {
    version: '1.0.0',
    scope: 'default',
    get: () => import('antd').then((m) => () => m),
  },
});
```

--------------------------------

### Quick creation with CLI options

Source: https://module-federation.io/guide/start/quick-start.html

Use these commands to create a project with one click, skipping interactive prompts. The first uses long options, the second uses abbreviations. Both create a Modern.js provider named 'provider' in the 'my-project' directory.

```bash
npx create-module-federation --dir my-project --template provider-modern --name provider

# Use abbreviations
npx create-module-federation -d my-project -t provider-modern -n provider
```

--------------------------------

### Install Nx Angular Plugin

Source: https://module-federation.io/integrations/framework/angular/mf-ssr-angular.html

Install the official Nx Angular plugin to enable Angular-specific features.

```bash
npm install @nx/angular
```

--------------------------------

### #init

Source: https://module-federation.io/guide/runtime/runtime-hooks.html

SyncHook called after the Module Federation instance is initialized. Use it to perform setup or configuration after initialization.

```APIDOC
## #init

### Description
SyncHook called after the Module Federation instance is initialized. Use it to perform setup or configuration after initialization.

### Hook Type
SyncHook

### Function Signature
```typescript
function init(args: InitOptions): void;
```

### Parameters
#### InitOptions
- **options** (ModuleFederationRuntimeOptions) - Required - The runtime options.
- **origin** (ModuleFederation) - Required - The Module Federation instance.

### Example
```typescript
function init(args: InitOptions): void {
  // your code
}
```
```

--------------------------------

### Pure runtime with dynamic import and errorLoadRemote

Source: https://module-federation.io/blog/error-load-remote.html

This example shows how to set up a Module Federation host with pure runtime registration, using dynamic import to load remote modules. It includes a fallback plugin that uses the errorLoadRemote hook to return a fallback component when loading fails. The example also demonstrates loading methods/functions from the remote.

```javascript
import React from 'react';
import { createInstance, loadRemote } from '@module-federation/enhanced/runtime';
import { RetryPlugin } from '@module-federation/retry-plugin';

// Module registration
const mf = createInstance({
    name: 'host',
    remotes: [
        {
            name: "remote1",
            entry: "http://localhost:2001/mf-manifest.json",
            alias: "remote1"
        }
    ],
    plugins: [
      RetryPlugin({
        retryTimes: 3,
        retryDelay: 1000,
      }),
    ]
});

// Module loading
const Remote1Button = React.lazy(() => loadRemote('remote1/button'));

export default () => {
  return (
    <React.Suspense fallback={<div> Loading Remote1App...</div>}>
      <Remote1Button />
    </React.Suspense>
  );
}

// Method/function loading
loadRemote<{add: (...args: Array<number>)=> number }>("remote1/util").then((md)=>{
    md.add(1,2,3);
});
```

```javascript
import React from 'react';
import { createInstance, loadRemote } from '@module-federation/enhanced/runtime';
import { RetryPlugin } from '@module-federation/retry-plugin';

const fallbackPlugin: () => ModuleFederationRuntimePlugin = function () {
  return {
    name: 'fallback-plugin',
    errorLoadRemote(args) {
      return { default: () => <div> fallback component </div> };
    },
  };
};

// Module registration
const mf = createInstance({
  name: 'host',
  remotes: [
      {
          name: "remote1",
          alias: "remote1"
          entry: "http://localhost:2001/mf-manifest.json",
      }
  ],
  plugins: [
    RetryPlugin({
      retryTimes: 3,
      retryDelay: 1000,
    }),
    fallbackPlugin()
  ]
});

// Module loading
const Remote1Button = React.lazy(() => mf.loadRemote('remote1/button'));

export default () => {
  return (
    <React.Suspense fallback={<div> Loading Remote1App...</div>}>
      <Remote1Button />
    </React.Suspense>
  );
}

// Method/function loading
mf.loadRemote<{add: (...args: Array<number>)=> number }>("remote1/util").then((md)=>{
    md.add(1,2,3);
});
```

--------------------------------

### Migration from init to getInstance and register functions

Source: https://module-federation.io/guide/runtime/runtime-api.html

Shows the recommended migration from using init to using getInstance, registerRemotes, registerShared, and registerPlugins. The diff shows removing the init call and adding the new registration functions.

```diff
- import { init } from '@module-federation/enhanced/runtime';
+ import { registerShared, registerRemotes, registerPlugins, getInstance } from '@module-federation/enhanced/runtime';
  import React from 'react';
  import mfRuntimePlugin from 'mf-runtime-plugin';

- const instance = init({
-   name: 'mf_host',
-   remotes: [
-     {
-       name: 'remote',
-       entry: 'http://localhost:2001/mf-manifest.json',
-     },
-   ],
-   shared: {
-     react: {
-       version: '18.0.0',
-       scope: 'default',
-       lib: () => React,
-       shareConfig: {
-         singleton: true,
-         requiredVersion: '^18.0.0',
-       },
-     },
-   },
-   plugins: [mfRuntimePlugin()],
- });
+ const instance = getInstance();
+ registerRemotes([
+   {
+     name: 'remote',
+     entry: 'http://localhost:2001/mf-manifest.json',
+   },
+ ]);
+ registerShared({
+   react: {
+     version: '18.0.0',
+     scope: 'default',
+     lib: () => React,
+     shareConfig: {
+       singleton: true,
+       requiredVersion: '^18.0.0',
+     },
+   },
+ });
+ registerPlugins([mfRuntimePlugin()]);
```

--------------------------------

### Install @module-federation/nextjs-mf in mfe2

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs the Module Federation plugin and webpack as dev dependencies in the mfe2 app, then installs dependencies with pnpm.

```bash
cd mfe2
pnpm add @module-federation/nextjs-mf webpack -D
pnpm i
```

--------------------------------

### Install Okta Angular and Okta Auth JS libraries

Source: https://module-federation.io/integrations/framework/angular/okta-auth.html

Run this npm command to install @okta/okta-angular@5.2 and @okta/okta-auth-js@6.4, which are required for Okta authentication in an Angular Module Federation project.

```bash
npm install @okta/okta-angular@5.2 @okta/okta-auth-js@6.4
```

--------------------------------

### Create a new Nx workspace

Source: https://module-federation.io/integrations/framework/angular/using-nx-for-angular.html

Initializes a new Nx workspace named 'myorg' with the 'apps' preset, then navigates into the directory.

```bash
npx -y create-nx-workspace@latest myorg --preset=apps
cd myorg
```

--------------------------------

### injectLink Example Output

Source: https://module-federation.io/guide/bridge/react/load-component.html

Example HTML output when injectLink is true, showing the injected link tag before the component.

```html
<link href="__federation_button.css" rel="stylesheet" type="text/css">
<button>remote button</button>
```

--------------------------------

### Install webpack with bun

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs webpack as a dev dependency using bun. Required to avoid MODULE_NOT_FOUND errors.

```bash
bun add webpack -D
```

--------------------------------

### Install @module-federation/enhanced with bun

Source: https://module-federation.io/integrations/bundler/rspack.html

Use bun to add the Module Federation plugin for Rspack.

```bash
bun add @module-federation/enhanced
```

--------------------------------

### Install Zephyr plugin with bun

Source: https://module-federation.io/guide/deployment/zephyr.html

Install the zephyr-webpack-plugin package using bun. Alternative package manager command.

```bash
bun add zephyr-webpack-plugin
```

--------------------------------

### Create App 1 with create rsbuild

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Run `create rsbuild@latest` and select the target folder `mfe1`, framework `React`, and language `TypeScript`.

```bash
create rsbuild@latest

"Input target folder":
> mfe1

"Select framework":
> React

"Select language":
> TypeScript
```

--------------------------------

### injectScript Example Output

Source: https://module-federation.io/guide/bridge/react/load-component.html

Example HTML output when injectScript is true, showing the injected script tag before the component.

```html
<script async src="__federation_button.js" crossOrigin="anonymous"/>
<button>remote button</button>
```

--------------------------------

### CLI options for create-module-federation

Source: https://module-federation.io/guide/start/quick-start.html

Shows the complete CLI options and available templates for create-module-federation. Use -h for help, -d for directory, -t for template, -n for name, -r for role, and --override to overwrite files.

```text
Usage: create-module-federation [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  -n, --name       specify the mf name
  -r, --role       specify the mf role type: provider or consumer
  --override       override files in target directory

Templates:

  provider-modern, provider-rsbuild, provider-rslib, provider-rslib-storybook, consumer-modern, consumer-rsbuild
```

--------------------------------

### createInstance example

Source: https://module-federation.io/guide/runtime/runtime-api.html

Creates a new ModuleFederation instance with a remote and loads a remote module. Use when no build plugin is used, multiple instances are needed, or partitioning is required. The new instance is isolated and does not replace the default instance.

```javascript
import { createInstance } from '@module-federation/enhanced/runtime';

const mf = createInstance({
  name: 'host',
  remotes: [
    {
      name: 'sub1',
      entry: 'http://localhost:8080/mf-manifest.json'
    }
  ]
});

mf.loadRemote('sub1/util').then((m) => m.add(1, 2, 3));
```

--------------------------------

### Install @angular-builders/custom-webpack

Source: https://module-federation.io/integrations/framework/angular/angular-mfe.html

Install the custom-webpack builder package using Yarn or npm.

```bash
yarn add @angular-builders/custom-webpack -D
# or
npm i -D @angular-builders/custom-webpack
```

--------------------------------

### ModuleFederationPlugin remotes configuration example

Source: https://module-federation.io/configure/remotes.html

Shows how to configure remotes in a ModuleFederationPlugin, defining two producers: manifest-provider and js-entry-provider.

```javascript
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      // The `remotes` below defines two producers, named `manifest-provider` for the project started on port 3011 and `js-entry-provider` for the project started on port 3012
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
        'js-entry-provider':
          'js_entry_provider@http://localhost:3012/remoteEntry.js',
      },
    }),
  ],
};
```

--------------------------------

### Install @module-federation/enhanced with npm

Source: https://module-federation.io/integrations/bundler/rspack.html

Use npm to add the Module Federation plugin for Rspack.

```bash
npm add @module-federation/enhanced
```

--------------------------------

### Create App 2 with create rsbuild

Source: https://module-federation.io/integrations/practice/react/rsbuild-cra.html

Run `create rsbuild@latest` and select the target folder `mfe2`, framework `React`, and language `TypeScript`.

```bash
create rsbuild@latest

"Input target folder":
> mfe2

"Select framework":
> React

"Select language":
> TypeScript
```

--------------------------------

### Serve all applications with npm run run:all

Source: https://module-federation.io/integrations/framework/angular/angular-cli.html

Uses the npm script `run:all` installed by the `ng-add` and `init` schematics to serve all applications simultaneously. The optional arguments specify which applications to serve.

```bash
npm run run:all
# or
npm run run:all shell mfe1
```

--------------------------------

### Generate HomeComponent and ProfileModule

Source: https://module-federation.io/integrations/framework/angular/okta-auth.html

Run these commands to create a HomeComponent and a ProfileModule with routing, added as a lazy-loaded route to the AppModule.

```bash
ng generate component home --project mfe-profile
```

```bash
ng generate module profile --project mfe-profile --module app --routing --route profile
```

--------------------------------

### shareKey configuration example

Source: https://module-federation.io/configure/shared.html

Shows how to configure a shared module with a custom alias, mapping 'my-alias' to the 'react' package and setting 'shareKey' to 'react' for negotiation in the Share Scope. If 'shareKey' is omitted, the negotiation key defaults to the property name ('my-alias'), which may cause mismatches.

```javascript
shared: {
  'my-alias': {
    import: 'react',      // actual package to resolve
    shareKey: 'react',    // negotiate in Share Scope as "react"
  },
}
```

--------------------------------

### Open a page with MF diagnostics

Source: https://module-federation.io/guide/debug/divebell.html

Sets up the environment and opens a page with the --mf flag to enable the extension before navigation, capturing the initial MF loading history. The bare --mf flag differs from --mf <name> on some divebell mf commands.

```bash
divebell setup
divebell open "https://example.com" --mf
```

--------------------------------

### Install @module-federation/modern-js-v3 with yarn

Source: https://module-federation.io/guide/runtime/index.html

Install the `@module-federation/modern-js-v3` package using yarn for Modern.js v3 projects.

```bash
yarn add @module-federation/modern-js-v3 --save
```

--------------------------------

### Install with pnpm

Source: https://module-federation.io/integrations/documentation/rspress.html

Install the plugin using pnpm. Requires Rspress version 2.0.0-beta.16 or higher.

```bash
pnpm add @module-federation/rspress-plugin
```

--------------------------------

### Install with yarn

Source: https://module-federation.io/integrations/documentation/rspress.html

Install the plugin using yarn. Requires Rspress version 2.0.0-beta.16 or higher.

```bash
yarn add @module-federation/rspress-plugin
```

--------------------------------

### Install with npm

Source: https://module-federation.io/integrations/documentation/rspress.html

Install the plugin using npm. Requires Rspress version 2.0.0-beta.16 or higher.

```bash
npm add @module-federation/rspress-plugin
```

--------------------------------

### preloadRemote with Pure Runtime (createInstance)

Source: https://module-federation.io/guide/runtime/runtime-api.html

Uses createInstance to create a runtime instance and calls preloadRemote on it. Demonstrates filtering, preloading all resources, and preloading specific exposes without the build plugin.

```javascript
import { createInstance } from '@module-federation/enhanced/runtime';

const mf = createInstance({
  name: 'mf_host',
  remotes: [],
});

mf.registerRemotes([
  {
    name: 'sub1',
    entry: 'http://localhost:2001/mf-manifest.json',
  },
  {
    name: 'sub2',
    entry: 'http://localhost:2002/mf-manifest.json',
  },
  {
    name: 'sub3',
    entry: 'http://localhost:2003/mf-manifest.json',
  },
]);

// preload sub1 module
// filter the resource information that carries ignore in the resource name
// only preload sub-dependent sub1-button module
mf.preloadRemote([
  {
    nameOrAlias: 'sub1',
    filter(assetUrl) {
      return assetUrl.indexOf('ignore') === -1;
    },
    depsRemote: [{ nameOrAlias: 'sub1-button' }],
  },
]);

// preload sub2 module
// preload all exposes under sub2
// preload synchronous and asynchronous resources of sub2
mf.preloadRemote([
  {
    nameOrAlias: 'sub2',
    resourceCategory: 'all',
  },
]);

// preload add expose of sub3 module
mf.preloadRemote([
  {
    nameOrAlias: 'sub3',
    resourceCategory: 'all',
    exposes: ['add'],
  },
]);
```

--------------------------------

### Install webpack with pnpm

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs webpack as a dev dependency using pnpm. Required to avoid MODULE_NOT_FOUND errors.

```bash
pnpm add webpack -D
```

--------------------------------

### Import Runtime APIs from @module-federation/enhanced/runtime

Source: https://module-federation.io/guide/runtime/index.html

Import `createInstance` and `loadRemote` from the runtime entry point of the enhanced package.

```javascript
import { createInstance, loadRemote } from '@module-federation/enhanced/runtime';
```

--------------------------------

### Install webpack with yarn

Source: https://module-federation.io/integrations/framework/nextjs/basic-example.html

Installs webpack as a dev dependency using yarn. Required to avoid MODULE_NOT_FOUND errors.

```bash
yarn add webpack -D
```