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

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

> Попередні перегляди сервера розробки для чернеток додатків.

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

Коли ви відкриваєте чернетку додатку, Kazzle може запустити сервер розробки та показати живий попередній перегляд.

## Як це працює

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

## Налаштування команди розробки

Встановіть `lifecycle.dev` на вашому компоненті UI:

```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' }
    }
  ]
});
```

Якщо `lifecycle.dev` не встановлено, система попереднього перегляду повертається до автоматичного виявлення звичайних серверів розробки (Vite, Next.js тощо).

## URL-адреси попередніх переглядів

Кожен додаток отримує виділений порт у своїй пісочниці. URL попереднього перегляду відповідає шаблону:

```
http://localhost:{PORT}
```

Змінна середовища `PORT` автоматично встановлюється системою попереднього перегляду.

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

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

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

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

## Перевірка

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

Коли ШІ створює додаток, він повинен відкрити вкладку app-dev після запуску або зміни чернетки. Він не повинен стверджувати, що додаток запущений лише на основі виходу команди.