Vibe Coach
← Help Center

Deploying with Vercel (JavaScript)

Vercel puts your JavaScript app on the internet. Once connected, every time you use the Ship button, Vercel automatically rebuilds and redeploys your app. You get a free URL (like your-project.vercel.app) that anyone can visit. This step is optional — you can build locally without it and connect Vercel later.

Building with Python (Flask, FastAPI, Django)? See Deploying with Railway instead.

What Happens

Vibecheck deploys to Vercel for you automatically. When you reach the hosting step, Claude opens a browser, navigates to Vercel, imports your GitHub repo, and deploys your app. It also adds your Supabase environment variables to Vercel so your app works right away. You'll see it all happening in a terminal panel inside VS Code.

Once deployed, you get a live URL (like your-project.vercel.app) and every time you use the Ship button, Vercel automatically rebuilds and redeploys.

If the Automated Setup Doesn't Work

If Claude gets stuck or disconnected, you can set things up manually:

  1. Go to vercel.com and sign in (or create a free account)
  2. Connect your GitHub account if you haven't already
  3. Click "Add New → Project" and import your repo
  4. Accept the default framework detection and click Deploy
  5. After deployment, go to Settings → Environment Variables and add: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. The extension has copy buttons to make this easy.
  6. Redeploy for the env vars to take effect

It's Not Working

What's the difference between Vercel, GitHub, and Supabase?›

Three different jobs: GitHub = your code backup (like Google Drive, but for code). Supabase = your database (stores your app's data — users, posts, settings). Vercel = your publisher (takes your code from GitHub and makes it live on the internet). You write code in VS Code → Ship it to GitHub → Vercel automatically rebuilds and puts it live. Supabase runs separately, storing your app's data in the background.

Do I need Vercel right now?›

No. You can skip this step and still build and preview your app locally. Connect Vercel when you're ready to share it or go live. Click "Skip for now" in the extension.

It deployed but my app shows an error page›

This is almost always missing environment variables. Go to Vercel → your project → Settings → Environment Variables and make sure NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY are set. Then redeploy. If the automated setup added them, they should already be there — double-check they're correct.

The build failed on Vercel›

Open Vercel → your project → Deployments → click the failed deployment → read the build logs. Find the error line (usually in red). Paste it into Claude: "My Vercel build failed with this error: [paste error] — can you fix it?" Claude can diagnose and fix almost all build failures.

What are environment variables? Why can't I just put my API keys in my code?›

Environment variables are a safe place to store secrets — like your Supabase password or API keys — separate from your code. Your code goes on GitHub, which could be public or shared. If your API keys are in your code, anyone who sees your code can use them. Environment variables keep secrets out of your code and stored privately on whatever service is running your app. On Lovable and Bolt, this was handled invisibly for you. In VS Code, you manage it yourself — but it's a one-time setup and Vibecheck walks you through it.

Still stuck? Contact us →