How to Seamlessly Integrate Micro‑Frontends into Legacy Sites: A Practical Guide

Introduction

Micro‑frontends bring clear advantages but also introduce challenges, especially when trying to adopt them on an existing site built with an older technology stack. This article shares a practical integration scheme and implementation details.

Background

The team maintains PC‑based backend workstations that operate across different countries, time zones, and partners. New pages are often developed by developers from various teams, making it difficult to keep UI style, design standards, components, and interactions consistent. Existing pages are rendered via Java‑based templates producing HTML, and although they all use React, each predecessor implemented it in a non‑standard way.

Most pages are generated from a JSON configuration consumed by components.

Some pages use a different JSON configuration defined by another team.

Other pages load via a JS bundle provided by a publishing platform.

Given this heterogeneous background, a concrete integration plan is required.

Solution & Flowchart

First, identify the common features needed for all pages:

Layout Loader – loads navigation for different workstations.

DADA Loader – loads pages generated from JSON configurations.

Source Code Loader – loads JS bundles.

Micro Loader – handles micro‑frontend loading.

Log Report – provides logging.

Time Zone – switches time zones.

i18n – switches languages.

Guider – manages user guidance.

Additional optional capabilities may include security monitoring, traffic control, modal management, surveys, and chatbot integration.

The overall loading flow is illustrated below:

Implementation Details

All pages must funnel their entry point through a unified Loader, enabling systematic handling of the page lifecycle while keeping the core path open for plugin extensions.

1. Plugin Mechanism

The main path loads a configuration that provides context to plugins. Example code for a standalone JS‑bundle sub‑application:

<div id="root"></div>
<script src="https://cdn.address/schema-resolver/index.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/layout.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/source-code.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/micro-loader.js"></script>
<script src="https://cdn.address/schema-resolver/plugin/i18n.js"></script>

<script>
  SchemaResolver.render({
    micro: true,
    host: "dev.address",
    hfType: "layout1",
    externals: ["//{HOST}/theme1/index.css"],
    // host is cdn prefix, the resource maybe in different env & country
    resource: {
      js: "/index.js",
      css: "/index.css",
    },
  }, { container: document.querySelector("#root") });
</script>

The Layout Plugin consumes the hfType field to load the appropriate layout resources. The Micro Loader creates a sandbox (based on qiankun) and provides a container for the sub‑application. The Source Code Plugin finally loads and renders the JS bundle. Each plugin is independent and pluggable.

2. Safe Migration

Because a one‑size‑fits‑all solution is unsuitable, the existing pages are analyzed and migrated in batches. A migration registry and automated end‑to‑end tests ensure controlled rollout and quantifiable coverage.

3. Micro‑Frontend Form

After migration, each micro‑frontend‑enabled page can act as a host application, the micro‑frontend feature can be toggled off if issues arise, and routing between micro‑frontend pages enables partial refresh while non‑registered pages trigger full navigation. Plugins allow conversion of various legacy stacks into sub‑applications.

Registration and invocation paths in SchemaResolver are shown below:

Conclusion

The essence of micro‑frontends lies in the outstanding thinking they represent; only when they solve concrete business problems do they deliver value. The presented SchemaResolver framework offers administrators global plugin capabilities, developers a standardized integration path for multiple tech stacks, and third‑party integrators a unified entry point without needing to understand internal menus or themes.