Deploy Targets — Vercel, CF Pages, Tauri

A Vite SPA is just a folder of static files. Anywhere that serves static files plus a catch-all SPA rewrite can host it. The three picks below cover almost every real-world scenario.

Vercel

One vercel.json with a SPA rewrite, push to GitHub, Vercel builds and deploys on each commit. Best for: hobby projects, fast iteration, custom domains, preview deploys on every PR. Caveats: per-team pricing scales fast; egress costs on heavy bandwidth.

Cloudflare Pages

Connect a Git repo, set build command (npm run build) and output directory (dist), done. Wrangler CLI for local testing. Best for: high-bandwidth apps (Cloudflare's egress is free at any scale), edge-cached static assets globally. Caveats: build limits on free tier; some debugging quirks around the catch-all redirect.

Tauri (desktop)

Your Vite SPA becomes the frontend of a native desktop app. Tauri 2.0 wraps it in a Rust core and ships a real binary (macOS .dmg, Windows .msi, Linux deb/rpm/AppImage). Best for: apps that need OS integration, offline-first, no server runtime. This is exactly where the upcoming Cinder quests will live (the Rust + Tauri + cwkCinder optional bosses).

The SPA rewrite rule

Every static host needs to know: if a request comes in for /conversations/abc and there's no file at that path, serve /index.html so React Router can take over. Each host has its own syntax — Vercel uses vercel.json, CF Pages uses _redirects, Netlify uses _redirects, Tauri doesn't need one (no server).

Pick the deploy target by what the app actually does. Public marketing site → Vercel. High-bandwidth user content → Cloudflare. Native desktop / Tauri → the Tauri toolchain. Don't pick by familiarity; pick by fit.

Code

vercel.json — SPA catch-all rewrite·json

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

public/_redirects — Cloudflare Pages / Netlify SPA rewrite·text

# Single-line catch-all for SPA routing.
# Vite copies files from public/ to dist/ as-is.
/*  /index.html  200

Tauri 2.0 — wrapping the Vite app as native desktop·bash

# Add Tauri to an existing Vite project.
npm create tauri-app@latest --template vanilla
# Or in an existing project: add the @tauri-apps/cli, run `tauri init`,
# point its 'distDir' at your Vite dist/.

# Dev — runs Vite + Tauri together, opens the native window
npm run tauri dev

# Build — produces a native installer
npm run tauri build
# → src-tauri/target/release/bundle/*

Exercise

Pick one target. For Vercel: push your bootstrap project to GitHub, connect it on vercel.com, add the vercel.json above. For CF Pages: same flow, with the public/_redirects file. For Tauri: npm create tauri-app@latest and pick the React template, run npm run tauri dev. In all three cases, the goal is the same — your Vite app running outside your dev server, accessible from somewhere.

Hint

Vercel and CF Pages auto-detect Vite. Tauri's first run downloads a Rust toolchain (one-time, multi-GB) and may take 10+ minutes the first build.

Deploy Targets — Vercel, CF Pages, Tauri

Vercel

Cloudflare Pages

Tauri (desktop)

The SPA rewrite rule

Code

External links

Exercise

Progress

Comments 0