Перейти к основному содержанию

Предпросмотры

Когда вы открываете черновик приложения, Kazzle может запустить dev-сервер и показать живой предпросмотр.

Как это работает

  1. Откройте вкладку черновика из боковой панели
  2. Предпросмотр запускается автоматически (или нажмите «Запустить предпросмотр» вручную)
  3. Kazzle читает lifecycle.dev из вашего kazzle.config.ts
  4. Команда dev запускается на назначенном порту
  5. URL предпросмотра появляется на вкладке черновика

Настройка команды dev

Установите lifecycle.dev на вашем UI-компоненте:
Если lifecycle.dev не установлен, система предпросмотра переходит на автоматическое обнаружение распространённых dev-серверов (Vite, Next.js и т. д.).

URL-адреса предпросмотра

Каждое приложение получает выделенный порт в своей песочнице. URL предпросмотра следует шаблону:
Переменная окружения PORT автоматически устанавливается системой предпросмотра.

Горячая перезагрузка

Изменения в вашем коде подхватываются горячей перезагрузкой (HMR) вашего dev-сервера. Предпросмотр обновляется в реальном времени по мере того, как вы или ИИ редактируете файлы.

Ручное управление

  • Запустить предпросмотр — запускает dev-сервер, если он не работает
  • Остановить предпросмотр — завершает процесс dev-сервера
  • Перезагрузить — остановить + запустить (полезно после изменения конфигурации)

Проверка

Предпросмотр проверяется только когда вкладка приложения-рабочего пространства открывается и показывает ожидаемый интерфейс. Истечение времени ожидания, ошибка открытия вкладки, остановленный процесс или отсутствие URL предпросмотра означают, что предпросмотр ещё не проверен. Когда ИИ создаёт приложение, он должен открыть вкладку приложения-рабочего пространства после запуска или изменения черновика. Он не должен утверждать, что приложение работает, основываясь только на выводе команды.