Перейти к основному содержанию

​
Превью

Когда вы открываете черновик приложения, Kazzle может запустить dev-сервер и показать живое превью.

​
Как это работает

  1. Откройте вкладку черновика из боковой панели
  2. Превью запускается автоматически (или нажмите “Запустить превью” вручную)
  3. Kazzle читает lifecycle.dev из вашего kazzle.config.ts
  4. Команда dev запускается на назначенном порту
  5. URL превью появляется на вкладке черновика

​
Настройка команды dev

Установите lifecycle.dev на вашем UI-компоненте: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Если lifecycle.dev не установлен, система превью переходит на автоматическое обнаружение распространённых dev-серверов (Vite, Next.js и т. д.).

​
URL превью

Каждое приложение получает выделенный порт в своей песочнице. URL превью следует шаблону: 
http://localhost:{PORT}
Переменная окружения PORT автоматически устанавливается системой превью.

​
Горячая перезагрузка

Изменения в вашем коде подхватываются горячей перезагрузкой dev-сервера (HMR). Превью обновляется в реальном времени по мере редактирования файлов вами или ИИ.

​
Ручное управление

  • Запустить превью — запускает dev-сервер, если он не работает
  • Остановить превью — завершает процесс dev-сервера
  • Перезагрузить — остановка + запуск (полезно после изменения конфигурации)

​
Проверка

Превью проверяется только когда вкладка app-dev открывается и показывает ожидаемый интерфейс. Таймаут, ошибка открытия вкладки, остановленный процесс или отсутствие URL превью означают, что превью ещё не проверено. Когда ИИ создаёт приложение, он должен открыть вкладку app-dev после запуска или изменения черновика. Он не должен утверждать, что приложение работает, основываясь только на выводе команды.