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

# Components

> UI और प्रक्रिया घटक।

# Components

Components आपके ऐप के निष्पादन योग्य भाग हैं। प्रत्येक component का एक `type` होता है जो यह निर्धारित करता है कि यह कैसे चलता है।

## UI components

एक UI component एक वेब फ्रंटएंड है — React, Vue, Svelte, सादा HTML, या कोई भी फ्रेमवर्क जो एक पोर्ट पर सेवा प्रदान करता है।

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

* **अधिकतम 1 प्रति ऐप** — Kazzle प्रत्येक ऐप के लिए एक एकल preview URL असाइन करता है
* `runtime.dev.command` — dev सर्वर के लिए कमांड ("Start preview" द्वारा उपयोग किया जाता है)
* `runtime.prod.build` — production image बनाने के लिए कमांड
* `runtime.prod.command` — production process component शुरू करने के लिए कमांड

यदि `runtime.dev.command` सेट नहीं है, तो preview सिस्टम आपके `package.json` से `bun run dev` चलाता है।

## Process components

एक process component एक backend सेवा, worker, या scheduled task है।

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

### Lifecycle: `processMode`

एक process component के दो lifecycles में से एक होता है:

* `processMode: 'persistent'` (डिफ़ॉल्ट) — लंबे समय तक चलने वाला HTTP सर्वर। Triggers को घोषित `path` पर चलने वाले सर्वर में POST किया जाता है।
* `processMode: 'triggered'` — entry script को प्रत्येक trigger के लिए spawn किया जाता है और बाहर निकल जाता है। Production में कोई idle मशीनें नहीं।

### Triggers

Schedule और webhook triggers को component पर घोषित किया जाता है। एक component कई triggers ले सकता है। प्रत्येक trigger का एक `name` (component के भीतर अद्वितीय) और एक `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'` के लिए इसे छोड़ दिया जाता है — script इसके बजाय environment से `TRIGGER_NAME` पढ़ता है।

पूर्ण trigger मॉडल, env-var contract, और HTTP authentication header के लिए [Automations](/work/automations) देखें।

## Runtime commands

| Phase                  | कब चलता है             | उदाहरण                                 |
| ---------------------- | ---------------------- | -------------------------------------- |
| `runtime.dev.command`  | Draft preview के दौरान | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | Production में         | `bun run start`, `node dist/server.js` |

Draft preview package scripts `kazzle run -- <command>` का उपयोग कर सकते हैं ताकि Kazzle स्थानीय ports और sibling component URLs को inject कर सके। Production process components को `runtime.prod.command` में वास्तविक कमांड घोषित करना चाहिए क्योंकि deploy उस कमांड को production image में चलाता है।