Deploying to Vercel — Import, env vars, first deploy

This is the moment. By the end of this lesson, your app will have a real URL that anyone in the world can open. Let's ship it.

---

Before You Start

Run through this quick checklist. Sorting these out now saves you a frustrating debugging session later:

• Your app runs locally with no errors (npm run dev → no red errors in the terminal).
• Your code is pushed to GitHub.
• You have your Supabase project URL and anon key handy (from your .env.local file).

If your app doesn't use a database, you can skip the Supabase parts — but most of you will need them.

---

Step 1: Create a Vercel Account

1. Go to vercel.com.
2. Click Sign Up.
3. Choose Continue with GitHub — this is strongly recommended, because it's how Vercel reads the repos you want to deploy.
4. Authorize Vercel to access your GitHub account.

That's it. No credit card, no configuration. You're in.

---

Step 2: Import Your Project

Vercel deploys an app by connecting to a GitHub repository. You don't upload files — you point Vercel at your repo and it pulls the code itself.

1. From the Vercel dashboard, click Add New… → Project.
2. You'll see a list of your GitHub repositories.
3. Find your app's repository and click Import.

---

Step 3: Configure the Project

Because Vercel makes Next.js, it recognizes your app automatically. The defaults are almost always exactly right — resist the urge to change them.

The one part that needs your attention is Environment Variables. This is where you give the live app your secret keys — the same ones from your .env.local.

Click Add for each one:

Copy the names exactly, including the NEXT_PUBLIC_ prefix. A single typo here means your app builds fine but can't talk to its database. If you have other variables in your .env.local, add those too.

---

Step 4: Deploy

Click Deploy.

Behind the scenes, Vercel will:

1. Clone your GitHub repo.
2. Run npm install to install your dependencies.
3. Run npm run build to compile your app.
4. Push the result to its global CDN.

This takes one to three minutes. You'll see a live log scrolling by — you don't need to understand every line, just watch for it to finish.

---

Step 5: You're Live

When the build succeeds, Vercel throws a confetti animation across the screen (genuinely — they earned it) and shows you your app's URL:

https://your-app-name-xxxx.vercel.app

Click it. Your app is on the internet. Send the link to a friend right now — they can open it on their phone, on the other side of the world. That's a real thing you built and shipped.

---

When the Build Fails

Deploys fail sometimes, even when everything works on your laptop. Don't panic — the error log tells you what went wrong, and Claude Code can almost always fix it. Here are the usual suspects.

"Environment variable is not defined"

You forgot to add a variable, or misspelled one. Go to your Vercel project → Settings → Environment Variables, add the missing one, then Redeploy.

A TypeScript error

Sometimes the build catches a code error your local dev server let slide. The log names the exact file and line. Hand it to Claude Code:

I'm getting this TypeScript error when deploying to Vercel: [paste the error]. How do I fix it?

"Module not found"

A package works on your machine but isn't listed in package.json, so Vercel can't install it. Ask Claude Code:

I'm getting "Module not found" for [package name] when building on Vercel. How do I fix this?

App builds but shows errors once it's live

Almost always environment variables. Double-check that the names in Vercel match exactly what your code expects.

The recovery loop: copy the error from Vercel's deployment log → paste it to Claude Code → apply the fix → push → it redeploys. You'll get fast at this.

---

Auto-Deploy Is Already On

Here's the quiet superpower you just unlocked: from now on, every time you push to your main branch, Vercel deploys automatically. This is continuous deployment, and it's on by default.

Prove it to yourself:

1. Change a word on your homepage locally.
2. Commit and push to GitHub.
3. Open your Vercel dashboard → your project → Deployments.
4. Watch a fresh deployment appear and finish in about a minute.
5. Refresh your live URL — the change is there.

From here on, your entire publishing process is: write → commit → push → it deploys itself.

---

Preview Deployments

Vercel gives every non-main branch its own private preview URL. This lets you test a change in a real live environment before it reaches your actual users.

git checkout -b my-feature
# make changes, then:
git add .
git commit -m "Try a new feature"
git push origin my-feature

Vercel deploys a preview at something like your-app-my-feature.vercel.app. Test it there. When you're happy, merge to main — and it goes to production.

---

Tell Supabase About Your New URL

If your app uses Supabase authentication (especially "Sign in with Google" or similar), Supabase needs to know your live URL is allowed to make requests.

1. Open your Supabase project → Authentication → URL Configuration.
2. Set Site URL to your Vercel URL: https://your-app.vercel.app.
3. Add it to Redirect URLs too: https://your-app.vercel.app/**.

Skip this and login may simply fail in production while working fine locally — a confusing bug worth heading off now.

---

Summary

• Sign up for Vercel with GitHub so it can read your repos.
• Import your repo from the dashboard — you point at GitHub, you don't upload files.
• Add your environment variables (Supabase URL and anon key) before deploying.
• Click Deploy — it builds in 1–3 minutes, then you have a live URL.
• Auto-deploy is on: every push to main ships a new version automatically.
• When a build fails, the log tells you why — paste it to Claude Code and fix it.
• Update Supabase's allowed URLs so authentication works in production.