Skip to content

Commit 6b7262a

Browse files
authored
Set up CLAUDE.md for the repository (#22)
1 parent 7530a8d commit 6b7262a

File tree

2 files changed

+86
-1
lines changed

2 files changed

+86
-1
lines changed

.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,7 @@ e2e-test-results/
4040
vite.config.ts.timestamp-*
4141

4242
# Module Federation
43-
.__mf__temp
43+
.__mf__temp
44+
45+
# Claude
46+
CLAUDE.local.md

CLAUDE.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
This is a monorepo for `@vercel/microfrontends`, a library that enables splitting large applications into independently developed and deployed microfrontends on Vercel. The package provides generic platform support for microfrontends in multiple frameworks, such as Next.js, SvelteKit, React Router, Vite, and React.
8+
9+
## Repository Structure
10+
11+
- `packages/microfrontends/` - The main `@vercel/microfrontends` package (the only publishable package)
12+
- `examples/` - Working examples of microfrontend implementations (nextjs-app, nextjs-pages, react-router, single-spa, sveltekit, etc.)
13+
14+
## Technologies
15+
16+
- This is a TypeScript codebase
17+
- Use pnpm for package management
18+
- Turbo manages the monorepo build pipeline
19+
- The package uses dual ESM/CJS exports via tsup
20+
- Follow Vercel style guide (configured via `@vercel/style-guide`)
21+
- Be familiar with Module Federation, single-spa, and Next.js Multi-Zones
22+
23+
## Common Commands
24+
25+
- `pnpm build` - Build all packages using Turbo
26+
- `pnpm test` - Run unit tests for all packages
27+
- `pnpm lint` - Run ESLint on all packages
28+
- `pnpm format` - Format all files with Prettier
29+
- `pnpm typecheck` - Run TypeScript type checking
30+
- `pnpm checks` - Run build, lint, test, and typecheck on all packages (run before submitting PRs)
31+
32+
### Start examples
33+
34+
- `pnpm dev:nextjs-app` - Run the Next.js App Router example
35+
- `pnpm dev:nextjs-pages` - Run the Next.js Pages Router example
36+
- `pnpm dev:react-router` - Run the React Router example
37+
- `pnpm dev:single-spa` - Run the single-spa example
38+
- `pnpm dev:sveltekit` - Run the SvelteKit example
39+
40+
### NPM Package Management
41+
42+
- `pnpm changeset` - Create a changeset for releasing
43+
- `pnpm version-packages` - Version packages based on changesets
44+
45+
## Architecture
46+
47+
### Configuration
48+
49+
The microfrontends configuration is defined in `microfrontends.json` (or `.jsonc`) files that live in each application. The schema is at `packages/microfrontends/schema/schema.json`.
50+
51+
Key configuration concepts:
52+
53+
- **Applications**: Named microfrontends that map to Vercel project names
54+
- **Routing**: Path patterns that determine which microfrontend handles which routes
55+
- **Development**: Local and fallback URLs for development
56+
- **Asset Prefix**: Unique identifiers for static assets per microfrontend
57+
- **Flags**: Feature flags that conditionally route requests to different microfrontends
58+
59+
### Core Components
60+
61+
1. **Config Layer** (`src/config/`)
62+
63+
- `microfrontends-config/` - Configuration parsing and validation
64+
- `microfrontends/server/` - Server-side configuration utilities
65+
- `overrides/` - Routing overrides
66+
- `well-known/` - Well-known endpoints for client-side
67+
68+
2. **Next.js Integration** (`src/next/`)
69+
70+
- `config/` - `withMicrofrontends()` wrapper that transforms Next.js config
71+
- `middleware/` - Routing middleware for Next.js that handles path matching and zone routing when using feature flags
72+
- `client/` - Client-side utilities (Link component, prefetch)
73+
- `testing/` - Testing utilities for Next.js microfrontends
74+
75+
3. **Other Framework Support** (`src/`)
76+
77+
- `sveltekit/` - SvelteKit integration
78+
- `vite/` - Vite integration
79+
80+
4. **CLI & Local Proxy** (`src/bin/`)
81+
- `local-proxy.ts` - HTTP proxy for local development that routes requests between locally running microfrontends or falls back to production
82+
- `index.ts` - CLI commands (`microfrontends proxy`, `microfrontends port`)

0 commit comments

Comments
 (0)