> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Anteprime

> Anteprime del server di sviluppo per bozze di app.

# 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 (oppure 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:

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

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 delle 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 a caldo

Le modifiche al tuo codice vengono rilevate dal ricaricamento a caldo (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 alla configurazione)

## Verifica

Un'anteprima viene verificata solo quando la scheda app-dev si apre e mostra l'interfaccia utente prevista. Un timeout, un'apertura della scheda non riuscita, un processo interrotto o un URL di anteprima mancante significano 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.