Zum Hauptinhalt springen

Developer Guide

Einstieg

★ Start hier (Entwicklung) — Monorepo, Architektur, APIs, MCP/Cursor, Erweiterungspfade.
Redaktions-Doku: Navbar Redaktion, nicht diese Sidebar.

Willkommen zum cockpitOS Developer Guide. Hier: Plugins, Themes, APIs, MCP und Erweiterung der Plattform — technisch, für Code und Integrationen.

Was du entwickeln kannst​

WordPress Themes​

  • Theme-Upload-System: ZIP-Upload mit Dashboard-Integration
  • Center-spezifische Anpassungen: Farben, Fonts, Logo pro Center
  • CSS-Variablen-System: Dynamische Theme-Anpassungen
  • Elementor-Integration: Custom Widgets und Dynamic Tags
  • Auto-Synchronisation: WordPress Plugin lädt Theme-Daten automatisch

Elementor Widgets​

  • cockpitOS Widgets: Shop-Grids, Event-Listen, News-Feeds
  • Dynamic Tags: Content-Areas, Shop-Daten, Event-Informationen
  • Theme-Integration: Widgets nutzen Dashboard-Farben und -Fonts
  • API-Integration: Live-Daten vom cockpitOS Dashboard

Blocks​

  • React-Komponenten: Moderne React-basierte Blocks
  • Schema-basiert: Automatische UI-Generierung aus JSON-Schema
  • Responsive: Mobile-first Design
  • Wiederverwendbar: Einsatz in verschiedenen Themes

Development Kit​

Im Monorepo liegt packages/sdk (@cockpitos/sdk) — CLI zum Scaffold von Block- und Theme-Plugins. Der globale npm install -g-Weg ist optional für externe Plugin-Autoren.

SDK (Monorepo)​

# Im Monorepo nach pnpm install:
pnpm --filter @cockpitos/sdk exec cockpitos create-block my-block
pnpm --filter @cockpitos/sdk exec cockpitos create-theme my-theme

Der Befehl cockpitos dev startet derzeit nur einen Platzhalter-Log — Plugin-Entwicklung erfolgt primär über npm run dev im erzeugten Plugin-Ordner. Storybook/Playground wie in älteren Docs beschrieben sind nicht im Paket enthalten.

Quick Start (extern)​

npm install -g @cockpitos/sdk
cockpitos create-block my-awesome-block
cd my-awesome-block && npm install && npm run dev

Dokumentation​

Community​

Voraussetzungen​

  • Node.js: >= 22.13 (wie Root-package.json / Render)
  • TypeScript: >= 5.0.0
  • React: >= 19.0.0
  • Next.js: >= 15.0.0

Dashboard-App im Monorepo (Build & Typecheck)​

  • Aktive Next-Konfiguration: apps/dashboard/next.config.js (nicht next.config.ts; die .ts-Datei dient nur als Referenz/IDE).
  • outputFileTracingRoot: zeigt auf das Workspace-Root, damit Next beim Build die richtige pnpm-lock.yaml nutzt (weniger Warnungen bei mehreren Lockfiles).
  • Große Uploads: experimental.serverActions.bodySizeLimit und experimental.middlewareClientMaxBodySize (kein veraltetes proxyClientMaxBodySize in Next 15.5).
  • pnpm --filter dashboard type-check: tsconfig.json des Dashboards nimmt .next/types nicht in include auf und exclude’t .next — die generierten Route-Validator-Typen erzeugen sonst viele False Positives; kein Einfluss auf Laufzeitdaten. Typed Routes für Link sind dann ggf. eingeschränkt; Quellcode unter src/ bleibt maßgeblich. (Next kann beim ersten Lauf Vorschläge in die Datei schreiben — .next/types bewusst nicht committen/übernehmen, wenn ihr sauberes tsc wollt.)
  • Build: PageNotFoundError / ENOENT beim Schritt „Collecting page data“: tritt bei inkrementellen Builds gelegentlich auf, wenn der .next‑Cache inkonsistent ist. Kein Datenverlust: das Dashboard führt vor pnpm build automatisch prebuild aus (rm -rf .next), damit der Produktions-Build stabil bleibt. (Nur Build-Artefakte, keine DB.) Die API-Routen unter src/app/api/.../route.ts werden dabei nicht verändert.

Nächste Schritte​

  1. Plugin-System verstehen - Grundlagen der Plugin-Architektur
  2. Erstes Plugin erstellen - Step-by-Step Tutorial
  3. Theme entwickeln - Eigenes Theme bauen (Coming Soon)
  4. Plugin veröffentlichen - Plugin im Marketplace veröffentlichen (Coming Soon)

Bereit loszulegen? Starte mit unserem Getting Started Guide.

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /developer-guide/intro