by @must_be_ash

Vercel

Deploy your app to production - make it live on the internet

What is Vercel?

This is what puts your app on the internet for people to see. Like publishing your site.

Deploy via Web Interface

Step-by-Step Setup

1. Go to vercel.com and sign up with GitHub
2. Click Add New Project and choose your app repo
3. Click through the setup — you usually don't need to change anything
4. Click Deploy

Environment Variables (IMPORTANT!)

Critical Step:

Go to the Settings tab and find Environment Variables. Add any keys or secrets from your .env file here manually.

Your app won't work properly in production without these environment variables!

You're Live!

That's it. Your app is now live. You'll get a link like:

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

You can share this anywhere — it updates automatically every time you push to GitHub!

Deploy via Terminal (CLI)

You can also interact with Vercel through your terminal for more control:

1. Install Vercel CLI

npm install -g vercel

2. Login to Vercel

vercel login

Follow the steps — they'll send a magic link to your email.

3. Deploy Your App

For preview deployments:

vercel

For production deployment (what people will see online):

vercel --prod

The terminal will give you a live URL right after deployment.

4. Update Your App

If you update your code, just re-run vercel --prod to publish changes.

Custom Domain Setup

Want a custom domain? (like mycoolapp.xyz instead of your-app-name.vercel.app) Here's the detailed step-by-step process:

Step 1: Add Domain in Vercel

  • •Navigate to Settings → Domains on Vercel and press the 'Add Domain' button.
  • •Add example.com (not www.example.com, https://www.example.com, or https://example.com). Make sure there's no space after the text like example.com[space].

Make sure 'Connect to an environment' is set to 'production' and use the 'recommended' setting:

Vercel domain setup showing production environment and recommended settings

Step 2: Configure DNS Records

Vercel will show you two DNS Records that you need to add in your Advanced DNS settings on your domain provider (Namecheap, GoDaddy, etc.):

1. Type: CNAME (record)
Name/host: www
Value: cname.vercel-dns.com.
2. Type: A (record)
Name/host: @
Value: 76.76.21.21

Important: Note the '.' after '.com' (cname.vercel-dns.com.)

Here's what the DNS records look like in Vercel:

Vercel DNS records showing CNAME and A record values

Step 3: Add Records to Your Domain Provider

Go to your domain provider's Advanced DNS settings and add the records above. Here's an example from Namecheap:

Example: Namecheap Advanced DNS settings:

Namecheap Advanced DNS settings showing how to add CNAME and A records

Step 4: Wait for Propagation

⏳ Be Patient: DNS changes can take up to a few hours to reflect globally. Don't panic if it doesn't work immediately!

Once successful, you'll see this in your Vercel dashboard:

Vercel dashboard showing successful domain connection

Common Issues & Solutions

App Works Locally But Not in Production

This usually happens because:

Missing Environment Variables: You forgot to add your .env variables to Vercel
Database Access: Your MongoDB or other database isn't allowing connections from Vercel's servers
API Keys: Some API keys might be restricted to specific domains

Build Errors

If your build fails:

1. Check the build logs in Vercel dashboard
2. Make sure your code builds locally with npm run build
3. Ensure all dependencies are listed in package.json
4. Check for TypeScript errors or missing imports

Deployment Best Practices

Before Every Deployment

✅ Test locally with npm run dev
✅ Check build with npm run build
✅ Commit and push to GitHub
✅ Verify environment variables are set

Monitoring Your App

📊 Check Vercel Analytics for performance
🔍 Monitor the Functions tab for API errors
📱 Test on different devices and browsers
🚨 Set up error tracking (like Sentry) for production

Security Considerations

🔐 Never expose API keys in your frontend code
🌐 Use HTTPS for all external API calls
🛡️ Set up proper CORS for your API routes
🔄 Regularly update dependencies