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

# Komponenty

> Komponenty interfejsu użytkownika i procesów.

# Komponenty

Komponenty to wykonywalne części Twojej aplikacji. Każdy komponent ma `type`, który określa sposób jego uruchomienia.

## Komponenty interfejsu użytkownika

Komponent interfejsu użytkownika to frontend internetowy — React, Vue, Svelte, zwykły HTML lub dowolny framework działający na porcie.

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

* **Maksymalnie 1 na aplikację** — Kazzle przypisuje jeden adres URL podglądu na aplikację
* `runtime.dev.command` — polecenie dla serwera deweloperskiego (używane przez "Uruchom podgląd")
* `runtime.prod.build` — polecenie do zbudowania obrazu produkcyjnego
* `runtime.prod.command` — polecenie do uruchomienia komponentu procesu produkcyjnego

Jeśli `runtime.dev.command` nie jest ustawiony, system podglądu uruchamia `bun run dev` z Twojego `package.json`.

## Komponenty procesów

Komponent procesu to usługa backend, worker lub zaplanowane zadanie.

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

### Cykl życia: `processMode`

Komponent procesu ma jeden z dwóch cykli życia:

* `processMode: 'persistent'` (domyślnie) — długotrwały serwer HTTP. Wyzwalacze są wysyłane POST do uruchomionego serwera na zadeklarowanej `path`.
* `processMode: 'triggered'` — skrypt wejściowy jest uruchamiany dla każdego wyzwalacza i kończy się. Brak bezczynnych maszyn w produkcji.

### Wyzwalacze

Wyzwalacze harmonogramu i webhook są deklarowane na komponencie. Jeden komponent może mieć wiele wyzwalaczy. Każdy wyzwalacz ma `name` (unikatową w obrębie komponentu) i `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` jest wymagana dla `processMode: 'persistent'`. Dla `processMode: 'triggered'` jest pominięta — skrypt odczytuje `TRIGGER_NAME` ze zmiennych środowiskowych.

Zapoznaj się z [Automatyzacją](/work/automations), aby poznać pełny model wyzwalaczy, umowę zmiennych środowiskowych i nagłówek uwierzytelniania HTTP.

## Polecenia runtime

| Faza                   | Kiedy się uruchamia        | Przykład                               |
| ---------------------- | -------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Podczas podglądu roboczego | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | W produkcji                | `bun run start`, `node dist/server.js` |

Skrypty pakietu podglądu roboczego mogą używać `kazzle run -- <command>`, aby Kazzle mogła wstrzyknąć lokalne porty i adresy URL komponentów równorzędnych. Komponenty procesów produkcyjnych muszą zadeklarować rzeczywiste polecenie w `runtime.prod.command`, ponieważ wdrożenie uruchamia to polecenie w obrazie produkcyjnym.