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

# Komponen

> Komponen UI dan proses.

# Komponen

Komponen adalah bagian yang dapat dieksekusi dari aplikasi Anda. Setiap komponen memiliki `type` yang menentukan cara kerjanya.

## Komponen UI

Komponen UI adalah frontend web — React, Vue, Svelte, HTML biasa, atau kerangka kerja apa pun yang berjalan di port.

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

* **Maks 1 per aplikasi** — Kazzle menetapkan satu URL pratinjau per aplikasi
* `runtime.dev.command` — perintah untuk server dev (digunakan oleh "Mulai pratinjau")
* `runtime.prod.build` — perintah untuk membangun gambar produksi
* `runtime.prod.command` — perintah untuk memulai komponen proses produksi

Jika `runtime.dev.command` tidak diatur, sistem pratinjau menjalankan `bun run dev` dari `package.json` Anda.

## Komponen proses

Komponen proses adalah layanan backend, worker, atau tugas terjadwal.

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

### Siklus hidup: `processMode`

Komponen proses memiliki salah satu dari dua siklus hidup:

* `processMode: 'persistent'` (default) — server HTTP yang berjalan lama. Pemicu diPOST ke server yang berjalan di `path` yang dideklarasikan.
* `processMode: 'triggered'` — skrip entri dijalankan per pemicu dan keluar. Tidak ada mesin idle di produksi.

### Pemicu

Pemicu jadwal dan webhook dideklarasikan pada komponen. Satu komponen dapat membawa banyak pemicu. Setiap pemicu memiliki `name` (unik dalam komponen) dan `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` diperlukan untuk `processMode: 'persistent'`. Untuk `processMode: 'triggered'` dihilangkan — skrip membaca `TRIGGER_NAME` dari lingkungan sebagai gantinya.

Lihat [Automasi](/work/automations) untuk model pemicu lengkap, kontrak env-var, dan header autentikasi HTTP.

## Perintah runtime

| Fase                   | Kapan dijalankan       | Contoh                                 |
| ---------------------- | ---------------------- | -------------------------------------- |
| `runtime.dev.command`  | Selama pratinjau draft | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | Di produksi            | `bun run start`, `node dist/server.js` |

Skrip paket pratinjau draft dapat menggunakan `kazzle run -- <command>` sehingga Kazzle dapat menyuntikkan port lokal dan URL komponen saudara. Komponen proses produksi harus mendeklarasikan perintah nyata di `runtime.prod.command` karena deploy menjalankan perintah itu di gambar produksi.