Micro-Frontend Architecture

Framework Selection

Core Workflow

1. Design → Define app boundaries, shared dependencies, routing strategy
2. Setup → Configure main app shell + sub-apps (see framework-specific refs)
3. Communication → Choose communication pattern (see references/communication.md)
4. Style Isolation → Prevent CSS conflicts (see references/style-isolation.md)
5. Deploy → Independent CI/CD per sub-app (see references/deployment.md)

References

• references/module-federation.md — Webpack Module Federation config & patterns
• references/qiankun.md — qiankun registration, sandbox, lifecycle hooks
• references/single-spa.md — single-spa root config & app registration
• references/communication.md — Props, CustomEvent, shared store patterns
• references/style-isolation.md — Shadow DOM, CSS Modules, scoped strategies
• references/deployment.md — Independent deploy, CDN, versioning strategy