> ## 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-сервера (використовується "Запустити попередній перегляд")
* `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` зі змінних оточення.

Див. [Автоматизація](/work/automations) для повної моделі тригерів, контракту змінних оточення та заголовка HTTP-аутентифікації.

## Команди runtime

| Фаза                   | Коли запускається                       | Приклад                                |
| ---------------------- | --------------------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Під час попереднього перегляду чернетки | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | У production                            | `bun run start`, `node dist/server.js` |

Скрипти пакета для попереднього перегляду чернетки можуть використовувати `kazzle run -- <command>`, щоб Kazzle міг вводити локальні порти та URL компонентів-сусідів. Процесні компоненти production мають оголошувати реальну команду в `runtime.prod.command`, оскільки розгортання запускає цю команду в production-образі.