> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bản xem trước

> Dev server previews cho bản nháp ứng dụng.

# 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 "Bắt đầu 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:

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

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 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 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

* **Bắt đầu xem trước** — khởi động dev server nếu nó không chạy
* **Dừng xem trước** — kết thúc quá trình dev server
* **Khởi động lại** — dừng + bắt đầu (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, 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-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.