Microfrontends

Microfrontends allow you to split a single application into smaller, independently deployable units that render as one cohesive application for users. Different teams using different technologies can develop, test, and deploy each microfrontend while Vercel handles connecting the microfrontends and routing requests on the global network.

They are valuable for:

• Improved developer velocity: You can split large applications into smaller units, improving development and build times.
• Independent teams: Large organizations can split features across different teams, with each team choosing their technology stack, framework, and development lifecycle.
• Incremental migration: You can gradually migrate from legacy systems to modern frameworks without rewriting everything at once.

Microfrontends may add additional complexity to your development process. To improve developer velocity, consider alternatives like:

• Monorepos with Turborepo
• Feature flags
• Faster compilation with Turbopack

Microfrontends work the same whether you keep your applications in one repository (a monorepo) or spread them across several (a polyrepo). The microfrontends group, path routing, and production routing behave identically in both cases. Each application is its own Vercel project and deploys on its own, no matter where its code lives.

The layout you choose affects how each application finds the microfrontends.json configuration, both during local development and when it builds on Vercel:

In a monorepo, every application can locate the shared microfrontends.json automatically. In a polyrepo, the configuration lives in only one repository, so each other application needs its own access to it. This applies at build time as well as locally: a polyrepo application whose build can't find microfrontends.json fails with a build error. Pull the configuration into the application with vercel microfrontends pull or set VC_MICROFRONTENDS_CONFIG. See Polyrepo setup.

Choose the layout that fits how your teams already work. For the setup steps in each case, see Test your microfrontends locally.

• Learn how to set up and configure microfrontends using our Quickstart guide
• Test your microfrontends locally before merging the code to preview and production

To make the most of your microfrontend experience, install the Vercel Toolbar.

Once you have configured the basic structure of your microfrontends,

• Learn the different ways in which you can route paths to different microfrontends as well as available options
• Learn how to manage your microfrontends to add and remove microfrontends, share settings, route observability and manage the security of each microfrontend.
• Learn how to optimize navigations between different microfrontends
• Use the Vercel Toolbar to manage different aspects of microfrontends such as overriding microfrontend routing.
• Learn how to troubleshoot your microfrontends setup or add unit tests to ensure everything works.

Teams on all plans can use microfrontends support with plan-specific limits. Hobby and Pro include two microfrontend projects. Pro teams can add more projects, and Vercel bills Pro teams for routed requests as shown below. Enterprise pricing is custom.

Microfrontends usage can be viewed in the Vercel Delivery Network section of Usage section in the sidebar in the Vercel dashboard.

• Incremental migrations with microfrontends
• How Vercel adopted microfrontends