Astro v5 Template: Production-Ready Monorepo für moderne Webprojekte

Nach zahlreichen Webprojekten hat sich ein klares Pattern herauskristallisiert: Eine solide Grundlage, die ich für jedes neue Projekt verwenden kann, ohne jedes Mal bei Null anzufangen. Das Ergebnis ist mein Astro v5 Template – ein produktionsreifes Monorepo, das die Basis für alle meine Webprojekte bildet.

Das Template ist jetzt öffentlich verfügbar und vereint alle Features, die ich als Standard-Ausstattung für moderne Webseiten betrachte. Keine experimentellen Spielereien, sondern bewährte Technologien und praktische Workflows.

“Ein gutes Template spart nicht nur Zeit – es standardisiert Qualität über alle Projekte hinweg.”

Die Grundidee: Workspaces für flexible Architekturen

Das Herzstück des Templates ist die pnpm Workspace-Architektur. Statt einzelner, isolierter Projekte ermöglicht das Monorepo die Verwaltung mehrerer Webseiten mit einem gemeinsamen Design System.

Die Struktur

packages/
├── shared/   - Shared Design System
├── base/     - Minimales Starter-Template
└── demo/     - Full-Featured Demo mit Beispielen

Warum Workspaces?

In der Praxis bedeutet das: Eine Hauptwebseite im demo-Package, mehrere Landingpages in eigenen Packages – alle teilen sich das gleiche Design System aus shared. CSS-Variablen, Animationen, Utility-Klassen: Einmal definiert, überall verfügbar.

Wenn ein Kunde später eine zusätzliche Landingpage benötigt, kopiere ich einfach das base-Template, passe den Inhalt an, und die gesamte visuelle Konsistenz ist automatisch gegeben. Kein Copy-Paste von CSS, keine Versionskonflikte.

Integrierte Standard-Features

Das Template kommt mit allen Features, die ich bei modernen Webprojekten als unverzichtbar betrachte. Nicht als nachträgliche Add-ons, sondern von Anfang an integriert und getestet.

1. Automatische Bildoptimierung

Eines der wichtigsten Features: Build-time Image Optimization mit Sharp. Original-Bilder landen in /public/images/, ein Script generiert automatisch:

WebP und AVIF für moderne Browser
Mehrere Größen (400w, 800w, 1200w) für responsive Layouts
Optimierte Dateigröße (60-80% kleiner als JPEG/PNG)

pnpm optimize-images        # Alle Packages
pnpm optimize-images:demo   # Nur Demo-Package

Die optimierten Bilder werden ins Git committed, nicht bei jedem Build neu generiert. Das beschleunigt CI/CD-Pipelines massiv und funktioniert perfekt auf Cloudflare Pages oder anderen Static Hosts.

Die OptimizedImage-Komponente übernimmt dann automatisch das responsive Markup:

<OptimizedImage 
  src="/images/hero.jpg"
  alt="Hero image"
  sizes="(max-width: 768px) 100vw, 800px"
  loading="lazy"
/>

Das generiert ein <picture>-Element mit allen Formaten, Größen und Fallbacks – kein manuelles srcset-Management mehr nötig.

2. Custom Sitemap mit voller Kontrolle

Statt @astrojs/sitemap nutze ich eine eigene Sitemap-Implementierung. Der Grund ist simpel: Volle Kontrolle über priority, changefreq und lastmod für jede einzelne Seite.

Die Sitemap-Utils liegen in @shared/utils/sitemap und können von jedem Package genutzt werden:

const pages = generateSitemapPages({
  siteUrl: env.PUBLIC_SITE_URL,
  pageModules: import.meta.glob('./**/*.astro'),
  blogPosts: await getCollection('blog'),
});

Das System scannt automatisch alle .astro-Seiten, berücksichtigt Content Collections und generiert valides XML – ohne Plugin-Abhängigkeiten.

3. Shared Design System mit CSS-Variablen

Das shared-Package enthält das komplette Design System:

CSS-Variablen für Colors, Spacing, Typography
Animationen (fade-in, float, gradient-text)
Utility-Klassen (nav-link, glass-effect, hover-lift)

