Module Federation

You can use Module Federation to deploy components for use at runtime. Any UI component can be turned easily into a federated module using Bit apps by adding a single *.bit-app.ts file:

// react-mfe.bit-app.ts
import { MfReact } from '@bitdev/react.app-types.mf-react';

export default MfReact.from({
  name: 'reactions',
  clientRoot: './bootstrap.js',
  moduleFederation: {
    filename: 'remoteEntry.js',
    exposes: {
      './reactions': './reactions-mf.js',
    },
    shared: {
      react: {
        requiredVersion: '^18.2.0',
        singleton: true,
        eager: true,
      },
    },
  },
  // deploy: Netlify.deploy(netlifyConfig),
});
Copied

You can also create new federated modules or use federated modules in apps or platform compositions as described below.

Create a federated module

Create a new federated module by runnning the following command:

$bit fork bitdev.react/examples/reactions-mf

Copied

You can serve the federated module by running the app:

$bit use examples/reactions-mf

Copied

$bit run reactions

Copied

Your federeated module dev server is now served the port displayed in the command output.

Create a host

You can use a simple React app as a host, or create a platform composition.

Host app

Run the following to fork a host app and set it as an app in your workspace:

$bit fork bitdev.react/examples/monsters-ui

Copied

Use the newly created federated module in the app:

const reactionsHost = process.env.REACTIONS_URL || `https://localhost:3000`;

export default MfReact.from({
  name: 'monsters-ui',
  clientRoot: './monsters-ui.app-root.js',
  moduleFederation: {
    remotes: {
      reactions:
        // replace with your app
        `reactions@https://${reactionsHost}/remoteEntry.js`,
    },
  }
});
Copied

Run the following to set the component as an app in your workspace and run it locally (you can skip this step if you are using a platform app):

$bit use examples/monsters-ui

Copied

Run the host app:

$bit run monsters-ui

Copied

Your host application should be running the port displayed in the command output. Make sure your federated module is running as well for the app to successfully load it.

Platform composition

A platform composition app orchestrates the host and remote apps (as well as possible the required backend) to run an entire platform for development, and deployment purposes. Run the following to fork a platform app and set it as an app in your workspace:

$bit fork bitdev.react/examples/mf-platform

Copied

Replace the current 'reactions' import statement in the platform.bit-app.tsx file with your newly created module:

// mf-platform.bit-app.tsx

// REPLACE THIS WITH THE FORKED COMPONENT PACKAGE NAME
const Reactions = import.meta.resolve('@bitdev/react.examples.reactions-mf');
Copied

Run and use the following to run the platform app locally:

$bit use examples/mf-platform

Copied

$bit run mf-platform

Copied

When you run the platform app, it automatically runs the host and remote apps.

Learn more

Module federation with Vite