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 bản 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 bản nháp

Cấu hình lệnh dev

Đặt lifecycle.dev trên thành phần UI của bạn:
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:
Biến môi trường PORT được tự động đặt 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 của bạn. 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 quá 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-workspace mở và hiển thị UI dự kiến. Hết thời gian chờ, mở tab không thành công, quá 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ó sẽ mở tab app-workspace 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.