Vite

A Vite app is built once and served as static files from Cloudflare's network. React, Vue, Svelte, Solid, Preact and plain Vite projects all deploy the same way.

Detection

A project is treated as Vite when vite is in dependencies or devDependencies, and either:

• its build script runs vite build ("build": "vite build", or "tsc && vite build" as in create-vite's TypeScript templates);
• or a vite.config.ts, .js, .mjs or .cjs file sits at its root.

A project with vite but neither fails to build: no supported framework is found. Add an empty config to opt in:

import { defineConfig } from 'vite';
 
export default defineConfig({});

Defaults

If your config sets build.outDir, set the same output directory on the project.

Environment variables

Vite inlines import.meta.env.VITE_* values into your bundle at build time. Hiraiship's environment variables are given to code running at the edge, not to the build, so they don't reach import.meta.env.

For values the browser may see (an API URL, a public key), set them in the build command:

hiraiship deploy --build-command "VITE_API_URL=https://api.example.com npx vite build"

To keep them for every deployment, put that command in the project's build settings. Never put a secret there: whatever ends up in the bundle is downloaded by every visitor.

Client-side routing

Client-side routers (React Router, Vue Router, TanStack Router…) work as they are. A request for a path with no matching file, like opening or reloading /settings, gets your index.html, and the router takes it from there.

This holds as long as your output has no 404.html at its root. With one, unknown paths serve that page with a 404 status instead: right for a multi-page site, wrong for a single-page app. See Static sites.