vercel · anthonyshew · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025
@@ -27,6 +27,12 @@ In our community-supported guides, you'll find examples of how to use `turbo` wi
   href="/docs/guides/tools"
 />
 
+<Card
+  title="Microfrontends"
+  description="Develop microfrontends with Turborepo"
+  href="/docs/guides/microfrontends"
+/>
+
 <Card
   title="Single-package workspaces"
   description="Integrate with a standalone application"

@@ -5,6 +5,7 @@
     "tools",
     "linting",
     "testing",
+    "microfrontends",
     "single-package-workspaces",
     "generating-code",
     "skipping-tasks",

@@ -0,0 +1,229 @@
+---
+title: Microfrontends
+description: Learn how to develop microfrontends with Turborepo.
+---
+
+import { PackageManagerTabs, Tab } from '#components/tabs';
+import { Callout } from '#components/callout';
+import { Files, File, Folder } from '#components/files';
+import { ExperimentalBadge } from '#components/experimental-badge';
+
+<ExperimentalBadge>Experimental</ExperimentalBadge>
+
+Turborepo simplifies local development for vertical microfrontends by coordinating multiple applications and providing a unified development experience.
+
+Vertical microfrontends are an architectural pattern where a web application is composed of multiple frontend applications. Each microfrontend can be developed, tested, and deployed separately, while appearing as a single cohesive application to your users.
+
+## How Turborepo helps
+
+Turborepo enhances microfrontend development with:
+
+- **Unified development experience**: Use a single host (like `localhost:3000`) to develop many applications
+- **Automatic port assignment**: Each application gets a consistent, predictable port
+- **Task orchestration**: Dependencies between microfrontends are handled automatically
+- **Simplified code sharing**: Easily share UI components, utilities, and configurations across microfrontends
+- **Optimized builds**: Cache and parallelize builds across all your applications
+
+## Quick start
+
+1. `npx create-turbo@latest --example with-microfrontends`
+2. Run `turbo dev` in your terminal
+3. Visit `localhost:3000` in your browser. The logs for`web#dev` task show that the `web` application's `/` route compiled.
+4. Visit `localhost:3000/docs` in your browser. The logs for the `docs#dev` task show that the `docs` application's `/` route compiled.
+
+## Setting up microfrontends in your Turborepo
+
+<Callout>
+  The tutorial below is using `npx create-turbo@latest` if you want to follow
+  along.
+</Callout>
+
+### 1. Create your applications
+
+Structure your repository with multiple applications:
+
+<Files>
+  <Folder name="apps" defaultOpen>
+    <Folder name="web" />
+    <Folder name="docs" />
+  </Folder>
+</Files>
+
+### 2. Add the configuration
+
+Create a `microfrontends.json` or `microfrontends.jsonc` in your parent application:
+
+```json title="./apps/web/microfrontends.json"
+{
+  "$schema": "https://openapi.vercel.sh/microfrontends.json",
+  "version": "1",
+  "applications": {
+    "web": {
+      "development": {
+        "local": 3000,
+        "fallback": "demo.com"
+      }
+    },
+    "docs": {
+      "routing": [
+        {
+          "paths": ["/docs", "/docs/:path*"]
+        }
+      ],
+      "development": {
+        "local": 3001
+      }
+    }
+  }
+}
+```
+
+### 3. Configure your development tasks
+
+Ensure each microfrontend has a development task in its `package.json` that points to the port that Turborepo supplies:
+
+```json title="./apps/docs/package.json"
+{
+  "name": "docs",
+  "scripts": {
+    "dev": "next dev --port $(microfrontends port)", // [!code highlight]
+    "build": "next build"
+  }
+}
+```
+
+Refer to the documentation for your framework, library, or runtime to learn how to set the port for the script.
+
+### 4. Add the `@vercel/microfrontends` package to child apps
+
+Child applications need the `@vercel/microfrontends` package added to their `package.json` to be able to proxy their routing.
+
+<PackageManagerTabs>
+<Tab value="pnpm">
+```diff title="./apps/docs/package.json"
+{
+  "name": "docs",
+  "devDependencies": {
++   "@vercel/microfrontends": "workspace:*"
+  }
+}
+```
+</Tab>
+<Tab value="yarn">
+```diff title="./apps/docs/package.json"
+{
+  "name": "docs",
+  "devDependencies": {
++   "@vercel/microfrontends": "workspace:*"
+  }
+}
+```
+</Tab>
+<Tab value="npm">
+```diff title="./apps/docs/package.json"
+{
+  "name": "docs",
+  "devDependencies": {
++   "@vercel/microfrontends": "workspace:*"
+  }
+}
+```
+</Tab>
+<Tab value="bun (Beta)">
+```diff title="./apps/docs/package.json"
+{
+  "name": "docs",
+  "devDependencies": {
++   "@vercel/microfrontends": "workspace:*"
+  }
+}
+```
+</Tab>
+</PackageManagerTabs>
+
+### 5. Set up your turbo.json
+
+Ensure Turborepo is handling your development workflows:
+
+```json title="./turbo.json"
+{
+  "tasks": {
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
+```
+
+## Running microfrontends
+
+Start all your microfrontends simultaneously:
+
+```bash title="Terminal"
+turbo dev
+```
+
+Or run specific applications:
+
+```bash title="Terminal"
+turbo dev --filter=docs
+```
+
+With the microfrontends configuration, Turborepo will:
+
+1. Start each application on its designated port
+2. Handle routing between applications
+3. Provide a unified terminal UI for monitoring all applications
+
+## Port management
+
+Turborepo provides two ways to assign ports to your microfrontends:
+
+### Explicit port mapping
+
+Specify exact ports in your configuration:
+
+```json title="microfrontends.json"
+{
+  "applications": {
+    "app": {
+      "development": {
+        "local": {
+          "port": 3000
+        }
+      }
+    }
+  }
+}
+```
+
+### Automatic port generation
+
+If no port is specified, Turborepo generates a consistent port between 3000-8000 based on the application name. This ensures the same application always gets the same port across different machines and developers.
+
+### Configuration options
+
+#### `version`
+
+Specifies the configuration schema version. Currently only version `"1"` is supported.
+
+#### `applications`
+
+An object where each key is an application identifier and the value contains:
+
+- **`packageName`** (optional): The package name if different from the application's key in the configuration
+- **`development`**: Development configuration
+  - **`task`** (optional): The task name to run for development (defaults to `"dev"`)
+  - **`local`**: Local development settings
+    - **`port`** (optional): Specific port number. If not specified, a consistent port is generated based on the application name
+
+### Child configurations
+
+Individual microfrontend packages can declare they're membership of a parent microfrontend using a `partOf` field. In the configuration below, the `partOf` field explicitly makes the app in `./apps/docs` a child of the `web` application.
+
+```json title="./apps/docs/microfrontends.json"
+{
+  "partOf": "web"
+}
+```
@@ -1,6 +1,10 @@
 TODO
 callout
 Microsyntaxes
+microfrontend
+Microfrontend
+microfrontends
+Microfrontends
 PlatformTabs
 uncompiled
 JSX

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+.DS_Store
+*.pem