@flow48/mfe-loader

MFELoader is a lightweight React component designed to load micro frontends (MFEs) dynamically inside a host React application using Qiankun. It simplifies mounting, unmounting, and prop passing, allowing easy integration of micro frontends.

Features

• Dynamically load micro frontends based on app name and entry.
• Pass props from the host application to the micro frontend.
• Automatic mounting and unmounting.
• Supports multiple independent instances of the same micro frontend.
• Type-safe integration for React + TypeScript.

Usage

1. Basic usage

import { MFELoader } from '@flow48/mfe-loader';

export const MFEDmsLoaderExample = () => {
  return (
    <MFELoader
      app="dms"
      name="MFEDmsLoaderTest1"
      props={{
        initialPath: '/account-documents',
        testProp: 'Test Value',
      }}
    />
  );
};

• app: The unique name of the micro frontend you want to load.
• name: A unique identifier for this instance (used internally by Qiankun).
• props: An object with props to pass to the micro frontend.

2. Passing props to specific components

<MFELoader
  app="dms"
  name="MFEDmsLoaderTest1"
  props={{
    initialPath: '/account-loan-documents',
    sfWidgetProps: {
      userId: '12345',
      theme: 'dark',
    },
  }}
/>

Inside the sub-app, the sfWidgetProps can be forwarded to a specific component:

<Route
  path="/account-loan-documents"
  element={<SfWidget {...props.sfWidgetProps} />}
/>

3. Multiple instances

Render multiple instances of the same micro frontend by providing a unique name:

<MFELoader app="dms" name="MFE1" props={{initialPath: '/doc1'}} />
<MFELoader app="dms" name="MFE2" props={{initialPath: '/doc2'}} />

Each instance maintains its own state and container.

Notes

• Ensure the sub-app implements Qiankun lifecycle methods (bootstrap, mount, unmount) and accepts props.
• Avoid calling render() inside update() in the sub-app to prevent overwriting the host app.
• For dynamic prop updates, use state management or context inside the sub-app.

Installation

yarn add @flow48/mfe-loader

Publishing

Releases are handled entirely by .github/workflows/publish.yml — there's no manual npm version or npm publish step. The git tag is the single source of truth for the version.

Step 1 — Merge your changes to master via a reviewed PR

Step 2 — Draft a GitHub Release

• Tag: a semver string, v prefix optional (e.g. 1.2.3) — pick the bump based on what changed: patch (fixes), minor (new features), major (breaking changes).
• Target: master
• Release label:
  • None → publishes to npm's latest tag, e.g. tag 1.2.3
  • Pre-release → publishes to npm's next tag instead, tag must carry a semver pre-release suffix, e.g. 1.2.3-next.0, 1.2.3-next.1, ... Once ready to ship for real, bump to a plain tag (e.g. 1.2.4) and publish without the Pre-release label.

Set the tag suffix and the Pre-release checkbox consistently — they're independent fields in GitHub's UI and nothing forces them to agree.

Step 3 — Publish the release

The workflow then: stamps package.json's version from the tag, lints, checks the version isn't already published, builds, and publishes via npm's OIDC trusted publisher (no NPM_TOKEN secret involved).

Step 4 — Verify

npm view @flow48/mfe-loader version        # latest
npm view @flow48/mfe-loader@next version   # latest pre-release, if any

Run in development mode with watch

1. Create a symlink to use the local version of the package in another project

# In the mfe-loader project root
yarn link

2. Link the package in the host project

# In the host project root
yarn link @flow48/mfe-loader

3. Start the build in watch mode

yarn build:dev --watch

Now any changes made to the mfe-loader package will be reflected in the host project in real-time.