Alle Packages importieren das Design System über @shared/styles/index.css. Änderungen an den Variablen wirken sich automatisch auf alle Webseiten aus – Single Source of Truth für visuelle Konsistenz.

Das funktioniert perfekt mit Tailwind CSS zusammen: Basis-Styles über CSS-Variablen, Component-Styling mit Tailwind-Utilities.

4. TypeScript Paths für Template-Portabilität

Imports laufen über @shared/* statt package-spezifische Namen wie @astro-v5/shared. Das macht das Template kopierfreundlich – wer es als Basis für eigene Projekte nutzt, muss nicht erst alle Imports umbenennen.

import OptimizedImage from '@shared/components/OptimizedImage.astro';
import { generateSitemapPages } from '@shared/utils/sitemap';

Die TypeScript-Konfiguration mapped @shared/* auf ../shared/src/* – einfach, transparent, portabel.

5. Environment Variable Validation mit Zod

Alle Environment-Variablen werden zur Laufzeit mit Zod validiert. Das verhindert Production-Crashes durch fehlende oder falsche Konfigurationen:

const envSchema = z.object({
  PUBLIC_SITE_URL: z.string().url(),
  PUBLIC_SITE_NAME: z.string().min(1),
});

Ein Fehler beim Start ist besser als ein Fehler im Live-Betrieb.

Tech Stack: Bewährt statt Bleeding Edge

Das Template setzt auf stabile, produktionserprobte Technologien:

Astro 5.15.4 – Static Site Generator mit Content Collections
Tailwind CSS 4.1.17 – Utility-First CSS
Svelte 5.43.5 – Reaktive Komponenten wo nötig
TypeScript 5.9.3 – Type Safety
Sharp 0.34.5 – Image Optimization
pnpm 9.15.4 – Schneller Package Manager
Volta – Automatisches Node.js Version Management

Keine experimentellen Features, keine Beta-Versionen. Alles, was hier drin ist, hat sich in Production bewährt.

Workflow: Von Clone bis Deploy

Der typische Workflow für ein neues Projekt:

1. Neues Projekt starten

git clone https://github.com/casoon/astro-v5-template.git
cd astro-v5-template
pnpm install
pnpm dev  # Startet Demo-Site

2. Neue Landingpage hinzufügen

mkdir packages/landing-page
cp -r packages/base/* packages/landing-page/
# package.json anpassen, dann:
pnpm install
pnpm --filter landing-page dev

3. Bilder optimieren

# Neue Bilder nach /public/images/ kopieren
pnpm optimize-images:landing-page
git add packages/landing-page/public/images-optimized/
git commit -m "Add optimized images"

4. Deploy

Jedes Package kann unabhängig deployed werden. Cloudflare Pages, Vercel, Netlify – alles möglich. Die dist/-Ordner sind normale Static Sites.

Für wen ist das Template?

Das Template richtet sich an:

Freelancer und Agenturen, die mehrere Kundenprojekte mit konsistenter Basis betreuen
Entwickler, die nicht bei jedem Projekt das Rad neu erfinden wollen
Teams, die ein Shared Design System über mehrere Webseiten nutzen möchten

Es ist kein experimentelles Framework, sondern eine produktionsreife Arbeitsgrundlage mit allem, was ich in hunderten Projekten als Standard etabliert habe.

Verfügbarkeit

Das Template ist öffentlich auf GitHub verfügbar:

github.com/casoon/astro-v5-template

Demo-Deployment: astrov5.casoon.dev

MIT-Lizenz, frei verwendbar, aktiv gepflegt.

Best Practices, standardisiert

Ein gutes Template ist mehr als ein Boilerplate – es ist eine Sammlung von Best Practices, technischen Entscheidungen und Workflows, die sich über Jahre bewährt haben.

Das Astro v5 Template ist genau das: Meine Arbeitsgrundlage, standardisiert und produktionsbereit. Wer ähnliche Anforderungen hat – Workspaces, Shared Design System, automatische Bildoptimierung – findet hier einen soliden Startpunkt.

Kein Hype, keine Experimente. Nur bewährte Technologie, sauber strukturiert.

Insights