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

# Components

> UI and process components.

# Components

Components là những phần có thể thực thi của ứng dụng của bạn. Mỗi component có một `type` xác định cách nó chạy.

## UI components

Một UI component là một frontend web — React, Vue, Svelte, plain HTML, hoặc bất kỳ framework nào phục vụ trên một port.

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

* **Tối đa 1 trên mỗi ứng dụng** — Kazzle gán một URL preview duy nhất cho mỗi ứng dụng
* `runtime.dev.command` — lệnh cho dev server (được sử dụng bởi "Start preview")
* `runtime.prod.build` — lệnh để build production image
* `runtime.prod.command` — lệnh để khởi động một production process component

Nếu `runtime.dev.command` không được đặt, hệ thống preview chạy `bun run dev` từ `package.json` của bạn.

## Process components

Một process component là một backend service, worker, hoặc scheduled task.

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

### Lifecycle: `processMode`

Một process component có một trong hai lifecycle:

* `processMode: 'persistent'` (mặc định) — HTTP server chạy lâu dài. Triggers được POST vào server đang chạy tại `path` được khai báo.
* `processMode: 'triggered'` — entry script được spawn cho mỗi trigger và thoát. Không có máy idle trên production.

### Triggers

Schedule và webhook triggers được khai báo trên component. Một component có thể mang nhiều triggers. Mỗi trigger có một `name` (duy nhất trong component) và một `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` là bắt buộc cho `processMode: 'persistent'`. Đối với `processMode: 'triggered'` nó được bỏ qua — script đọc `TRIGGER_NAME` từ environment thay thế.

Xem [Automations](/work/automations) để biết đầy đủ trigger model, env-var contract, và HTTP authentication header.

## Runtime commands

| Phase                  | When it runs         | Example                                |
| ---------------------- | -------------------- | -------------------------------------- |
| `runtime.dev.command`  | During draft preview | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | In production        | `bun run start`, `node dist/server.js` |

Draft preview package scripts có thể sử dụng `kazzle run -- <command>` để Kazzle có thể inject local ports và URLs của sibling components. Production process components phải khai báo lệnh thực tế trong `runtime.prod.command` vì deploy chạy lệnh đó trong production image.