Module Federation

A module federation solution requires at least two components: a host and a remote. Both are app components, as they are deployed and consumed in runtime.

This tutorial assumes prior knowledge of module federation and its concepts. If you are new to module federation, we recommend reading the official documentation.

Run the following to fork a host React app:

$bit fork learnbit-react.module-federation/apps/host-app

Copied

Run the following to make your host app loadable by your workspace:

$bit use apps/host-app

Copied

Run the following to run your host app locally:

$bit run mf-host

Copied

To learn how to deploy your app, see app deployment.

The host app uses a webpack transformer to add a module federation plugin to the app's default webpack config.

This plugin is configured with a single remote, and with a few shared dependencies.

Run the following to fork the host webpack transformer:

$bit fork learnbit-react.module-federation/webpack-transformers/mf-host-transformer

Copied

The host app component uses a custom React env to support component previewing. This env uses the same webpack transformer that's used for the app's production bundle.

Run the following to fork the host env:

$bit fork learnbit-react.module-federation/envs/mf-host-env

Copied

Run the following to fork a remote React app:

$bit fork learnbit-react.module-federation/apps/remote-app

Copied

Run the following to make your remote app loadable by your workspace:

$bit use apps/remote-app

Copied

Run the following to run your remote app locally:

$bit run mf-remote

Copied

The host app uses a webpack transformer to add a module federation plugin to the app's default webpack config.

This plugin is configured to expose a module, and is set with a few shared dependencies.

Run the following to fork the remote webpack transformer:

$bit fork learnbit-react.module-federation/webpack-transformers/mf-remote-transformer

Copied