> ## 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.

# Компоненты

> UI и процессные компоненты.

# Компоненты

Компоненты — это исполняемые части вашего приложения. Каждый компонент имеет `type`, который определяет способ его запуска.

## UI компоненты

UI компонент — это веб-интерфейс на React, Vue, Svelte, простом HTML или любом фреймворке, работающем на порту.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **Максимум 1 на приложение** — Kazzle назначает один URL предпросмотра на приложение
* `runtime.dev.command` — команда для dev-сервера (используется функцией "Start preview")
* `runtime.prod.build` — команда для сборки production-образа
* `runtime.prod.command` — команда для запуска production процессного компонента

Если `runtime.dev.command` не установлена, система предпросмотра запускает `bun run dev` из вашего `package.json`.

## Процессные компоненты

Процессный компонент — это backend-сервис, воркер или запланированная задача.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### Жизненный цикл: `processMode`

Процессный компонент имеет один из двух жизненных циклов:

* `processMode: 'persistent'` (по умолчанию) — долгоживущий HTTP-сервер. Триггеры отправляются POST-запросами на работающий сервер по объявленному `path`.
* `processMode: 'triggered'` — скрипт запускается для каждого триггера и завершается. Нет простаивающих машин в production.

### Триггеры

Триггеры расписания и вебхука объявляются на компоненте. Один компонент может содержать много триггеров. Каждый триггер имеет `name` (уникальное в пределах компонента) и `kind`.

```typescript theme={"theme":"material-theme-darker"}
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
```

`path` обязателен для `processMode: 'persistent'`. Для `processMode: 'triggered'` он опускается — скрипт читает `TRIGGER_NAME` из переменных окружения.

Полную модель триггеров, контракт переменных окружения и заголовок аутентификации HTTP см. в разделе [Automations](/work/automations).

## Команды runtime

| Фаза                   | Когда запускается            | Пример                                 |
| ---------------------- | ---------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Во время draft-предпросмотра | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | В production                 | `bun run start`, `node dist/server.js` |

Скрипты пакета draft-предпросмотра могут использовать `kazzle run -- <command>`, чтобы Kazzle мог внедрить локальные порты и URL соседних компонентов. Production процессные компоненты должны объявить реальную команду в `runtime.prod.command`, потому что deploy запускает эту команду в production-образе.