> ## Documentation Index
> Fetch the complete documentation index at: https://docs.go-mizu.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Static Hosting

> Deploy frontend to CDN and backend separately.

For high-traffic applications, you can deploy your frontend to a CDN and backend separately.

## Architecture

```
User Request
     ↓
   CDN (Frontend)
     ↓ (API calls)
   Mizu Backend
```

**Frontend:** Served from CDN (CloudFlare, Vercel, Netlify)
**Backend:** Runs on server (handles APIs only)

## Benefits

* **Faster delivery**: CDN edge locations worldwide
* **Lower backend load**: Backend only handles APIs
* **Scalability**: CDN handles millions of requests
* **Cost effective**: CDN bandwidth cheaper than server

## Setup

### 1. Build Frontend

```bash theme={null}
cd frontend
npm run build
```

### 2. Deploy Frontend to CDN

**Vercel:**

```bash theme={null}
cd frontend
vercel deploy --prod
```

**Netlify:**

```bash theme={null}
cd frontend
netlify deploy --prod --dir=dist
```

**CloudFlare Pages:**

```bash theme={null}
# Via dashboard or CLI
wrangler pages publish dist
```

### 3. Configure API URL

```bash theme={null}
# .env.production
VITE_API_URL=https://api.yourdomain.com
```

```ts theme={null}
const apiUrl = import.meta.env.VITE_API_URL
```

### 4. Deploy Backend

Deploy Mizu backend to server (DigitalOcean, AWS, etc.):

```go theme={null}
func New() *mizu.App {
    app := mizu.New()

    // Only API routes (no frontend middleware)
    app.Get("/api/users", handleUsers)

    return app
}
```

## CORS Configuration

Backend must allow requests from CDN:

```go theme={null}
import "github.com/go-mizu/mizu/middlewares/cors"

app.Use(cors.WithOptions(cors.Options{
    AllowedOrigins: []string{
        "https://yourdomain.com",      # Production
        "https://staging.yourdomain.com",  # Staging
    },
    AllowedMethods: []string{"GET", "POST", "PUT", "DELETE"},
    AllowedHeaders: []string{"Content-Type", "Authorization"},
    AllowCredentials: true,  # If using cookies
}))
```

## Environment Configuration

### Development

```
Frontend: http://localhost:5173
Backend:  http://localhost:3000
```

### Staging

```
Frontend: https://staging.yourdomain.com (Vercel)
Backend:  https://api-staging.yourdomain.com
```

### Production

```
Frontend: https://yourdomain.com (Vercel)
Backend:  https://api.yourdomain.com
```

## CDN Configuration

### Vercel

```json theme={null}
// vercel.json
{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.yourdomain.com/api/:path*"
    }
  ]
}
```

### Netlify

```toml theme={null}
# netlify.toml
[[redirects]]
  from = "/api/*"
  to = "https://api.yourdomain.com/api/:splat"
  status = 200
  force = true
```

### CloudFlare

Use CloudFlare Workers for API proxying.

## Cache Headers

CDN respects your cache headers:

```go theme={null}
// Mizu automatically sets these
Cache-Control: public, max-age=31536000, immutable  # Hashed assets
Cache-Control: no-cache                              # API responses
```

## Deployment Workflow

```bash theme={null}
# 1. Build frontend
cd frontend
npm run build

# 2. Deploy frontend to CDN
vercel deploy --prod

# 3. Build backend
cd ..
go build -o server cmd/server/main.go

# 4. Deploy backend
scp server user@server:/app/
ssh user@server 'systemctl restart myapp'
```

## Trade-offs

### Pros

* ✅ Very fast global delivery
* ✅ Unlimited scalability
* ✅ Lower backend costs
* ✅ DDoS protection (CDN)

### Cons

* ❌ More complex setup
* ❌ Two deployments
* ❌ CORS configuration needed
* ❌ Additional CDN costs

## When to Use

**Use CDN hosting when:**

* High traffic expected
* Global audience
* Cost optimization needed
* Want best performance

**Use embedded when:**

* Simple deployment preferred
* Lower traffic
* Single region
* Want version consistency

## Next Steps

<CardGroup cols={2}>
  <Card title="Embedded FS" href="/frontend/embed" icon="box">
    Alternative: single binary
  </Card>

  <Card title="Building" href="/frontend/building" icon="hammer">
    Build and optimization
  </Card>

  <Card title="CORS" href="/middlewares/cors" icon="globe">
    CORS configuration
  </Card>
</CardGroup>