---
title: "Multi-App Development"
description: "Run pnpm dev for all apps, test individually, use filtering for specific apps, configure cross-app linking, and verify all apps work."
canonical_url: "https://vercel.com/academy/production-monorepos/multi-app-development"
md_url: "https://vercel.com/academy/production-monorepos/multi-app-development.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-12T05:01:54.577Z"
content_type: "lesson"
course: "production-monorepos"
course_title: "Production Monorepos with Turborepo"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Multi-App Development

# Multi-app development

3 apps running means 3 servers, 3 ports, 3 terminal tabs. You need efficient workflows to run all apps, test specific apps, and avoid port conflicts. Turborepo's filtering and parallelization make multi-app development seamless.

## Outcome

Learn efficient patterns for developing multiple apps simultaneously.

## Hands-on exercise 8.3

### Run all apps

```bash
pnpm dev
```

Output:

```
• Running dev in 3 packages
@geniusgarage/web:dev: ready on http://localhost:3000
@geniusgarage/snippet-manager:dev: ready on http://localhost:3001
@geniusgarage/docs:dev: ready on http://localhost:3002
```

All apps run in parallel with hot reload!

### Run specific app

```bash
# Only marketing site
pnpm --filter @geniusgarage/web dev

# Only snippet manager
pnpm --filter @geniusgarage/snippet-manager dev

# Only docs
pnpm --filter @geniusgarage/docs dev
```

Saves resources when working on one app.

### Run multiple specific apps

```bash
# Marketing + docs
pnpm --filter @geniusgarage/web --filter @geniusgarage/docs dev
```

### Run by pattern

```bash
# All apps
pnpm --filter "./apps/*" dev

# All packages
pnpm --filter "./packages/*" dev
```

## Cross-app features

### Link between apps

Update apps/web to link to docs:

```tsx title="apps/web/app/page.tsx"
<a href="http://localhost:3002" className="text-blue-500 underline">
  View Component Docs
</a>
```

Update apps/docs to link back:

```tsx title="apps/docs/app/page.tsx"
<a href="http://localhost:3000" className="text-blue-500 underline">
  Back to Marketing
</a>
```

Run all apps and test navigation between them!

### Shared state (future)

For apps that need to share data, use:

- **API routes** - one app exposes API, others consume
- **Database** - shared database layer in packages/db
- **Event bus** - packages/events for pub/sub

## Port management

**Current ports:**

- 3000: apps/web (marketing)
- 3001: apps/snippet-manager (snippet manager)
- 3002: apps/docs (documentation)

**Add fourth app:**

- 3003: apps/admin (future admin dashboard)

**Configure in package.json:**

```json
{
  "scripts": {
    "dev": "next dev --port 3003"
  }
}
```

## VS code multi-root workspace

Create `.vscode/monorepo.code-workspace`:

```json
{
  "folders": [
    { "path": "apps/web", "name": "web" },
    { "path": "apps/snippet-manager", "name": "snippet-manager" },
    { "path": "apps/docs", "name": "docs" },
    { "path": "packages/ui", "name": "ui" },
    { "path": "packages/utils", "name": "utils" }
  ],
  "settings": {
    "typescript.tsdk": "node_modules/typescript/lib"
  }
}
```

Open with: File → Open Workspace → Select monorepo.code-workspace

Each folder appears in sidebar!

## Debugging multiple apps

### Use different browser profiles

- **Profile 1:** localhost:3000 (web)
- **Profile 2:** localhost:3001 (app)
- **Profile 3:** localhost:3002 (docs)

Keeps cookies, storage, and devtools separate!

### Terminal multiplexer

Use tmux or screen:

```bash
# Create session with 3 panes
tmux new-session \; \
  split-window -h \; \
  split-window -v \; \
  select-pane -t 0 \; \
  send-keys "pnpm --filter @geniusgarage/web dev" C-m \; \
  select-pane -t 1 \; \
  send-keys "pnpm --filter @geniusgarage/snippet-manager dev" C-m \; \
  select-pane -t 2 \; \
  send-keys "pnpm --filter @geniusgarage/docs dev" C-m
```

All apps in one terminal window!

## Performance tips

### Selective dev mode

Only run apps you're working on:

```bash
# Working on docs? only run docs
pnpm --filter @geniusgarage/docs dev

# Testing UI changes? run all apps
pnpm dev
```

### Build watch mode

For packages, use build watch:

```bash
# Watch UI changes
pnpm --filter @geniusgarage/ui dev:build

# In separate terminal, run apps
pnpm --filter "./apps/*" dev
```

### Restart strategy

**Change to app code:** Hot reload (automatic)

**Change to shared package:** Restart dev server

```bash
# Quick restart
Ctrl+C
pnpm dev
```

Or use nodemon/watch for auto-restart.

## Common workflows

**Frontend-focused work:**

```bash
# Run all apps, watch for UI changes
pnpm dev
```

**Single-app feature:**

```bash
# Run only that app
pnpm --filter @geniusgarage/snippet-manager dev
```

**Package development:**

```bash
# Run package tests in watch mode
pnpm --filter @geniusgarage/ui dev:test

# Run one app to test integration
pnpm --filter @geniusgarage/web dev
```

**Full-stack feature:**

```bash
# Run all apps + packages in watch mode
pnpm dev
```

## Done-when

Verify multi-app workflows:

- [ ] Ran `pnpm dev` and saw all 3 apps start
- [ ] Ran specific app with `--filter`
- [ ] Ran multiple apps with multiple `--filter` flags
- [ ] Added cross-app links and tested navigation
- [ ] Understood port management (3000, 3001, 3002)
- [ ] Created VS Code multi-root workspace (optional)
- [ ] Tested selective dev mode for performance
- [ ] Understood when to run all vs specific apps
- [ ] Know how to restart on package changes

## What's Next

Section 7 complete! You have:

- 3 apps running in the monorepo
- All apps deployed independently
- Efficient local development workflows

**Section 8: Enterprise Patterns** - Learn advanced patterns for scaling to large teams: Turborepo generators (auto-create components), Changesets (versioning), and code governance (CODEOWNERS, boundaries). These patterns help 10+ person teams work efficiently in monorepos.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)