Zum Hauptinhalt springen

Komponenten

Komponenten sind die ausführbaren Teile deiner App. Jede Komponente hat einen type, der bestimmt, wie sie ausgeführt wird.

UI-Komponenten

Eine UI-Komponente ist ein Web-Frontend — React, Vue, Svelte, Plain HTML oder jedes Framework, das auf einem Port läuft.
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: 'bun run dev' } }
  • Max. 1 pro App — Kazzle weist pro App eine einzelne Vorschau-URL zu
  • runtime.dev — Befehl für den Dev-Server (wird von „Vorschau starten” verwendet)
  • runtime.run — Befehl zum Bereitstellen des Production-Builds
Wenn runtime.dev nicht gesetzt ist, führt das Vorschausystem bun run dev aus deiner package.json aus.

Prozesskomponenten

Eine Prozesskomponente ist ein Backend-Service, Worker oder geplante Aufgabe.
{ name: 'API', type: 'process', path: './server/index.ts' }

Lebenszyklus: processMode

Eine Prozesskomponente hat einen von zwei Lebenszyklen:
  • processMode: 'persistent' (Standard) — lange laufender HTTP-Server. Trigger werden in den laufenden Server unter dem deklarierten path gepostet.
  • processMode: 'triggered' — das Entry-Skript wird pro Trigger gestartet und beendet. Keine untätigen Maschinen in der Production.

Trigger

Schedule- und Webhook-Trigger werden auf der Komponente deklariert. Eine Komponente kann viele Trigger tragen. Jeder Trigger hat einen name (eindeutig innerhalb der Komponente) und eine kind.
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
path ist erforderlich für processMode: 'persistent'. Für processMode: 'triggered' wird es weggelassen — das Skript liest stattdessen TRIGGER_NAME aus der Umgebung. Siehe Automationen für das vollständige Trigger-Modell, den Env-Var-Vertrag und den HTTP-Authentifizierungs-Header.

Runtime-Befehle

PhaseWann wird ausgeführtBeispiel
devWährend Entwurfsvorschaubun run dev, vite, next dev
runIn Productionbun run start, node dist/server.js
Entwurfsvorschau-Package-Skripte können kazzle run -- <command> verwenden, damit Kazzle lokale Ports und URLs von Geschwister-Komponenten injizieren kann. Production-Prozesskomponenten müssen den echten Befehl in runtime.run deklarieren, da Deploy diesen Befehl im Production-Image ausführt.