Перейти до основного вмісту

Попередні перегляди

Коли ви відкриваєте чернетку додатку, 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 автоматично встановлюється системою попереднього перегляду.

Гарячий перезавантаження

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

Ручні елементи керування

  • Запустити попередній перегляд — запускає dev-сервер, якщо він не працює
  • Зупинити попередній перегляд — завершує процес dev-сервера
  • Перезапустити — зупинити + запустити (корисно після змін конфігурації)

Перевірка

Попередній перегляд перевіряється лише коли вкладка додатку-робочої області відкривається і показує очікуваний інтерфейс. Час очікування, помилка відкриття вкладки, зупинений процес або відсутня URL-адреса попереднього перегляду означають, що попередній перегляд ще не перевірено. Коли AI будує додаток, він повинен відкрити вкладку додатку-робочої області після запуску або зміни чернетки. Він не повинен стверджувати, що додаток працює лише на основі виходу команди.