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

# Componenti

> Componenti UI e di processo.

# Componenti

I componenti sono le parti eseguibili della tua app. Ogni componente ha un `type` che determina come viene eseguito.

## Componenti UI

Un componente UI è un frontend web — React, Vue, Svelte, HTML puro, o qualsiasi framework che gira su una porta.

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

* **Max 1 per app** — Kazzle assegna un singolo URL di anteprima per app
* `runtime.dev.command` — comando per il server di sviluppo (usato da "Avvia anteprima")
* `runtime.prod.build` — comando per compilare l'immagine di produzione
* `runtime.prod.command` — comando per avviare un componente di processo in produzione

Se `runtime.dev.command` non è impostato, il sistema di anteprima esegue `bun run dev` dal tuo `package.json`.

## Componenti di processo

Un componente di processo è un servizio backend, worker, o attività pianificata.

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

### Ciclo di vita: `processMode`

Un componente di processo ha uno di due cicli di vita:

* `processMode: 'persistent'` (predefinito) — server HTTP a lunga esecuzione. I trigger vengono inviati tramite POST al server in esecuzione al `path` dichiarato.
* `processMode: 'triggered'` — lo script di ingresso viene avviato per ogni trigger e termina. Nessuna macchina inattiva in produzione.

### Trigger

I trigger di pianificazione e webhook sono dichiarati sul componente. Un componente può avere molti trigger. Ogni trigger ha un `name` (univoco all'interno del componente) e 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` è obbligatorio per `processMode: 'persistent'`. Per `processMode: 'triggered'` viene omesso — lo script legge `TRIGGER_NAME` dall'ambiente.

Vedi [Automazioni](/work/automations) per il modello completo di trigger, il contratto delle variabili d'ambiente e l'intestazione di autenticazione HTTP.

## Comandi di runtime

| Fase                   | Quando viene eseguito        | Esempio                                |
| ---------------------- | ---------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Durante l'anteprima in bozza | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | In produzione                | `bun run start`, `node dist/server.js` |

Gli script di pacchetto dell'anteprima in bozza possono usare `kazzle run -- <command>` in modo che Kazzle possa iniettare porte locali e URL dei componenti fratelli. I componenti di processo in produzione devono dichiarare il comando reale in `runtime.prod.command` perché il deploy esegue quel comando nell'immagine di produzione.