Skip to content

Deployment

Jax B edited this page Sep 11, 2026 · 1 revision

Deployment

FourFold is designed to deploy on Vercel, which serves src/ as a static SPA and api/*.ts as serverless functions.

Steps

  1. Push your fork/copy of the repo to your own GitHub.
  2. Import it into Vercel as a new project. Vercel auto-detects the Vite framework preset.
  3. Add the Upstash Redis integration: Storage → Create Database → Upstash → Redis, then connect it to the project. This sets KV_REST_API_URL / KV_REST_API_TOKEN automatically.
  4. Set the rest of the environment variables from Environment Variables in Project Settings → Environment Variables.
  5. Update your Google Cloud Console OAuth client and Spotify app (if used) to add your production domain's origin/redirect URIs, alongside your localhost ones — see Setup.
  6. Deploy.

Vercel plan limits

The api/ functions are consolidated (api/google.ts, api/spotify.ts each handle multiple logical endpoints via an internal ?action= param) to stay under the Vercel Hobby plan's per-deployment serverless function count. If you're deploying on a paid plan without that limit, there's no need to change this — it works either way — but it's why the routing looks the way it does. See Architecture for details.

Routing

vercel.json handles two things:

  • Rewriting stable external paths (e.g. /api/googleOAuthCallback) to the consolidated internal handlers (e.g. /api/google?action=oauthCallback), so OAuth redirect URIs registered with Google/Spotify never need to change even if the internal implementation is refactored.
  • A catch-all rewrite of everything else to /index.html, since this is a client-side-routed single-page app.

Clone this wiki locally