Microfrontends with Module Federation and Bit

Bit improves your Module Federation based Microfrontends platform with features to help streamline MFE delivery:

• Independent semantic version for each Microfrontend, including storing bundles for past versions.
• Templates for creating MFEs, shared configs (eslint, prettier, tsconfig, webpack/rspack) and managed deploy pipelines for standardization.
• Documentation and discoverability, including changelog, automated API reference, Markdown/MDX, dependency graph and more.
• Shared code between MFEs.
• Simplify MFE configuration with defaults for Webpack and RSpack.
• Use Bit Platform to improve DX for building large-scale platforms in the same, or across many repositories.

Below are some example implementations:

• Example host-app React application as a Bit component.
• Example remote React MFE as a Bit component.
• Example platform that stitch host-app and remote MFEs under one roof.

Run the following command to initialize a Bit:

bit init
Copied

Open your workspace.jsonc and add the following generator config: (use the generator relevant for your stack)

"teambit.generator/generator": {
    "envs": [
      "frontend.module-federation/envs/mf-react-env",
      "frontend.module-federation/envs/mf-vue-env"
    ]
  },
Copied

Run the install command to add all missing dependencies for the generators:

bit install
Copied

bit templates
Copied

Run the generator to create a basic remote. You will be asked to select between using Webpack and RSpack, in both cases, Module Federation 2.0 is used. The different is the underline tool.

bit create modfed-remote-mfe mfes/remotemfe
Copied

This generates a new Bit app with some boilerplate code, docs and configs.

Run the MFE:

bit run remotemfe -w
Copied

If you already have a host application that uses Module Federation, you can already configure the newly created remote MFE to one of it's remotes.
In case you don't, the next step will walk you through creating a host application that can use this MFE.

bit app list
Copied

Run the generator to create a basic host application:

bit create modfed-host-app mfes/hostapp
Copied

This generates a new Bit app with some boilerplate code, docs and configs.

Run the app:

bit run hostapp -w
Copied

To configure your remotes, head to the host app, find the *.bit-app.ts file, and configure the array of remotes to point to the remote MFE, as shown here.

Depending on your selected tool (Webpack or RSpack), a different Application Type will be a dependency of that file. The Application Type provides basic configuration for running your MFE/App and includes recommended defaults for Module Federation.
You can use it's APIs to control the configuration:

• RSpack Application Type for Module Federation API Reference
• Webpack Application Type for Module Federation API Reference

All configuration options are available in the Module Federation website.

Bit does not serve MFEs for production. It's recommend to use your own hosting infrastructure.

Application Types provide an optional deploy function you can use to create a custom deployer, this allows you to streamline your deployment process as it can be packaged to a single component.

There are a few existing deployers you can already use by setting them in the *.bit-app.ts file as described here.
You can even create your own custom deployer implementation.

The deploy pipeline is triggered during bit tag or snap commands.

Bit Platform app allows you to stitch together a host app and several MFEs under a single component. While not required, this has several benefits:

• Single bit run command to spin up many MFEs and a host app.
• Works when MFEs are in different repositories or in the same repository without any configuration changes.
• Passes configuration for remotes across all hosts and MFEs so you don't need to manage hostnames or ports.
• Seamlessly use deployed remotes and local remotes combined.
• Optional platform deployment (a single deploy function that gets all artifacts of all MFEs participating in the platform so you can orchestrate a deployment)

First create a simple platform app:

bit create modfed-platform platform/my-modfed-system
Copied

Now head to the *.bit-app.ts file, and do the following:

• Import all MFEs and host app
• Set your host app as the main entry point
• Set all MFEs in the services array
  • remoteUrl is optional and will allow Platform to pull the artifact from a deployed MFE in case the component is maintained in a different workspace

See here for more documentation, and use this as a reference.

The platform is registered as a single app:

bit app list
Copied

Run the app, and see how Bit runs all required services to orchestrate the complete platform:

bit run my-modfed-system -w
Copied

• React + Module Federation application type
• React Environment for Module Federation
• Bit Platform
• RSpack Application Type for Module Federation
• Webpack Application Type for Module Federation