Module Federation

Choose between a Webpack-based and a Vite-based solution for Module Federation.

We recommend using the solutions in a Platforms setup, to enjoy an excellent developer experience.

Make sure to run the following commands inside a Bit workspace.

The following steps will guide you through setting up a Webpack-based Module Federation project.

To learn more about configuring the apps, building and deploying them, refer to Bit's Webpack Module Federation app-type documentation.

A platform app orchestrates the host and remote apps (as well as possible micro services). 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

$bit use examples/mf-platform

Copied

Run the following to run the platform app locally:

$bit run mf-platform

Copied

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

Run the following to fork a remote module:

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

Copied

Replace the current 'reactions' import statement in the mf-platform.bit-app.tsx file with the following:

/**
 * @filename: 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 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 setup):

$bit use examples/reactions-mf

Copied

$bit run reactions

Copied

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

Replace the current 'reactions' import statement in the mf-platform.bit-app.tsx file with the following:

/**
 * @filename: mf-platform.bit-app.tsx
 */

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

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

$bit use examples/monsters-ui

Copied

$bit run monsters-ui

Copied

The following steps will guide you through setting up a Vite-based Module Federation project.

To learn more about configuring the apps, building and deploying them, refer to Bit's Vite Module Federation app-type documentation.

A platform app orchestrates the host and remote apps (as well as possible micro services). Run the following to fork a platform app and set it as an app in your workspace:

$bit fork bitdev.react/examples/vite-mfe-platform

Copied

$bit use examples/vite-mfe-platform

Copied

Run the following to run the platform app locally:

$bit run vite-mf-platform

Copied

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

Run the following to fork a remote module:

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

Copied

Replace the current 'reactions' import statement in the platform.bit-app.tsx file with the following:

/**
 * @filename: platform.bit-app.tsx
 */

// REPLACE THIS WITH THE FORKED COMPONENT PACKAGE NAME
const Reactions = import.meta.resolve('@bitdev/react.examples.vite-reactions');
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 setup):

$bit use examples/vite-reactions

Copied

$bit run vite-reactions

Copied

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

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

Copied

Replace the current 'reactions' import statement in the platform.bit-app.tsx file with the following:

/**
 * @filename: platform.bit-app.tsx
 */

// REPLACE THIS WITH THE FORKED COMPONENT PACKAGE NAME
const MonstersUI = import.meta.resolve(
  '@bitdev/react.examples.vite-monsters-ui'
);
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/vite-monsters-ui

Copied

$bit run vite-monsters-ui

Copied