Naar hoofdinhoud gaan

​
Previews

Wanneer je een app-concept opent, kan Kazzle een dev server starten en een live preview weergeven.

​
Hoe het werkt

  1. Open een concept-tab vanuit de zijbalk
  2. De preview start automatisch (of klik handmatig op “Preview starten”)
  3. Kazzle leest lifecycle.dev uit je kazzle.config.ts
  4. De dev-opdracht wordt uitgevoerd op de toegewezen poort
  5. De preview-URL verschijnt in de concept-tab

​
De dev-opdracht configureren

Stel lifecycle.dev in op je UI-component: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Als lifecycle.dev niet is ingesteld, valt het preview-systeem terug op automatische detectie van veelgebruikte dev servers (Vite, Next.js, enz.).

​
Preview-URL’s

Elke app krijgt een toegewezen poort in zijn sandbox. De preview-URL volgt dit patroon: 
http://localhost:{PORT}
De PORT omgevingsvariabele wordt automatisch ingesteld door het preview-systeem.

​
Hot reload

Wijzigingen in je code worden opgehaald door de hot reload (HMR) van je dev server. De preview wordt in real-time bijgewerkt terwijl jij of de AI bestanden bewerkt.

​
Handmatige besturingselementen

  • Preview starten — start de dev server als deze niet actief is
  • Preview stoppen — beëindigt het dev server-proces
  • Opnieuw starten — stoppen + starten (handig na configuratiewijzigingen)

​
Verificatie

Een preview wordt alleen geverifieerd wanneer het app-dev-tabblad opent en de verwachte UI weergeeft. Een timeout, mislukt tabblad openen, gestopt proces of ontbrekende preview-URL betekent dat de preview nog niet is geverifieerd. Wanneer de AI een app bouwt, moet deze het app-dev-tabblad openen nadat het concept is gestart of gewijzigd. Het mag niet alleen op basis van opdrachtuitvoer claimen dat de app actief is.