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

# Componenten

> UI- en procescomponenten.

# Componenten

Componenten zijn de uitvoerbare onderdelen van je app. Elke component heeft een `type` dat bepaalt hoe deze wordt uitgevoerd.

## UI-componenten

Een UI-component is een webfrontend — React, Vue, Svelte, plain HTML, of elk framework dat op een poort draait.

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

* **Max 1 per app** — Kazzle wijst één preview-URL per app toe
* `runtime.dev.command` — commando voor de dev-server (gebruikt door "Start preview")
* `runtime.prod.build` — commando om de productie-image te bouwen
* `runtime.prod.command` — commando om een productie-procescomponent te starten

Als `runtime.dev.command` niet is ingesteld, voert het preview-systeem `bun run dev` uit vanuit je `package.json`.

## Procescomponenten

Een procescomponent is een backend-service, worker of geplande taak.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### Levenscyclus: `processMode`

Een procescomponent heeft een van twee levenscycli:

* `processMode: 'persistent'` (standaard) — langlopende HTTP-server. Triggers worden in de draaiende server geplaatst op het aangegeven `path`.
* `processMode: 'triggered'` — het invoerscript wordt per trigger gestart en afgesloten. Geen inactieve machines in productie.

### Triggers

Schema- en webhook-triggers worden op de component aangegeven. Eén component kan veel triggers hebben. Elke trigger heeft een `name` (uniek binnen de component) en een `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` is vereist voor `processMode: 'persistent'`. Voor `processMode: 'triggered'` wordt het weggelaten — het script leest `TRIGGER_NAME` uit de omgeving.

Zie [Automations](/work/automations) voor het volledige trigger-model, env-var-contract en HTTP-authenticatieheader.

## Runtime-commando's

| Fase                   | Wanneer het wordt uitgevoerd | Voorbeeld                              |
| ---------------------- | ---------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Tijdens draft-preview        | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | In productie                 | `bun run start`, `node dist/server.js` |

Draft-preview-packagescripts kunnen `kazzle run -- <command>` gebruiken zodat Kazzle lokale poorten en URL's van sibling-componenten kan injecteren. Productie-procescomponenten moeten het echte commando in `runtime.prod.command` aangeven omdat deploy dat commando in de productie-image uitvoert.