Mastering Micro Frontends with Module Federation and Bit

As we continue to evolve and refine the micro frontend architecture style, there's been a growing interest in solutions that support and simplify the implementation of these designs.

Two such technologies, Webpack's Module Federation and Bit have proven to be particularly effective when paired together. This pairing of technologies works seamlessly as both technologies prioritize independence and composability.

While Bit takes care of the independent development and build/deployment of components, Webpack Module Federation steps in to handle the runtime integration of these components. By modifying the generated bundle of both remote and host app components, it integrates the necessary runtime code and deduplicates shared assets and dependencies.

This elegant dance between Bit and Module Federation ensures that components, while being developed independently, can still be consumed and function together harmoniously at runtime.

In this tutorial, we'll be building a simple web app with a landing page and an authentication form. The landing page will be the host app, and the authentication form will be a remote app.

Create a new workspace using a pre-made template for React Module Federation:

$bit new module-federation-react my-mf-workspace --aspect learnbit.module-federation/mf-react-env

Copied

Run the remote app:

$bit run remote-app

Copied

Run the host app:

$bit compile

Copied

$bit run host-app

Copied

Run the following to list the component templates available for React Module Federation:

$bit templates --aspect learnbit.module-federation/mf-react-env

Copied

The output should look similar to the following:

Use the templates to extend your distributed app. For example, run the following to create a new remote app:

$bit new mf-remote-app --aspect learnbit.module-federation/mf-react-env

Copied

Head over to the host-webpack-transformer component, to add the new remote app to the host app.

Run the following to snap and export your components:

$bit tag

Copied

$bit export

Copied

To learn how to deploy your apps (when snapping/tagging) see React app deployment.

The template will scaffold a workspace with the basic Bit components needed to get started.

To see the components in the workspace, run the following:

$bit start

Copied

As you already know, each Bit component is versioned-controlled, developed and built independently. App components are Bit components that include in their build pipelines, two additional important steps: app build and app deployments.

• Host app: A React app that will host the remote app.
• Remote app: A React app that will be consumed by the host app.

This demo includes a single shared components, the auth context.

The auth context component is a React component that will be used to share the authentication state between the host and remote apps. This component is defined as a shared dependency of both apps, as it must have a single instance (to avoid multiple instances of the auth state, as well as to reduce the bundle size of the remote apps).

A component development environment customized for the development of our React Module Federation apps. This env wraps the preview of the app components with the same context provider that will be used in production (the auth context, in this case).

Webpack transformers are components that modify the components' preview or app's bundle. In this workspace, we have two transformers:

• Host webpack transformer: A webpack transformer that modifies the host app's webpack config to include the necessary configurations for it to consume the remote app. This transformer is used by the host env for component previewing, and by the host app, in development and during its build process.
• Remote webpack transformer: A transformer that modifies the remote app's webpack config to include the necessary configurations for the remote app to be consumed by the host app. This transformer is used by the remote apps, in development and during their build process.