Passer au contenu principal

​
Aperçus

Lorsque vous ouvrez un brouillon d’application, Kazzle peut démarrer un serveur de développement et afficher un aperçu en direct.

​
Fonctionnement

  1. Ouvrez un onglet brouillon depuis la barre latérale
  2. L’aperçu démarre automatiquement (ou cliquez sur « Démarrer l’aperçu » manuellement)
  3. Kazzle lit lifecycle.dev depuis votre kazzle.config.ts
  4. La commande de développement s’exécute sur le port assigné
  5. L’URL d’aperçu apparaît dans l’onglet brouillon

​
Configuration de la commande de développement

Définissez lifecycle.dev sur votre composant UI : 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Si lifecycle.dev n’est pas défini, le système d’aperçu bascule vers la détection automatique des serveurs de développement courants (Vite, Next.js, etc.).

​
URLs d’aperçu

Chaque application obtient un port dédié sur son sandbox. L’URL d’aperçu suit le modèle : 
http://localhost:{PORT}
La variable d’environnement PORT est automatiquement définie par le système d’aperçu.

​
Rechargement à chaud

Les modifications de votre code sont détectées par le rechargement à chaud (HMR) de votre serveur de développement. L’aperçu se met à jour en temps réel au fur et à mesure que vous ou l’IA modifiez les fichiers.

​
Contrôles manuels

  • Démarrer l’aperçu — démarre le serveur de développement s’il n’est pas en cours d’exécution
  • Arrêter l’aperçu — arrête le processus du serveur de développement
  • Redémarrer — arrêter + démarrer (utile après des modifications de configuration)

​
Vérification

Un aperçu est vérifié uniquement lorsque l’onglet app-dev s’ouvre et affiche l’interface utilisateur attendue. Un délai d’expiration, une ouverture d’onglet échouée, un processus arrêté ou une URL d’aperçu manquante signifient que l’aperçu n’est pas encore vérifié. Lorsque l’IA crée une application, elle doit ouvrir l’onglet app-dev après avoir démarré ou modifié le brouillon. Elle ne doit pas affirmer que l’application s’exécute en se basant uniquement sur la sortie de la commande.