▲ Deploy to Vercel

Chapter: Deployment & Final Projects · Level ★★☆ · Time: 20 min

SCORE___ / 20

NameClassDate

After this worksheet you can

Import a repo to VercelSet build settingsAdd environment variablesExplain Vercel's role vs Railway

📚 Quick Recap

🎯 What you'll practice: Deploying a React frontend to Vercel from a GitHub repo.

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

5A Vite app's default build output folder is .

6Every push to main triggers an automatic on Vercel.

7List the 5 steps to deploy a React app to Vercel.

8Why must a frontend env variable like the API URL be set on Vercel, not hardcoded?

9Why is Vercel not suitable for hosting the Express + MongoDB backend from Project 5?

🚀 Section C · Challenge ● CHALLENGE 5

10Your deployed Vercel site shows a blank page and the console reports "Failed to fetch" for API calls. Diagnose two likely causes and how to fix each.

💭 Reflection — the most useful thing I learned:

A ___/4 B ___/11 C ___/5 Total ___/20 Teacher's Signature Parent's Signature

✂ answer key — fold or cut before handing out

1-B 2-B 3-B 4-B | 5 = dist 6 = redeploy 7 = push to GitHub, import repo on Vercel, confirm build settings, add env vars, deploy 8 = Because the backend URL differs between local development and production — an env variable lets the same code point to the right API without editing source per environment 9 = Vercel is optimized for building and serving static/frontend output; it doesn't keep a persistent server process running the way an Express app with an open MongoDB connection needs | 10 = Likely causes: (1) the VITE_API_URL env var wasn't set on Vercel or points to the wrong backend URL — fix by setting it correctly and redeploying; (2) CORS isn't configured on the backend to allow the Vercel domain — fix by adding the frontend origin to the Express cors() config.

📄 Need offline practice?Print this worksheet or open the one-page cheat sheet.

🗒 Cheat Sheet

🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4

🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11

🚀 Section C · Challenge ● CHALLENGE 5