Micro Frontend Architecture: Concepts, Usage Scenarios, and Step‑by‑Step Guide to Building a React Base Application

Introduction – The author describes a recent project where a unified tech stack using Ant Design Pro‑Table and React was adopted for new pages, while legacy Vue pages remained; to integrate both, a micro‑frontend approach was chosen, creating a React host (base) application that loads the existing Vue apps as sub‑applications.

1. What is a Micro Frontend? – Inspired by micro‑services, a micro‑frontend aggregates multiple independent front‑end projects under a single host, reducing coupling and improving extensibility. It is an architectural style, not a specific library or framework, and follows three core principles: independent run, independent deploy, and independent develop.

2. When to Use Micro Frontends

Large, hard‑to‑maintain projects.

Cross‑department or cross‑team collaborations that increase communication overhead.

Legacy projects that cannot be fully rewritten immediately.

Need for independent deployment of single‑page applications.

Desire to improve initial load time via lazy loading.

Multiple sub‑applications lacking unified standards, causing duplicated effort.

3. Framework Selection – Existing options include single-spa , qiankun (a wrapper around single‑spa), and MicroApp (a lightweight WebComponent‑based solution). The author chose umi + react + typescript and found qiankun suitable, though its configuration is complex.

MicroApp Advantages

Lowest integration cost: encapsulate pages as a WebComponent and render with a single line of code.

No need to modify child apps' rendering logic or webpack configuration.

Provides sandbox, style isolation, element isolation, pre‑loading, data communication, and static asset completion.

Zero dependencies, resulting in a small bundle and high extensibility.

Works across any front‑end framework (React, Vue, Vite, Angular, Next.js, Nuxt.js).

4. Building the Micro‑Frontend Host

Install the library:

npm i @micro-zoe/micro-app --save

Verify the dependency appears in package.json :

"@micro-zoe/micro-app": "^1.0.0-alpha.7"

Create a global entry file (e.g., global.tsx ) to start the micro‑app runtime:

import microApp from '@micro-zoe/micro-app'

microApp.start()

Define a route for a sub‑application in the host's routing configuration:

{
  path: '/yp',
  name: 'yp',
  linkHidden: true,
  linkDisable: true,
  breadcrumbClose: true,
  component: '@/pages/yp-app',
}

Create the sub‑application entry ( yp-app ) with a React component that renders the micro‑app element and handles data events:

import React from 'react';
import config from '@/config';

export default (): React.ReactElement => {
  const onDispathChild = (e: any) => {
    const { isBackHome } = e.detail.data;
    if (isBackHome) window.location.href = '/';
  };
  return (
    <>
);
};

The host can then navigate to the sub‑app using history push and micro‑app router push, optionally delaying the second call with setTimeout to ensure the sub‑app is loaded.

5. Cross‑Origin Configuration

For local development, add headers in webpack-dev-server :

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
},

For backend CORS, a Java filter example is provided:

@Override
public void init(FilterConfig filterConfig) {
    this.origins = Lists.newArrayList(
        "http://localhost:8088",
        "https://xx.51epei.com",
        "https://xx.yunxiu.com",
        "https://dev.51epei.com:8088",
        "https://xx.51epei.com:7000");
}

6. Proxy Configuration – Adjust the proxy to correctly route local requests to sub‑applications, e.g.:

proxy: (() => {
  return {
    '/avoid': {
      target: 'https://pai.51epei.com',
      changeOrigin: true,
      bypass: (req) => {
        if (req.headers.accept.indexOf('html') !== -1) {
          return '/index';
        }
      },
    }
  }
})()

7. Data Communication – micro-app offers scoped communication (host ↔ specific sub‑app) and global communication across all sub‑apps, preventing data pollution. Detailed API documentation is referenced at the official site.

Conclusion – Micro‑frontend architecture enables the integration of disparate legacy and new applications, reduces coupling, and improves scalability. The micro‑app library, leveraging WebComponent and Shadow DOM, provides the lowest‑cost entry point, but developers should evaluate whether the added complexity aligns with project needs.