​

プレビュー

​

仕組み

1. サイドバーからドラフトタブを開く
2. プレビューが自動開始します（または「プレビュー開始」を手動でクリック）
3. Kazzle が kazzle.config.ts から lifecycle.dev を読み込む
4. 開発コマンドが割り当てられたポートで実行される
5. プレビュー URL がドラフトタブに表示される

​

開発コマンドの設定

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

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

​

プレビュー URL

http://localhost:{PORT}

​

ホットリロード

​

手動操作

• プレビュー開始 — 開発サーバーが実行されていない場合は起動します
• プレビュー停止 — 開発サーバープロセスを終了します
• 再起動 — 停止 + 開始（設定変更後に便利です）

​

検証