UMD Micro Frontend

A UMD micro frontend is an app that is bundled to a UMD target to make it consumable by other apps, using a <script> tag. This provides a simple solution for runtime integration, that is not dependent on any specific MFE frameworks or tools.

The UMD MFE uses this webpack transformer to set the target output for the bundler to a UMD library.

Run the following to fork a demo React app loadable by a script tag:

$bit fork learnbit-react.apps/umd/basic-app

Copied

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

$bit use umd/basic-app

Copied

Run the following to build this app:

$bit build umd/basic-app

Copied

Check the generated output in the app's corresponding capsule (run bit capsule list to get the workspace capsule root dir path).

Load a UMD Micro Frontend

The app is bundled into two separate files: CSS and JS. Load them both into the host app using a <script> tag and a <link> tag, correspondingly. The app will mount, byt default, on an element with a #umd-target ID.

<link href="https://umd-app-example.netlify.app/umd-target.css" rel="stylesheet"></link>
<script src="https://umd-app-example.netlify.app/umd-target.js"></script>
/* the umd app will be mounted on an element that has the 'umd-target' id */
<div id="umd-target"></div>
Copied

Use this component to load UMD into React host apps

Use the load-from-cdn component to load the UMD micro frontend into your React app.

Shared dependencies

To remove dependencies that are expected to be found in the host app, from your MFE's bundle, fork the webpack-transformer used by that MFE, and add dependencies to the externals property:

$bit fork learnbit-react.apps/umd/webpack-transformer

Copied

For example, the following adds 'react' and 'react-dom' as dependencies that should not be included in the MFE's bundle:

export const umdWebpackTransformer: WebpackConfigTransformer = (
  configMutator: WebpackConfigMutator
) => {
  // ...
  configMutator.addExternals({
    react: 'react',
    'react-dom': 'reactDOM',
  });
  return configMutator;
};
Copied