feat: microfrontends (#10982)
## What
Turborepo now natively supports microfrontends development, allowing you
to run multiple frontend applications simultaneously with automatic
routing between them. By adding a microfrontends.json configuration file
to your workspace, you can define which applications handle specific URL
paths (like /docs, /blog, or /dashboard) and Turborepo will
automatically start a local proxy that routes requests to the correct
development server.
The proxy handles both HTTP requests and WebSocket connections, ensuring
features like hot module replacement work seamlessly. You can work
entirely offline with Turborepo's built-in proxy, or integrate with
@vercel/microfrontends when you're ready to deploy to production—using
the same configuration file for both environments.
Sub-features include:
- A production fallback for when you don't run an app
- An error page when an app is unreachable
- HTTP and websocket support
- A smooth upgrade path to `@vercel/microfrontends`
## Why
Modern web applications increasingly adopt microfrontends architectures
where multiple independent applications compose a single user
experience. Developing these locally requires a proxy server to route
requests to appropriate development servers based on URL patterns.
Without native Turborepo support, teams face challenges manually
managing multiple servers, configuring separate proxies, and ensuring
WebSocket connections work for hot module replacement. This feature
eliminates these pain points with first-class support that works
standalone or integrates with @vercel/microfrontends for production
deployments.
## How
The implementation uses a trie-based router supporting exact matches,
parameterized segments, and wildcards for efficient route matching.
Built on Hyper, the proxy forwards HTTP requests with proper headers and
handles WebSocket connections bidirectionally with graceful shutdown
support (max 1000 concurrent connections).
During task graph construction, Turborepo scans for configuration files
and automatically starts the proxy before executing development tasks.
Smart mode detection determines whether to use Turborepo's built-in
proxy or defer to Vercel's implementation when @vercel/microfrontends is
present, enabling offline development while maintaining production
compatibility.
### Testing Instructions
There are many tests added as a part of this PR. Additionally, this has
been hand-tested using:
- `create-turbo` with modifications that use a microfrontends
configuration
- [This example
repo](https://github.com/vercel-labs/microfrontends-nextjs-app-multi-zone)
that demonstrates the `@vercel/microfrontends` package
- A large internal monorepo at Vercel that uses the
`@vercel/micrfrontends` package
- Many attempts at trying to break the congfiguration and feature with
alterations to the test subjects described above
### Future work
We would be delighted to have more providers work with us on
implementations that integrate with their production systems! Please
reach out if you are an infrastructure provider and are interested!
