Chuyển đến nội dung chính

​
Bản xem trước

Khi bạn mở bản nháp ứng dụng, Kazzle có thể khởi động dev server và hiển thị bản xem trước trực tiếp.

​
Cách hoạt động

  1. Mở tab nháp từ thanh bên
  2. Bản xem trước tự động khởi động (hoặc nhấp “Khởi động bản xem trước” thủ công)
  3. Kazzle đọc lifecycle.dev từ kazzle.config.ts của bạn
  4. Lệnh dev chạy trên cổng được gán
  5. URL bản xem trước xuất hiện trong tab nháp

​
Cấu hình lệnh dev

Đặt lifecycle.dev trên thành phần UI của bạn: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Nếu lifecycle.dev không được đặt, hệ thống bản xem trước sẽ quay lại phát hiện dev server phổ biến (Vite, Next.js, v.v.).

​
URL bản xem trước

Mỗi ứng dụng nhận một cổng chuyên dụng trên sandbox của nó. URL bản xem trước tuân theo mẫu: 
http://localhost:{PORT}
Biến môi trường PORT được đặt tự động bởi hệ thống bản xem trước.

​
Tải lại nóng

Các thay đổi đối với mã của bạn được nhận bởi hot reload (HMR) của dev server. Bản xem trước cập nhật theo thời gian thực khi bạn hoặc AI chỉnh sửa tệp.

​
Điều khiển thủ công

  • Khởi động bản xem trước — khởi động dev server nếu nó không chạy
  • Dừng bản xem trước — kết thúc quy trình dev server
  • Khởi động lại — dừng + khởi động (hữu ích sau khi thay đổi cấu hình)

​
Xác minh

Bản xem trước được xác minh chỉ khi tab app-dev mở và hiển thị UI dự kiến. Hết thời gian chờ, mở tab không thành công, quy trình dừng hoặc URL bản xem trước bị thiếu có nghĩa là bản xem trước chưa được xác minh. Khi AI xây dựng ứng dụng, nó nên mở tab app-dev sau khi khởi động hoặc thay đổi bản nháp. Nó không nên khẳng định ứng dụng đang chạy chỉ từ đầu ra lệnh.