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

# Podglądy

> Podglądy serwera deweloperskiego dla szkiców aplikacji.

# Podglądy

Gdy otworzysz szkic aplikacji, Kazzle może uruchomić serwer deweloperski i wyświetlić podgląd na żywo.

## Jak to działa

1. Otwórz kartę szkicu z paska bocznego
2. Podgląd uruchamia się automatycznie (lub kliknij „Uruchom podgląd" ręcznie)
3. Kazzle odczytuje `lifecycle.dev` z pliku `kazzle.config.ts`
4. Polecenie dev uruchamia się na przypisanym porcie
5. Adres URL podglądu pojawia się na karcie szkicu

## Konfigurowanie polecenia dev

Ustaw `lifecycle.dev` na komponencie 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' }
    }
  ]
});
```

Jeśli `lifecycle.dev` nie jest ustawiony, system podglądu powraca do automatycznego wykrywania wspólnych serwerów deweloperskich (Vite, Next.js, itp.).

## Adresy URL podglądu

Każda aplikacja otrzymuje dedykowany port w swojej piaskownicy. Adres URL podglądu następuje wzór:

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

Zmienna środowiskowa `PORT` jest automatycznie ustawiana przez system podglądu.

## Gorące przeładowanie

Zmiany w kodzie są odbierane przez gorące przeładowanie serwera deweloperskiego (HMR). Podgląd aktualizuje się w czasie rzeczywistym w miarę edycji plików przez Ciebie lub AI.

## Kontrolki ręczne

* **Uruchom podgląd** — uruchamia serwer deweloperski, jeśli nie jest uruchomiony
* **Zatrzymaj podgląd** — kończy proces serwera deweloperskiego
* **Uruchom ponownie** — zatrzymaj + uruchom (przydatne po zmianach konfiguracji)

## Weryfikacja

Podgląd jest weryfikowany tylko wtedy, gdy karta app-dev otwiera się i wyświetla oczekiwany interfejs użytkownika. Limit czasu, nieudane otwarcie karty, zatrzymany proces lub brakujący adres URL podglądu oznaczają, że podgląd nie jest jeszcze zweryfikowany.

Gdy AI buduje aplikację, powinno otworzyć kartę app-dev po uruchomieniu lub zmianie szkicu. Nie powinno twierdzić, że aplikacja jest uruchomiona tylko na podstawie danych wyjściowych polecenia.