Minecraft Gilde Web

Offizielle Website von Minecraft-Gilde.de (Minecraft-Server: Minecraft Gilde), gebaut mit Astro.

Tech-Stack

• Astro (statische Seite)
• TypeScript (strict)
• Tailwind CSS
• React (Astro Islands)
• Vitest (Unit-Tests)
• Node.js >= 22

Schnellstart

npm install
npm run dev

Dev-Server: http://localhost:4321

Wichtige Befehle

Befehl	Zweck
npm run dev	Lokale Entwicklung (Astro + Worker-Runtime)
npm run build	Produktionsbuild nach dist/
npm run preview	Lokale Vorschau des Builds (workerd)
npm run check	Astro Type-/Template-Check
npm run lint	ESLint
npm run test	Unit-Tests (Vitest)
npm run test:e2e	End-to-End-Tests (Playwright)
npm run config:check	Konfigurations-Drift prüfen
npm run format:check	Prettier-Check (CI-tauglich)

Wann dev und wann preview?

• npm run dev für die tägliche Entwicklung mit schnellem Feedback.
• npm run preview für den Produktions-Check nach npm run build.

Lokal testen (mit/ohne API)

1) Mit lokaler API (empfohlen)

cp .dev.vars.example .dev.vars
# .dev.vars mit DB-Daten befüllen
npm run dev

• Website und API laufen zusammen unter http://localhost:4321
• Beispiel: http://localhost:4321/api/metrics
• Standardmässig nutzt die lokale Entwicklung kein Hyperdrive.
• Andere Entwickler können über STATS_DB_* in .dev.vars ihre eigene DB anbinden.

2) Mit lokal emuliertem Hyperdrive (optional)

$env:CLOUDFLARE_ENV="production"
$env:CLOUDFLARE_HYPERDRIVE_LOCAL_CONNECTION_STRING_HYPERDRIVE="mysql://<user>:<pass>@<host>:3306/<db>?sslMode=REQUIRED"
npm run dev

• Dabei wird die Cloudflare-Umgebung production lokal verwendet.

3) Ohne lokale API (nur Frontend)

npm run dev

• Das Frontend läuft unter http://localhost:4321
• /api/* ist technisch vorhanden, aber ohne DB-Config nicht voll nutzbar

4) Ohne lokale API, aber mit externem API-Ziel

PUBLIC_API_ORIGIN=https://<dein-api-host> npm run dev

• Frontend nutzt dann das externe API-Ziel für /api/*
• Keine Secrets im Frontend setzen (nur URL, niemals DB-Credentials)

5) Produktionsnahe Vorschau lokal

npm run build
npm run preview

• astro preview nutzt mit @astrojs/cloudflare ebenfalls workerd
• npm run deploy:worker baut mit CLOUDFLARE_ENV=production und deployed die produktive Cloudflare-Umgebung.

Inhalte pflegen

• Befehle: src/content/commands/list.json
• Regeln: src/content/rules/main.json
• FAQ: src/content/faq/main.json
• Tutorial: src/content/tutorial/*.md

Hinweis: In Regeln werden Abschnitte teilweise als HTML-Strings gepflegt. Inhalte sauber escapen.

Projektbereiche

• src/pages/ für Seiten
• src/layouts/ für Layouts
• src/components/ für UI-Komponenten
• src/features/ für Feature-Module
• src/scripts/ für Browser-Logik
• src/content/ für redaktionelle Inhalte
• public/ für statische Assets und Server-Dateien
• scripts/ für Build-Helfer

Doku unter docs/

• Doku-Index
• Konfiguration und Umgebungsvariablen
• Frontend-Bootstrap und Ladeverhalten
• Content-Collections und Datenformate
• SEO, Canonical und strukturierte Daten
• Build- und Output-Besonderheiten
• Teststrategie (Unit und E2E)
• Projektstruktur und Frontend-Konventionen
• Statistik-API im Worker
• Live-Daten Architektur
• Content Security Policy (CSP)

Qualität

Empfohlener lokaler Gate-Run:

npm run format:check
npm run lint
npm run check
npm run test

Bei Build-/Routing-/Asset-Änderungen zusätzlich:

npm run build

CI-Workflow: .github/workflows/quality.yml

Deployment

• npm run build erzeugt die statische Ausgabe in dist/.
• Inhalte aus public/ werden 1:1 nach dist/ kopiert.