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

# 組件

> UI 和流程組件。

# 組件

組件是你的應用的可執行部分。每個組件都有一個 `type` 來決定它如何運行。

## UI 組件

UI 組件是網頁前端 — React、Vue、Svelte、純 HTML 或任何在連接埠上運行的框架。

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

* **每個應用最多 1 個** — Kazzle 為每個應用分配一個預覽 URL
* `runtime.dev.command` — 開發伺服器的命令（由「開始預覽」使用）
* `runtime.prod.build` — 構建生產映像的命令
* `runtime.prod.command` — 啟動生產流程組件的命令

如果未設置 `runtime.dev.command`，預覽系統會從你的 `package.json` 運行 `bun run dev`。

## 流程組件

流程組件是後端服務、背景工作程式或排程任務。

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

### 生命週期：`processMode`

流程組件有兩種生命週期之一：

* `processMode: 'persistent'`（預設）— 長時間運行的 HTTP 伺服器。觸發器被 POST 到在宣告的 `path` 上運行的伺服器。
* `processMode: 'triggered'` — 每次觸發時生成入口指令碼並退出。生產環境中沒有閒置機器。

### 觸發器

排程和 webhook 觸發器在組件上宣告。一個組件可以攜帶多個觸發器。每個觸發器都有一個 `name`（在組件內唯一）和一個 `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` 對於 `processMode: 'persistent'` 是必需的。對於 `processMode: 'triggered'`，它被省略 — 指令碼改為從環境讀取 `TRIGGER_NAME`。

請參閱[自動化](/work/automations)以了解完整的觸發器模型、環境變數合約和 HTTP 驗證標頭。

## 運行時命令

| 階段                     | 何時運行    | 範例                                    |
| ---------------------- | ------- | ------------------------------------- |
| `runtime.dev.command`  | 在草稿預覽期間 | `bun run dev`、`vite`、`next dev`       |
| `runtime.prod.command` | 在生產環境中  | `bun run start`、`node dist/server.js` |

草稿預覽套件指令碼可以使用 `kazzle run -- <command>`，以便 Kazzle 可以注入本地連接埠和同級組件 URL。生產流程組件必須在 `runtime.prod.command` 中宣告真實命令，因為部署會在生產映像中運行該命令。