Vite and custom servers

How Bud connects to your pages, and what a custom server needs to do.

View Markdown

Bud waits for Vite's HTTP server and starts on its own port. Bud opens your pages in a headless browser and captures them; Vite's hot updates reach those pages like any other tab, so the canvas follows your edits. Your pages never receive Bud's API capability.

Custom server rendering

If your server renders HTML itself, pass every document through transformIndexHtml with the original URL, so Vite's client and its hot updates reach the page:

render.ts

import type { ViteDevServer } from 'vite'

export async function render(vite: ViteDevServer, url: string, template: string, html: string) {
  let shell = await vite.transformIndexHtml(url, template)
  return shell.replace('<!--app-html-->', () => html)
}

Keep a real Vite HTTP server. Middleware mode without a listener isn't supported, and streamed HTML needs its own integration.

Without Vite

For an app you run separately, set its origin and start Bud with the CLI:

bud.config.ts

import { defineConfig } from '@bud.sh/app'

export default defineConfig({
  routes: ['/', '/pricing'],
  target: { origin: 'http://127.0.0.1:3000' },
})

Terminal

npx bud .

Without Vite, Bud reloads the captured pages whenever project files change.