• English

      • Quick Start Guide

      Before reading this guide, please first read the Setting Up Environment. This guide will lead you step by step to learn how to use Module Federation. We will build two independent Single Page Applications (SPAs) that will share components using Module Federation. If you encounter unfamiliar terms in the following text, please refer to the Glossary.

      Creating a New Project

      Module Federation provides the create-module-federation tool to create projects. You don't need to install it globally; you can directly use npx to run it on-demand.

      You can use create-module-federation to create a Module Federation project by running the following command:

      npm
      yarn
      pnpm
      npm create module-federation@latest

      Just follow the prompts step by step. During the creation process, you can select the project type, role type, etc.

      Templates

      When creating a project, you can choose from the following templates provided by create-module-federation:

      TemplateDescription
      provider-modernA provider using Modern.js
      provider-rsbuildA provider using Rsbuild
      provider-rslibA provider using Rslib
      provider-rslib-storybookA provider using Rslib with the storybook feature enabled
      consumer-modernA consumer using Modern.js
      consumer-rsbuildA consumer using Rsbuild

      Quick Creation

      create-module-federation provides some CLI options. By setting these CLI options, you can skip the interactive selection steps and create a project with one click.

      For example, to create a Modern.js provider project named provider in the my-project directory with one click:

      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

      The complete CLI options for create-module-federation are as follows:

      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

      Create a provider

      Execute the create-module-federation command, select the required framework and type according to your needs, and select the role type as provider to create a project.

      Here we take creating an rsbuild provider project as an example:

      ➜  ~  ✗ 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.

      Create a consumer

      Execute the create-module-federation command, select the required framework and type according to your needs, and select the role type as consumer to create a project.

      Here is an example of creating an rsbuild consumer project:

      ➜  ~  ✗ 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.

      Replace provider

      The default consumer project created will consume a published provider. If you want to replace the provider, you need to modify the remotes configuration in module-federation.config.ts.

      module-federation.config.ts
      import { createModuleFederationConfig } from '@module-federation/rsbuild-plugin';

export default createModuleFederationConfig({
  name: 'mf_consumer',
  remotes: {
-   'provider': 'rslib_provider@https://unpkg.com/module-federation-rslib-provider@latest/dist/mf/mf-manifest.json',
+   'provider': 'rslib_provider@http://localhost:3000/mf-manifest.json',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

      Existing project integration

      If you want to integrate Module Federation into an existing project, you can refer to docs.

      Summary

      Through the above process, you have completed the export of a component from a 'provider' for use by a 'consumer' based on Module Federation. Along the way, you have preliminarily used and understood the configurations of remotes, exposes, and shared in the Module Federation plugin.

      If you wish to learn how to directly export and consume remote modules on Webpack and Rspack build tools, you can refer to: Rspack Plugin, Webpack Plugin

      Next Steps

      You may want to:

      Feature Navigation

      Learn about all the features provided by Module Federation

      Review Configuration

      Learn how to configure Module Federation

      Glossary of Terms

      Understand the concepts related to Module Federation

      Follow Us