Przejdź do głównej treści

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 przydzielonym 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 wraca do automatycznego wykrywania wspólnych serwerów deweloperskich (Vite, Next.js, itp.).

Adresy URL podglądu

Każda aplikacja otrzymuje dedykowany port w swoim piaskownicy. Adres URL podglądu następuje wzór:
Zmienna środowiskowa PORT jest automatycznie ustawiana przez system podglądu.

Przeładowanie na gorąco

Zmiany w kodzie są odbierane przez hot reload 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 aplikacji-obszaru roboczego 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ę aplikacji-obszaru roboczego po uruchomieniu lub zmianie szkicu. Nie powinno twierdzić, że aplikacja jest uruchomiona tylko na podstawie danych wyjściowych polecenia.