Multi-Zone Architecture with API Integration

[elitan]

Multi-zone Architecture Implementation Guide

Architecture for a multi-zone setup with Next.js marketing site, Vite dashboard SPA, and API server.

Project Structure

your-project/
├── apps/
│   ├── marketing/         # Next.js marketing site
│   │   ├── pages/
│   │   └── next.config.js
│   │
│   └── dashboard/        # Vite React SPA
│       ├── src/
│       ├── dist/        # Built files
│       └── vite.config.js
│
├── services/
│   └── api/             # API Server
│       ├── src/
│       ├── dist/
│       └── package.json
│
├── Caddyfile
└── docker-compose.yml    # Production only

Development Setup

Vite Configuration

// apps/dashboard/vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

Caddy Configuration

yourdomain.com {
    @dashboard {
        path_regexp dashboard ^/(dashboard|settings|profile|workspace|projects|analytics)(/|$)
    }

    @api {
        path_regexp api ^/api(/|$)
    }

    handle @api {
        reverse_proxy localhost:4000
    }

    handle @dashboard {
        root * /path/to/dashboard/dist
        try_files /index.html
    }

    handle {
        reverse_proxy localhost:3000
    }
}

Local Development

1. API:

cd services/api && npm run dev    # localhost:4000

2. Dashboard:

cd apps/dashboard && npm run dev  # localhost:5173

3. Marketing:

cd apps/marketing && npm run dev  # localhost:3000

Production Deployment

Build and deploy using Docker Compose (see docker-compose.yml in repo).

Key Points

• Dashboard routes through Vite's dev server in development
• API is proxied through Vite in development for seamless integration
• Production uses Caddy for routing between services
• Each service can be developed independently