Managing with the Vercel Toolbar

Using the Vercel Toolbar, you can visualize and independently test your microfrontends so you can develop microfrontends in isolation. The Microfrontends panel of the toolbar shows all microfrontends that you have configured in microfrontends.json.

You can access it in all microfrontends that you have enabled the toolbar for.

In the Microfrontends panel of the toolbar shows all microfrontends that are available in that microfrontends group. By clicking on each microfrontend, you can see information such as the corresponding Vercel project or take action on the microfrontend.

Since multiple microfrontends can serve content on the same domain, it's easy to lose track of which application is serving that page. Use the Zone Indicator to display the name of the application and environment that the microfrontend is being served by whenever you visit any paths.

You find the Zone Indicator toggle at the bottom of the Microfrontends panel in the Vercel toolbar.

While developing microfrontends, you often want to build and test just your microfrontend in isolation to avoid dependencies on other projects. Vercel will intelligently choose the environment or fallback based on what projects were built for your commit. The Vercel Toolbar will show you which environments microfrontend requests are routed to and allow you to override that decision to point to another environment.

1. Open the microfrontends panel in the Vercel Toolbar.
2. Find the application that you want to modify in the list of microfrontends.
3. In the Routing section, choose the environment and branch (if applicable) that you want to send requests to.
4. Select Reload Preview to see the microfrontend with the new values.

To undo the changes back to the original values, open the microfrontends panel and click Reset to Default.

You can enable debug headers on microfrontends responses to help debug issues with routing. In the Microfrontends panel in the Toolbar, click the Enable Debug Mode toggle at the bottom of the panel.