> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Komponenten

> UI- und Prozesskomponenten.

# 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.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **Max. 1 pro App** — Kazzle weist jeder App eine einzelne Vorschau-URL zu
* `runtime.dev.command` — Befehl für den Dev-Server (wird von „Vorschau starten" verwendet)
* `runtime.prod.build` — Befehl zum Erstellen des Produktionsimages
* `runtime.prod.command` — Befehl zum Starten einer Produktions-Prozesskomponente

Wenn `runtime.dev.command` 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.

```typescript theme={"theme":"material-theme-darker"}
{ 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` gesendet.
* `processMode: 'triggered'` — das Entry-Skript wird pro Trigger gestartet und beendet. Keine untätigen Maschinen in der Produktion.

### 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`.

```typescript theme={"theme":"material-theme-darker"}
{
  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](/work/automations) für das vollständige Trigger-Modell, den Env-Var-Vertrag und den HTTP-Authentifizierungs-Header.

## Runtime-Befehle

| Phase                  | Wann wird ausgeführt     | Beispiel                               |
| ---------------------- | ------------------------ | -------------------------------------- |
| `runtime.dev.command`  | Während Entwurfsvorschau | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | In der Produktion        | `bun run start`, `node dist/server.js` |

Entwurfsvorschau-Paketskripte können `kazzle run -- <command>` verwenden, damit Kazzle lokale Ports und URLs von Geschwisterkomponenten injizieren kann. Produktions-Prozesskomponenten müssen den echten Befehl in `runtime.prod.command` deklarieren, da die Bereitstellung diesen Befehl im Produktionsimage ausführt.