跳轉到主要內容

​
元件

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

​
UI 元件

UI 元件是網頁前端 — React、Vue、Svelte、純 HTML，或任何在連接埠上執行的框架。 
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: 'bun run dev' } }
  • 每個應用程式最多 1 個 — Kazzle 為每個應用程式指派單一預覽 URL
  • runtime.dev — 開發伺服器的命令（由「開始預覽」使用）
  • runtime.run — 提供生產組建的命令
如果未設定 runtime.dev，預覽系統會從你的 package.json 執行 bun run dev。

​
流程元件

流程元件是後端服務、背景工作程式或排程工作。 
{ name: 'API', type: 'process', path: './server/index.ts' }

​
生命週期：processMode

流程元件有兩種生命週期之一：
  • processMode: 'persistent'（預設）— 長期執行的 HTTP 伺服器。觸發程式會 POST 到執行中伺服器的宣告 path。
  • processMode: 'triggered' — 每個觸發程式會產生進入指令碼並結束。生產環境中沒有閒置機器。

​
觸發程式

排程和 webhook 觸發程式在元件上宣告。一個元件可以有許多觸發程式。每個觸發程式都有一個 name（在元件內唯一）和一個 kind。 
{
  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。 請參閱自動化以了解完整的觸發程式模型、環境變數合約和 HTTP 驗證標頭。

​
執行時命令

階段何時執行範例
dev在草稿預覽期間bun run dev、vite、next dev
run在生產環境中bun run start、node dist/server.js
草稿預覽套件指令碼可以使用 kazzle run -- <command>，以便 Kazzle 可以注入本機連接埠和同層元件 URL。生產流程元件必須在 runtime.run 中宣告真實命令，因為部署會在生產映像中執行該命令。