Mastering Micro Frontends with Module Federation and Bit

ig
ignacioaldama1 year ago

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.

Getting Started

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.

1. Create a workspace with React Module Federation apps

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

$bit
Copiedcopy

2. Run apps locally

Run the remote app:

$bit
Copiedcopy

Run the host app:

$bit
Copiedcopy
$bit
Copiedcopy

3. Create additional apps (optional)

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

$bit
Copiedcopy

The output should look similar to the following:

The following template(s) are available with the command bit create:
Example - bit create <template-name> <component-name>

mf-react-env (learnbit.module-federation/mf-react-env)

mf-host-app
mf-remote-app
mf-host-transformer
mf-remote-transformer

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

$bit
Copiedcopy

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

4. Export components and deploy apps

Run the following to snap and export your components:

$bit
Copiedcopy
$bit
Copiedcopy

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

What's in the workspace?

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
Copiedcopy

App components

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.

Auth context component

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

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 transformer components

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.