Saltar al contenido principal

​
Vistas previas

Cuando abres un borrador de app, Kazzle puede iniciar un servidor de desarrollo y mostrar una vista previa en vivo.

​
Cómo funciona

  1. Abre una pestaña de borrador desde la barra lateral
  2. La vista previa se inicia automáticamente (o haz clic en “Iniciar vista previa” manualmente)
  3. Kazzle lee lifecycle.dev de tu kazzle.config.ts
  4. El comando de desarrollo se ejecuta en el puerto asignado
  5. La URL de vista previa aparece en la pestaña de borrador

​
Configurar el comando de desarrollo

Establece lifecycle.dev en tu componente de UI: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Si lifecycle.dev no está configurado, el sistema de vista previa recurre a la detección automática de servidores de desarrollo comunes (Vite, Next.js, etc.).

​
URLs de vista previa

Cada app obtiene un puerto dedicado en su sandbox. La URL de vista previa sigue el patrón: 
http://localhost:{PORT}
La variable de entorno PORT se establece automáticamente mediante el sistema de vista previa.

​
Recarga en caliente

Los cambios en tu código se detectan mediante la recarga en caliente (HMR) de tu servidor de desarrollo. La vista previa se actualiza en tiempo real mientras tú o la IA editáis archivos.

​
Controles manuales

  • Iniciar vista previa — inicia el servidor de desarrollo si no está en ejecución
  • Detener vista previa — finaliza el proceso del servidor de desarrollo
  • Reiniciar — detener + iniciar (útil después de cambios de configuración)

​
Verificación

Una vista previa se verifica solo cuando la pestaña app-dev se abre y muestra la UI esperada. Un tiempo de espera agotado, apertura de pestaña fallida, proceso detenido o URL de vista previa faltante significa que la vista previa aún no está verificada. Cuando la IA construye una app, debe abrir la pestaña app-dev después de iniciar o cambiar el borrador. No debe afirmar que la app se está ejecutando basándose únicamente en la salida de comandos.