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 przypisanym porcie
  5. URL podglądu pojawia się na karcie szkicu

​
Konfigurowanie polecenia dev

Ustaw lifecycle.dev na komponencie UI: 
import { defineConfig } from './kazzle.types';

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 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: 
http://localhost:{PORT}
Zmienna środowiskowa PORT jest automatycznie ustawiana przez system podglądu.

​
Przeładowanie na gorąco

Zmiany w kodzie są wykrywane 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 app-dev otwiera się i wyświetla oczekiwany interfejs użytkownika. Timeout, 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.