Microfrontends Local Development Guide
Microfrontends break down large frontends into multiple independent applications, coordinating the main application and sub-applications locally through different localhost ports.
Microfrontends is an architectural pattern that decomposes a monolithic frontend into multiple independently developed, tested, and deployed small applications, which are then composed into a complete product in the browser. During local development, each sub-application typically runs on a different localhost port.
Common Implementation Methods
| Solution | Description |
|---|---|
| Module Federation | Webpack / Rspack / Vite plugin for runtime loading of remote modules |
| iframe Integration | Strong isolation, communication requires postMessage |
| Web Components | Framework-agnostic, encapsulated custom elements |
| Monorepo + Reverse Proxy | Each package has an independent dev server, with NGINX or dev proxy as a unified entry point |
Typical Local Port Layout
| Application | Example Address |
|---|---|
| Main Application (Shell) | http://localhost:3000 |
| Sub-Application A | http://localhost:3001 |
| Sub-Application B | http://localhost:3002 |
The main application loads the remoteEntry.js exposed by sub-applications through Module Federation or a proxy in the development environment.
Key Points for Local Coordination
- Start simultaneously the main application and the dev servers of each remote.
- CORS: Pay attention to cross-origin headers when loading remote modules, or use a same-origin proxy.
- Version Alignment: Shared dependencies (like React) should be set as singletons to avoid multiple instances.
- Unified Entry: In production, a single domain is provided by CDN or gateway; during development, ports can be dispersed.
Applicable Scenarios
- Multiple teams maintaining different business modules of the same portal.
- Gradual migration from a monolithic frontend.
- Subsystems requiring independent release cycles.
Conclusion
Microfrontends do not have a single default port; local development requires assigning different localhost ports for the Shell and each sub-application and coordinating them. When choosing an approach, balance isolation, performance, and team autonomy needs.