frontend-vite

Adds a Vite dev-server process service to an existing project.

What gets added

[runtime.node]
version = "22"

[services.frontend]
type = "process"
command = "npm run dev -- --port $PORT"
cwd = "./frontend"
port = "auto"

({{SERVICE_NAME}} becomes frontend and {{CWD}} becomes ./frontend by default; override with --service-name / --cwd.)

What you need to do

The recipe doesn't generate a Vite project. Before unibench start, make sure ./frontend contains one:

cd ~/Documents/unibench/my-project
npm create vite@latest frontend
cd frontend
npm install
cd ..
unibench start

Vite picks up --port $PORT via the standard CLI flag — no config-file changes needed.

Customizing

  • Different build tool. Apply the recipe, then edit services.frontend.command to whatever your tool needs (pnpm dev, yarn dev, etc.).
  • Different port-injection convention. Some Vite plugins expect VITE_PORT instead. Add env = { VITE_PORT = "$PORT" } to the service block.
  • TypeScript-only. The recipe doesn't care — pick the Vite template that fits.

Common gotchas

  • Vite ignores $PORT without the --port flag. That's why the recipe hard-codes -- --port $PORT. Removing it makes Vite default to 5173, which collides as soon as you have a second Vite-using project open.
  • HMR over a port the orchestrator owns. Works fine over localhost; tunneling HMR through ngrok or a reverse proxy needs the --host flag too.