Astro v5 Workspace

Production-ready Astro v5 monorepo with pnpm workspaces, shared design system, and centralized dependency management.

Project Structure

astro-v5-template/
├── apps/
│   ├── blank/   - Absolute minimum (blank canvas)
│   ├── base/    - Moderate starter with components
│   └── demo/    - Full-featured demo site
├── packages/
│   ├── config/  - Shared TypeScript configuration
│   ├── styles/  - CSS variables and design tokens
│   ├── ui/      - Shared UI components
│   └── utils/   - Shared utilities
└── pnpm-workspace.yaml  - Workspace & catalog config

Quick Start

# Prerequisites: Volta (recommended) or Node.js 24+
curl https://get.volta.sh | bash
volta install pnpm

# Install & run
git clone https://github.com/casoon/astro-v5-template.git
cd astro-v5-template
pnpm install
pnpm dev

Commands

Dependency Management

This workspace uses pnpm catalog for centralized version management. All shared dependencies are defined once in pnpm-workspace.yaml:

catalog:
  astro: ^5.15.4
  tailwindcss: ^4.1.17
  svelte: ^5.43.5
  typescript: ^5.9.3
  '@casoon/atlas-styles': ^0.0.7
  # ... more dependencies

Apps reference catalog versions with catalog::

{
  "dependencies": {
    "astro": "catalog:",
    "tailwindcss": "catalog:",
    "@casoon/atlas-styles": "catalog:"
  }
}

Benefits:

• Update versions in one place
• Consistent versions across all apps
• No version drift between packages

Code Quality

Hybrid setup for best performance:

pnpm check        # Run all checks
pnpm biome:fix    # Auto-fix JS/TS/JSON
pnpm lint:astro   # Lint Astro files

Configuration

Environment Variables

Each app uses Zod for type-safe env configuration in src/env.ts:

const envSchema = createEnvSchema({
  PUBLIC_SITE_URL: 'https://example.com',
  PUBLIC_SITE_NAME: 'My Site',
});
export const env = validateEnv(envSchema, import.meta.env);

Sitemap

Uses Astro.site from astro.config.mjs automatically:

// src/pages/sitemap.xml.ts
import { createSitemapRoute } from '@astro-v5/utils';

const pageModules = import.meta.glob('./**/*.astro', { eager: true });

export const GET = createSitemapRoute({
  pageModules,
  getBlogPosts: () => getCollection('blog'),
});

Adding New Sites

# 1. Copy template
cp -r apps/base apps/my-site

# 2. Update package.json name
"name": "@astro-v5/my-site"

# 3. Install & run
pnpm install
pnpm --filter @astro-v5/my-site dev

Tech Stack

Features

• Shared Design System - CSS variables, animations, utilities via @astro-v5/styles
• UI Component Library - Reusable components via @astro-v5/ui
• Image Optimization - WebP/AVIF generation with Sharp
• SEO Components - PageSEO, BlogSEO with JSON-LD
• Interactive Maps - Leaflet.js with GDPR consent
• Web Vitals - Performance monitoring with @casoon/astro-webvitals
• Build Metrics - Performance reports with @casoon/astro-speed-measure
• Blog System - MDX support with Content Collections

Deployment

Build and deploy from apps/*/dist/:

pnpm build:demo   # Build demo -> apps/demo/dist/
pnpm build:base   # Build base -> apps/base/dist/
pnpm build:blank  # Build blank -> apps/blank/dist/

Supports: Vercel, Netlify, Cloudflare Pages, GitHub Pages

Links

• Demo Site
• GitHub Repository

License

MIT © casoon