📖 Notes LESSON 30 OF 32

Deploy to Vercel

⏱️ 20 min
🚀 Deployment

Putting Your Frontend Online

Vercel is built for frontend frameworks like React — connect a GitHub repo, and every push builds and deploys automatically.

Step by Step

1
Push your project to GitHub
Vercel deploys from a repository, not a local upload.
2
Import the repo on vercel.com
Sign in with GitHub and select the project to import.
3
Confirm build settings
Vercel auto-detects React/Vite projects — build command npm run build, output directory dist or build.
4
Add environment variables
e.g. VITE_API_URL pointing to your deployed backend from Lesson 31.
5
Deploy
Vercel gives you a live URL immediately, and redeploys automatically on every push to main.
💡
Frontend vs backend hosting
Vercel is optimized for static/frontend builds. Your Express + MongoDB backend from Project 5 needs a host that keeps a server process running — that's what Railway (Lesson 31) is for.
🗒 Cheat Sheet 📝 Worksheet