Tools and Frameworks
The micro frontend ecosystem has grown significantly. From meta-frameworks to build tools to deployment orchestration, understanding the landscape helps you choose the right stack for your context. This page provides an overview of frameworks, standards, build tools, orchestration options, and testing strategies.
Frameworks and Libraries
Section titled “Frameworks and Libraries”Single-SPA
Section titled “Single-SPA”Single-SPA is a meta-framework for composing multiple frontend frameworks in one application. It does not prescribe a specific framework—you can mix React, Vue, Angular, Svelte, or vanilla JS. Each micro frontend is a “application” or “parcel” that Single-SPA mounts and unmounts based on routing.
Key features: Framework-agnostic, routing-based composition, lifecycle management (bootstrap, mount, unmount), support for parcels (smaller units than full apps). Good for organizations with existing apps in different frameworks or teams with framework preferences.
For composition patterns that map to Single-SPA’s model, see Composition Strategies.
Module Federation (Webpack 5 / Rspack)
Section titled “Module Federation (Webpack 5 / Rspack)”Module Federation enables runtime code sharing between independently built and deployed applications. A “host” can consume modules from “remotes” at runtime without a single build. Remotes expose components, utilities, or shared dependencies; the host loads them dynamically.
Use cases: Sharing React or design system across micro frontends, lazy-loading remote applications, reducing duplicate bundles. Implemented natively in Webpack 5 and Rspack; Vite supports it via @originjs/vite-plugin-federation. For a deep dive, see Module Federation.
Piral is a framework for building portal-like applications from micro frontends. It provides a shell (the “pilets” portal) and a set of conventions for developing “pilets” (micro frontends). Pilets are developed in isolation and composed at runtime.
Key features: Strong typing, CLI tooling, plugin system, support for multiple frameworks. Suited for enterprise portals and dashboards where a central shell orchestrates many pluggable MFs.
Luigi by SAP is a micro frontend framework for building admin UIs and enterprise applications. It provides a shell with navigation, authentication, and theming; micro frontends integrate as “view groups” or iframes.
Key features: Built-in auth, centralized navigation, theming, backend integration. Often used in SAP ecosystems and enterprise admin contexts.
Bit focuses on component-driven development. Teams publish components to a shared scope; applications compose them. Bit enables discovery, versioning, and composition of components across repositories—useful for design systems and shared UI across micro frontends.
Key features: Component versioning, composition from multiple sources, design system distribution. Complements micro frontends when MFs consume shared components.
Qiankun
Section titled “Qiankun”Qiankun is a micro frontend framework based on Single-SPA, popular in the Chinese ecosystem. It adds features like HTML entry support, CSS isolation, and JS sandboxing. Built by the Umi team at Alibaba.
Key features: Simple API, HTML entry (not just JS), style isolation, lifecycle hooks. Good choice when integrating legacy or non-SPA applications.
Web Standards
Section titled “Web Standards”Web Components
Section titled “Web Components”Web Components are native browser APIs: Custom Elements (define new HTML elements), Shadow DOM (encapsulate styles and markup), and HTML Templates. Framework-agnostic and portable across any environment.
Micro frontend use: Each MF can expose Web Components; the shell mounts them. Enables true technology diversity—React, Vue, and Angular can all produce Web Components. See the glossary for Custom Elements and Shadow DOM definitions.
Import Maps
Section titled “Import Maps”Import Maps allow browser-native module resolution. You map bare specifiers (e.g., "react") to URLs, so the browser loads modules without a bundler step. Useful for sharing dependencies across micro frontends in development or simple production setups.
Use cases: Development without bundling, controlling which version of a dependency loads, sharing modules across MFs at runtime.
Build Tools
Section titled “Build Tools”Webpack 5 with Module Federation
Section titled “Webpack 5 with Module Federation”The reference implementation of Module Federation. Webpack 5’s ModuleFederationPlugin configures host and remote applications. Mature, widely used, and well-documented.
Vite with vite-plugin-federation
Section titled “Vite with vite-plugin-federation”Vite offers fast development and Rollup-based production builds. @originjs/vite-plugin-federation brings Module Federation to Vite, enabling runtime sharing and remote loading in Vite projects. Good for teams preferring Vite’s DX.
Rspack
Section titled “Rspack”Rspack is a Rust-based bundler compatible with Webpack’s API and ecosystem. It supports Module Federation and offers faster build times. Suitable for large projects where Webpack build performance is a bottleneck.
Orchestration
Section titled “Orchestration”Kubernetes for Container-Based MF Deployments
Section titled “Kubernetes for Container-Based MF Deployments”Each micro frontend can be deployed as a container; Kubernetes orchestrates scaling, rolling updates, and routing. Use Ingress or service mesh for routing traffic to the right MF. Common in full-stack microservices environments where MFs are served by separate services.
CDN-Based Deployment
Section titled “CDN-Based Deployment”Deploy static MF bundles to a CDN (Cloudflare, Vercel, Netlify, etc.). The shell fetches MF entry points from CDN URLs. Simpler than K8s for static frontends; combines well with content hashing and immutable caching.
Testing Tools
Section titled “Testing Tools”Cypress for E2E Across MFs
Section titled “Cypress for E2E Across MFs”Cypress runs end-to-end tests in a real browser. Test full user flows that span multiple micro frontends—navigation, interactions, and assertions across MF boundaries. Integrate into CI for regression coverage.
Pact for Contract Testing
Section titled “Pact for Contract Testing”Pact verifies contracts between consumers and providers. In micro frontends, use it for API contracts (MF ↔ backend) or for MF-to-MF contracts when one MF depends on another’s API. Ensures MFs remain compatible across independent deployments.
Comparison Considerations
Section titled “Comparison Considerations”When evaluating tools, consider:
- Maturity: Production usage, release history, and stability.
- Community: Documentation, examples, and community support.
- Learning curve: How much your team needs to learn.
- Fit with composition strategy: Client-side vs server-side, routing-based vs slot-based—see Composition Strategies for how tools map to strategies.
- Framework support: Not all tools support all frameworks equally.
- Build performance: Vite and Rspack offer faster builds than Webpack for many scenarios.
Summary
Section titled “Summary”The micro frontend ecosystem spans meta-frameworks (Single-SPA, Piral, Luigi), runtime sharing (Module Federation), standards (Web Components, Import Maps), and build tools (Webpack, Vite, Rspack). Orchestration ranges from CDN-based static hosting to Kubernetes. Testing with Cypress and Pact covers E2E and contract verification. Choose based on your composition strategy, team skills, and operational constraints. For a deeper look at Module Federation, see Module Federation; for composition approaches, see Composition Strategies.
Go Deeper in the Book
Get the complete guide with detailed examples, diagrams, and production-ready patterns in Micro Frontends Architecture for Scalable Applications.