Skip to content

vercel-setup.md

Latest commit

 

History

History
74 lines (52 loc) · 3.1 KB

vercel-setup.md

File metadata and controls

74 lines (52 loc) · 3.1 KB
Raw

Vercel Setup

This app deploys as a single Vercel project: the React frontend, the /api serverless functions, and an Upstash Redis store for configuration. There is no separate backend.

Option A: One-Click Deploy (recommended)

  1. Click the Deploy with Vercel button in the README.
    • This clones the repo into your own GitHub account and creates a Vercel project.
  2. When the project is created, add storage:
    • Go to Storage → Create Database, choose Upstash (Redis), and connect it to the project.
    • Vercel injects KV_REST_API_URL and KV_REST_API_TOKEN automatically.
    • If the first deploy ran before you added the Redis store, click Redeploy.
  3. Open your app URL (e.g. https://your-app.vercel.app). You'll see the setup wizard.
  4. Follow the wizard:
    • Create a Spotify app (see spotify-setup.md) and paste the Redirect URI it shows.
    • Enter Client ID + Secret → Connect Spotify → set your party name, emoji, color, and optional admin PIN.

No environment variables to set by hand.

Option B: Deploy from the CLI

npm i -g vercel
vercel            # first deploy (creates the project)

Then add a Redis store in the dashboard (Storage → Create Database → Upstash Redis) and redeploy:

vercel --prod

Custom Domain (optional)

  1. Go to Project Settings → Domains.
  2. Add your domain (e.g. queue.yourdomain.com).
  3. Add the DNS record Vercel shows you. SSL is automatic.

If you add a custom domain after connecting Spotify, update the Redirect URI in your Spotify app to use the new domain, then reconnect via /?admin=1.

Local Full-Stack Development

To run the API routes locally you need the Redis credentials:

vercel link                  # link the local folder to your Vercel project
vercel env pull .env.local   # pulls KV_REST_API_URL / KV_REST_API_TOKEN
pnpm dev:vercel              # vercel dev — serves frontend + /api together

pnpm dev (plain Vite) is fine for UI work but does not serve /api.

Environment Variables

Variable Source Notes
KV_REST_API_URL Auto-injected when you link a Redis store Pull locally with vercel env pull
KV_REST_API_TOKEN Auto-injected when you link a Redis store Pull locally with vercel env pull

Spotify credentials are entered in the setup wizard and stored in Redis — not as environment variables.

Auto-Deploy from Git

Once the project is linked to your GitHub repo, every push to main auto-deploys. Preview deployments are created for other branches.

Troubleshooting

Issue Solution
Wizard says it can't reach the server Redis isn't linked — add a Redis store and redeploy
Build fails on Vercel Set Node to 22 in Project Settings → General
/api/* returns 500 Check the function logs; usually missing Redis env vars
Setup wizard reappears unexpectedly Setup may have been reset; complete it again (set a PIN to lock it)
Stuck on the Spotify step Confirm the Redirect URI in your Spotify app matches exactly