Skip to main content

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