Skip to main content

​
Components

Components are the executable parts of your app. Each component has a type that determines how it runs.

​
UI components

A UI component is a web frontend — React, Vue, Svelte, plain HTML, or any framework that serves on a port. 
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: 'bun run dev' } }
  • Max 1 per app — Kazzle assigns a single preview URL per app
  • runtime.dev — command for the dev server (used by “Start preview”)
  • runtime.run — command to serve the production build
If runtime.dev is not set, the preview system runs bun run dev from your package.json.

​
Process components

A process component is a backend service, worker, or scheduled task. 
{ name: 'API', type: 'process', path: './server/index.ts' }

​
Lifecycle: processMode

A process component has one of two lifecycles:
  • processMode: 'persistent' (default) — long-running HTTP server. Triggers are POSTed into the running server at the declared path.
  • processMode: 'triggered' — the entry script is spawned per trigger and exits. No idle machines on production.

​
Triggers

Schedule and webhook triggers are declared on the component. One component can carry many triggers. Each trigger has a name (unique within the component) and a kind. 
{
  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 is required for processMode: 'persistent'. For processMode: 'triggered' it’s omitted — the script reads TRIGGER_NAME from the environment instead. See Automations for the full trigger model, env-var contract, and HTTP authentication header.

​
Runtime commands

PhaseWhen it runsExample
devDuring draft previewbun run dev, vite, next dev
runIn productionbun run start, node dist/server.js
Draft preview package scripts can use kazzle run -- <command> so Kazzle can inject local ports and sibling component URLs. Production process components must declare the real command in runtime.run because deploy runs that command in the production image.