Docs · Frameworks

Deploy a Vite single-page app.

React, Vue, Svelte, Solid — if it’s a client-only Vite project, Canner builds it and serves the dist/ bundle as a static site with SPA fallback. Nothing to configure.

How it deploys

Detection keys off the vite dependency. Canner runs your build script and serves the output directory statically. Unknown paths fall back to index.html, so client-side routers (React Router, Vue Router) work on deep links and refreshes.

Have a backend too? If your project ships its own Node server that serves both an API and the built client — the shape most AI tools (Bolt, v0, Manus, Lovable) export — Canner detects that and runs the server instead. See Node servers & full-stack apps.

Environment variables

Vite inlines import.meta.env.VITE_* values at build time. Set them in the Env Vars tab before deploying; after changing one, redeploy so it’s baked into the new bundle. Variables without the VITE_ prefix never reach browser code — that’s Vite’s rule, and it protects your secrets.

Good to know

  • Calling an external API? Configure CORS on the API, or better, put the API on Canner too and give each its own project.
  • A custom outDir works — Canner finds the built index.html rather than assuming dist/.
  • Angular, CRA, Gatsby, Docusaurus and other static-build frameworks deploy the same way — build, then serve the output.