Langsung ke konten utama

​
Pratinjau

Saat Anda membuka draf aplikasi, Kazzle dapat memulai dev server dan menampilkan pratinjau langsung.

​
Cara kerjanya

  1. Buka tab draf dari sidebar
  2. Pratinjau dimulai otomatis (atau klik “Mulai pratinjau” secara manual)
  3. Kazzle membaca lifecycle.dev dari kazzle.config.ts Anda
  4. Perintah dev berjalan di port yang ditugaskan
  5. URL pratinjau muncul di tab draf

​
Mengonfigurasi perintah dev

Atur lifecycle.dev pada komponen UI Anda: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Jika lifecycle.dev tidak diatur, sistem pratinjau akan kembali ke deteksi dev server umum (Vite, Next.js, dll).

​
URL Pratinjau

Setiap aplikasi mendapat port khusus di sandbox-nya. URL pratinjau mengikuti pola: 
http://localhost:{PORT}
Variabel lingkungan PORT diatur secara otomatis oleh sistem pratinjau.

​
Hot reload

Perubahan pada kode Anda diambil oleh hot reload dev server Anda (HMR). Pratinjau diperbarui secara real-time saat Anda atau AI mengedit file.

​
Kontrol manual

  • Mulai pratinjau — memulai dev server jika tidak sedang berjalan
  • Hentikan pratinjau — menghentikan proses dev server
  • Mulai ulang — hentikan + mulai (berguna setelah perubahan konfigurasi)

​
Verifikasi

Pratinjau diverifikasi hanya saat tab app-dev dibuka dan menampilkan UI yang diharapkan. Timeout, gagal membuka tab, proses terhenti, atau URL pratinjau yang hilang berarti pratinjau belum diverifikasi. Saat AI membangun aplikasi, ia harus membuka tab app-dev setelah memulai atau mengubah draf. Ia tidak boleh mengklaim aplikasi berjalan hanya dari output perintah.