Vai al contenuto principale

​
Anteprime

Quando apri una bozza di app, Kazzle può avviare un server di sviluppo e mostrare un’anteprima live.

​
Come funziona

  1. Apri una scheda bozza dalla barra laterale
  2. L’anteprima si avvia automaticamente (o fai clic su “Avvia anteprima” manualmente)
  3. Kazzle legge lifecycle.dev dal tuo kazzle.config.ts
  4. Il comando dev viene eseguito sulla porta assegnata
  5. L’URL dell’anteprima appare nella scheda bozza

​
Configurazione del comando dev

Imposta lifecycle.dev sul tuo componente UI: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Se lifecycle.dev non è impostato, il sistema di anteprima ricade sul rilevamento automatico del server di sviluppo comune (Vite, Next.js, ecc.).

​
URL anteprime

Ogni app ottiene una porta dedicata nella sua sandbox. L’URL dell’anteprima segue il modello: 
http://localhost:{PORT}
La variabile di ambiente PORT viene impostata automaticamente dal sistema di anteprima.

​
Ricaricamento automatico

Le modifiche al tuo codice vengono rilevate dal ricaricamento automatico (HMR) del tuo server di sviluppo. L’anteprima si aggiorna in tempo reale mentre tu o l’AI modificate i file.

​
Controlli manuali

  • Avvia anteprima — avvia il server di sviluppo se non è in esecuzione
  • Arresta anteprima — termina il processo del server di sviluppo
  • Riavvia — arresta + avvia (utile dopo modifiche di configurazione)

​
Verifica

Un’anteprima viene verificata solo quando la scheda app-dev si apre e mostra l’UI prevista. Un timeout, apertura della scheda non riuscita, processo interrotto o URL dell’anteprima mancante significa che l’anteprima non è ancora verificata. Quando l’AI crea un’app, dovrebbe aprire la scheda app-dev dopo aver avviato o modificato la bozza. Non dovrebbe affermare che l’app è in esecuzione basandosi solo sull’output del comando.