Zum Hauptinhalt springen

Developer Guide

Willkommen zum CockpitOS Developer Guide! Hier erfährst du, wie du eigene Plugins, Themes und Blocks für das CockpitOS Shopping Center Management System entwickelst.

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