How to Deploy Your App on Vercel (Free)
Your app works on your computer. Now put it on the internet. Vercel makes this free and automatic — push to GitHub, and your app goes live.
This guide was written as of April 2026. If anything looks different, let us know.
Before you start
What you'll have at the end
Your app live at your-project.vercel.app (or your own domain)
Free tier
Unlimited deploys, 100GB bandwidth/month. Pro plan: $20/month.
Create a Vercel account
Go to vercel.com and click Sign Up. Sign in with your GitHub account — one click. This connects Vercel to your code automatically.
Import your GitHub repository
Vercel will show your GitHub repositories. Find your project and click Import. Vercel auto-detects your framework (Next.js, React, etc.).
Add your environment variables
This is the most important step. Open your project's .env file — these are the values you need to copy into Vercel.
In the Vercel import screen, expand "Environment Variables." For each line in your .env file, add the variable name and value.
The #1 mistake: forgetting to add env vars before deploying. Your app will break with cryptic errors. If you see errors after deploying, check this first.
Deploy
Click Deploy. Vercel builds your app and puts it online. This takes 1-3 minutes.
When it's done, your app is live at your-project.vercel.app.
How redeployment works
Every time you push code to GitHub, Vercel automatically rebuilds and redeploys your app. No manual steps needed.
Add a custom domain
Your app works at your-project.vercel.app, but yourdomain.com looks more professional.
Where to buy: Cloudflare Registrar (cheapest, ~$10/year) or Namecheap.
In Vercel, go to your project Settings > Domains. Add your domain. Vercel shows you the DNS records to update at your registrar. Update them, wait 5 minutes, done. SSL is automatic.
Troubleshooting: My deploy failed
The 5 most common errors:
1. Missing environment variables — check that every .env value is in Vercel
2. Build command wrong — Vercel usually auto-detects, but check Settings > General > Build Command
3. Node.js version mismatch — set the version in Settings > General > Node.js Version
4. Package install failed — check that your package.json is valid
5. TypeScript errors — your app may build locally but fail strict checks on Vercel
Tell Your AI Tool
Copy this prompt and paste it into your AI coding tool. It tells your AI exactly what credentials you just set up.
My app is now deployed on Vercel at [paste your URL]. I've added all environment variables from my .env file to Vercel's dashboard. Help me set up automatic deployments when I push to GitHub.
Paste the prompt into the chat panel (Cmd+L or Ctrl+L). Cursor can also read your .env file directly — if your credentials are there, it already knows.
YepAPI Tip
Add your YepAPI key as an environment variable: YEPAPI_KEY. That's it — every endpoint works in production exactly like it did locally.
Was this guide helpful?
Deploy on Vercel — FAQ
Vercel is a platform that puts your app on the internet. It takes your code from GitHub, builds it, and hosts it at a URL anyone can visit. Free for personal projects.
Yes. The Hobby plan is free with unlimited deploys and 100GB bandwidth per month. Enough for any side project. Pro plan is $20/month if you need more.
The same values from your local .env file, but stored in Vercel's dashboard so your live app can access them. Vercel can't read your local .env file — you have to copy the values over.
Push code to GitHub and Vercel automatically rebuilds your app. No manual steps. Takes 1-3 minutes per deploy.
Start vibe coding with one API key.
One API key. 100+ endpoints. Yep, that's it.