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

# Composants

> Composants UI et processus.

# Composants

Les composants sont les parties exécutables de votre app. Chaque composant a un `type` qui détermine son mode d'exécution.

## Composants UI

Un composant UI est un frontend web — React, Vue, Svelte, HTML pur, ou tout framework qui s'exécute sur un port.

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

* **Max 1 par app** — Kazzle assigne une URL de prévisualisation unique par app
* `runtime.dev.command` — commande pour le serveur de développement (utilisée par « Démarrer la prévisualisation »)
* `runtime.prod.build` — commande pour construire l'image de production
* `runtime.prod.command` — commande pour démarrer un composant processus de production

Si `runtime.dev.command` n'est pas défini, le système de prévisualisation exécute `bun run dev` depuis votre `package.json`.

## Composants processus

Un composant processus est un service backend, un worker, ou une tâche planifiée.

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

### Cycle de vie : `processMode`

Un composant processus a l'un de deux cycles de vie :

* `processMode: 'persistent'` (par défaut) — serveur HTTP long-running. Les déclencheurs sont POSTés dans le serveur en cours d'exécution au `path` déclaré.
* `processMode: 'triggered'` — le script d'entrée est lancé par déclencheur et se termine. Pas de machines inactives en production.

### Déclencheurs

Les déclencheurs planifiés et webhook sont déclarés sur le composant. Un composant peut avoir plusieurs déclencheurs. Chaque déclencheur a un `name` (unique au sein du composant) et un `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` est requis pour `processMode: 'persistent'`. Pour `processMode: 'triggered'` il est omis — le script lit `TRIGGER_NAME` depuis l'environnement à la place.

Voir [Automations](/work/automations) pour le modèle complet de déclencheur, le contrat des variables d'environnement, et l'en-tête d'authentification HTTP.

## Commandes runtime

| Phase                  | Quand elle s'exécute                     | Exemple                                |
| ---------------------- | ---------------------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Pendant la prévisualisation de brouillon | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | En production                            | `bun run start`, `node dist/server.js` |

Les scripts de package de prévisualisation de brouillon peuvent utiliser `kazzle run -- <command>` pour que Kazzle puisse injecter les ports locaux et les URLs des composants frères. Les composants processus de production doivent déclarer la vraie commande dans `runtime.prod.command` car le déploiement exécute cette commande dans l'image de production.