預覽

當你開啟應用草稿時，Kazzle 可以啟動開發伺服器並顯示即時預覽。

運作方式

從側邊欄開啟草稿標籤
預覽自動啟動（或手動點擊「啟動預覽」）
Kazzle 讀取 kazzle.config.ts 中的 lifecycle.dev
開發命令在指定的連接埠上執行
預覽 URL 出現在草稿標籤中

設定開發命令

在你的 UI 元件上設定 lifecycle.dev：

import { defineConfig } from '@kazzle/app';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});

如果未設定 lifecycle.dev，預覽系統會回退到常見的開發伺服器偵測（Vite、Next.js 等）。

預覽 URL

每個應用在其沙箱上都有一個專用連接埠。預覽 URL 遵循以下模式：

http://localhost:{PORT}

PORT 環境變數由預覽系統自動設定。

熱重載

你的程式碼變更會由開發伺服器的熱重載（HMR）偵測到。當你或 AI 編輯檔案時，預覽會即時更新。

手動控制

啟動預覽 — 啟動開發伺服器（如果尚未執行）
停止預覽 — 終止開發伺服器程序
重新啟動 — 停止 + 啟動（在設定變更後很有用）

驗證

預覽只有在應用開發標籤開啟並顯示預期的 UI 時才會被驗證。逾時、標籤開啟失敗、程序停止或缺少預覽 URL 表示預覽尚未驗證。當 AI 建置應用時，應在啟動或變更草稿後開啟應用開發標籤。不應僅根據命令輸出聲稱應用正在執行。

關於 Kazzle

工作

瀏覽

程式碼

應用程式

安全性

平台

預覽

預覽

運作方式

設定開發命令

預覽 URL

熱重載

手動控制

驗證

​預覽

​運作方式

​設定開發命令

​預覽 URL

​熱重載

​手動控制

​驗證

預覽

運作方式

設定開發命令

預覽 URL

熱重載

手動控制

驗證