skilld
All skills
vercel-labs avatar

/microfrontends

@0346ba0 official
by Vercel Labsvercel-labs/vercel-plugin295 stars
64

Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app across teams, independent deployments, cross-app routing, incremental migration, composing multiple frontends under one domain, microfrontends.json, @vercel/microfrontends, the microfrontends local proxy, or path-based routing between Vercel projects. Also use when the user asks about shared layouts across projects, navigation between microfrontends, fallback environments, asset prefixes, or feature flag controlled routing.

  • 7 files
  • 44.4 KB
  • Updated last week
  • GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/vercel-labs/vercel-plugin/microfrontends

This session only. Nothing lands on disk.

referencessecurity.md

≈1.2k tokens on demand. Your agent reads this file only when SKILL.md points to it.

Managing Microfrontends Security

Source: Vercel Docs — Managing microfrontends security

How Deployment Protection and Vercel Firewall apply to each microfrontend application.

Deployment Protection and microfrontends

Each URL is protected by the Deployment Protection settings of the project it belongs to, so protection for the microfrontend experience as a whole is determined by the default application:

  • Requests to a microfrontend host (a domain of the default application) are verified only by the default application's Deployment Protection.
  • Requests directly to a child application (a child domain) are verified only by that child application's Deployment Protection.

This applies to all protection methods and bypass methods, including Vercel Authentication, Password Protection, Trusted IPs, Shareable Links, Protection Bypass for Automation, Deployment Protection Exceptions, and OPTIONS Allowlist.

Recommended configuration

  • Default app: use Standard Protection so end users can reach the microfrontend through the default app's URL.
  • Child apps: enable protection for all deployments so they aren't directly accessible. Child content is served through the default app's URL.

This works because Vercel routes to child apps within a single request at the network layer (see Routing) — not a rewrite that issues a separate request to the child's URL. Deployment protection on a child app therefore applies only when the child's URL is accessed directly.

Passport

Passport is configured only on the default application; its configuration protects every child path. Child applications cannot have an independent Passport connection while they belong to the group — remove a child from the group first to configure Passport on it directly. Direct requests to a child application's domain do not use the default application's Passport configuration and need another Deployment Protection method. The default application handles the /.well-known/vercel/passport/callback request before application routing, so neither application needs to implement the callback path.

Vercel Firewall and microfrontends

  • The platform-wide firewall is applied to all requests.
  • The customizable Web Application Firewall (WAF) of both the default application and the relevant child application is applied to a request:
    • Requests to a microfrontend host are verified by the default application's WAF; requests to child paths are additionally verified by the child application's WAF.
    • Requests directly to a child application are verified only by the child application's WAF.

This covers the entire Vercel WAF, including Custom Rules, IP Blocking, WAF Managed Rulesets, and Attack Mode.

Managing the WAF

  • A rule that applies to all requests to a microfrontend → use the default application's WAF.
  • A rule that applies only to a child application's paths → use the child project's WAF.

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at 0346ba0. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 10 hours ago.

Activeupdated last week

Capability

Other metadata
metadata
{
  "priority": 7,
  "docs": [
    "https://vercel.com/docs/microfrontends"
  ],
  "pathPatterns": [
    "microfrontends.json",
    "microfrontends.jsonc",
    "apps/*/microfrontends.json",
    "apps/*/microfrontends.jsonc"
  ],
  "bashPatterns": [
    "\\bvercel\\s+microfrontends\\b",
    "\\bvercel\\s+mf\\b",
    "\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/microfrontends\\b",
    "\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/microfrontends\\b",
    "\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/microfrontends\\b",
    "\\byarn\\s+add\\s+[^\\n]*@vercel/microfrontends\\b"
  ],
  "importPatterns": [
    "@vercel/microfrontends"
  ]
}
retrieval
{
  "aliases": [
    "microfrontends",
    "multi-zones",
    "multi zones",
    "mfe",
    "microfrontend routing",
    "cross-zone navigation"
  ],
  "intents": [
    "split app into microfrontends",
    "set up microfrontends",
    "configure microfrontends.json",
    "add path routing between projects",
    "share layout across microfrontends"
  ],
  "entities": [
    "microfrontends.json",
    "@vercel/microfrontends",
    "default app",
    "child app",
    "asset prefix",
    "microfrontends group"
  ]
}
chainTo
[
  {
    "pattern": "runMicrofrontendsMiddleware|flag.*microfrontend|microfrontend.*flag",
    "targetSkill": "routing-middleware",
    "message": "Flag-controlled microfrontend routing requires middleware in the default app — loading Routing Middleware guidance."
  }
]

README badge

README badge for vercel-labs/vercel-plugin/microfrontends