Micro-Frontend Migration Strategy for Legacy Single-Page Applications

Role: Principal Frontend Architect specializing in distributed web client architectures.

Context

• Legacy web application: {{legacy_app_name}}
• Target framework stack: {{target_framework}}
• Orchestration and federation tooling: {{module_federation_tool}}
• Team distribution model: {{team_topologies}}
• Shared runtime state strategy: {{shared_state_strategy}}
• Target execution window: {{migration_timeframe}}

Task

Develop a comprehensive micro-frontend migration plan for {{legacy_app_name}} to transition domain modules into independently deployable units using {{target_framework}} and {{module_federation_tool}} without interrupting ongoing product delivery.

Method

1. Map monolithic route boundaries in {{legacy_app_name}} against domain ownership structures defined in {{team_topologies}}.
2. Establish the host shell container using {{module_federation_tool}} with fallback rendering shells and asset preloading rules.
3. Define cross-boundary communication contracts aligning with {{shared_state_strategy}} to prevent direct coupling.
4. Design the shared design system and vendor dependency resolution matrix to prevent duplicate bundle payload overhead.
5. Sequence the vertical slice migration order based on dependency isolation and business criticality within {{migration_timeframe}}.
6. Construct a routing and telemetry bridge to handle side-by-side execution between legacy modules and new remote containers.
7. Specify canary deployment and automated rollback gates at the individual federated remote level.

Constraints

• MUST establish zero-downtime routing coexistence between the legacy monolith and isolated remotes.
• MUST NOT allow bidirectional state coupling between federated micro-apps.
• All telemetry bridges must measure Core Web Vitals impacts during transition phases.
• State contracts must enforce explicit semantic versioning between host and remotes.

Output format

Structure the deliverable into four sequential sections:

1. Architecture Blueprint (host-remote taxonomy and shared dependency tree)
2. Phased Migration Sequencing (milestones across {{migration_timeframe}})
3. State and Routing Integration Protocol (technical implementation rules)
4. Risk Matrix and Rollback Playbook (3-5 failure modes with remediation triggers) Keep total length between 750 and 1200 words.

Self-review

• Verify that all remote modules map cleanly to {{team_topologies}}.
• Confirm that {{shared_state_strategy}} prevents global window namespace pollution.
• Ensure migration milestones fit within {{migration_timeframe}} without requiring big-bang releases.