skills.rest
Adithiya-S
Adithiya-SCOMMUNITY
Explore all skills by this author →
GitHub

microfrontends

Configure and deploy Vercel microfrontends with path-based routing across independent projects.

Updated Aug 21, 2025
Search Tags:#deployment#routing#next.js#monorepo#vercel#microfrontends#multi-zones
One-click install
npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill microfrontends-adithiya-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: microfrontends
Source: https://github.com/Adithiya-S/AI-Study-Companion/tree/main/.agents/skills/microfrontends
Command: npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill microfrontends-adithiya-s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @vercel/microfrontends, and includes references (resource) components.

What problem does it solve? Splitting a large frontend application into independently deployable units is complex: teams must coordinate routing, asset prefixes, local development proxies, and cross-app navigation. This Skill guides you through building, configuring, and deploying microfrontends on Vercel so multiple teams can ship independently while users see one cohesive app. ## Core Features & Use Cases - Routing Configuration: Author and validate microfrontends.json with path expressions, asset prefixes, and flag-controlled routing between a default app and child apps. - Local Development Proxy: Run only the microfrontend you are working on while the proxy routes other paths to production fallbacks, with support for Turborepo monorepos and polyrepos. - Group Management: Use the vercel microfrontends CLI to create, inspect, add to, and delete microfrontends groups, plus configure fallback environments and observability routing. - Use Case: A platform team splits a marketing site, docs portal, and dashboard into three Vercel projects. This Skill helps them wire up microfrontends.json, set asset prefixes, add PrefetchCrossZoneLinks for fast cross-zone navigation, and test routing with validateRouting. ## Quick Start Ask the assistant to help you set up a microfrontends group on Vercel and generate the microfrontends.json configuration for your default and child applications.

Frequently Asked Questions about microfrontends

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up microfrontends on Vercel?▼

Create a microfrontends group with the Vercel CLI or dashboard, add a microfrontends.json file to the default application, install @vercel/microfrontends in every app, and wrap each framework config with withMicrofrontends or the Vite plugin. Routing takes effect once the config deploys to production.

How do I configure microfrontends.json routing paths?▼

Add a routing array to each child application in microfrontends.json with path expressions like /docs/:path* for zero-or-more segment matching. Exactly one application must be the default app with no routing field, and paths must not overlap between apps.

Does Vercel microfrontends support frameworks besides Next.js?▼

Yes, @vercel/microfrontends supports Next.js App Router and Pages Router, SvelteKit, React Router, and Vite. SvelteKit and Vite integrations are exposed through experimental entry points, while flag-controlled routing and cross-zone prefetching currently require Next.js.

How do I run Vercel microfrontends locally in development?▼

Start each app with next dev --port $(microfrontends port) and run the local proxy with microfrontends proxy --local-apps <names>, or use turbo run dev in a Turborepo monorepo where the proxy starts automatically. Visit the proxy URL, which defaults to http://localhost:3024.

Why are my microfrontend requests not routed correctly in production?▼

Enable debug headers via the Vercel Toolbar or the VERCEL_MFE_DEBUG cookie, then inspect x-vercel-mfe-matched-path and x-vercel-mfe-app response headers. Also verify the path is covered in microfrontends.json using the Deployment Summary or the validateRouting test utility.

How does deployment protection work with microfrontends?▼

Requests through the default app's domain are verified only by the default app's Deployment Protection, while direct requests to a child domain use the child app's settings. The recommended setup is Standard Protection on the default app and protection on all deployments for child apps.

Related Skills

Explore More Software Engineering Skills→
sharad07072007sharad07072007

microfrontends

Configure and deploy microfrontends on Vercel using microfrontends.json and @vercel/microfrontends.

Community
Advanced
awslabsawslabs
15

observability

Design AWS observability solutions with CloudWatch metrics, logs, alarms, and X-Ray tracing.

Official
Advanced
delta-and-betadelta-and-beta

engineer-feature-flags

Decode Braze feature flags and Canvas integration for controlled rollouts.

Community
Intermediate
shafibabarshafibabar
1

microfrontend-architecture

Decompose monolithic frontend apps into independently deployable fragments using Module Federation runtime composition.

Community
Advanced