Module 4: Building Your First AppLesson 5 of 6

Lesson 5·5 min

Deploying Your App

Put your app live on the internet

Deploying Your App

You've built and tested your app. Time to share it with the world!

Deployment Options

Platform	Best For	Pricing
Vercel	Next.js, React	Free tier
Netlify	Static sites	Free tier
Railway	Full-stack apps	Free tier
GitHub Pages	Simple HTML	Free

Tip

For most projects, Vercel is the easiest choice. It's free and deploys in seconds.

Deploying to Vercel

Step 1: Push to GitHub

Terminal

# Make sure everything is committed

$ git add .

$ git commit -m "Ready for deployment"

# Create GitHub repo and push

$ gh repo create aussie-coffee-finder --public

$ git push -u origin main

▌

Step 2: Connect to Vercel

Terminal

# Install Vercel CLI

$ npm install -g vercel

# Deploy!

$ vercel

Vercel CLI 32.x.x

? Set up and deploy "aussie-coffee-finder"? [Y/n] y

? Which scope? My Account

? Link to existing project? [y/N] n

? What's your project's name? aussie-coffee-finder

? In which directory is your code located? ./

🔗 Linked to john/aussie-coffee-finder

🔍 Inspect: https://vercel.com/john/aussie-coffee-finder

✅ Production: https://aussie-coffee-finder.vercel.app

▌

Your app is now live! 🎉

Aussie Note

Vercel's free tier is perfect for side projects. You get HTTPS, a .vercel.app domain, and automatic deploys when you push to GitHub. 🚀

Deploying to Netlify

Terminal

# Install Netlify CLI

$ npm install -g netlify-cli

# Build your site

$ npm run build

# Deploy

$ netlify deploy --prod --dir=dist

✅ Deploy is live!

https://aussie-coffee-finder.netlify.app

▌

Environment Variables

Warning

Never commit API keys or secrets! Use environment variables.

Terminal

# Local development: create .env.local

$ cat .env.local

NEXT_PUBLIC_API_URL=http://localhost:3000

DATABASE_URL=postgres://...

# On Vercel: add via dashboard or CLI

$ vercel env add DATABASE_URL

▌

Custom Domain

Terminal

# Add your own domain

$ vercel domains add coffeefinder.com.au

# Or in Vercel dashboard:

# Settings → Domains → Add

▌

Having Claude Help Deploy

Terminal

> Help me deploy this Next.js app to Vercel

Claude: I'll guide you through deployment:

1. First, let's add a vercel.json for configuration...

2. Make sure package.json has a build script...

3. Let's check for environment variables...

[Creates deployment configuration]

▌

Post-Deployment Checklist

Check	Status
Site loads at URL	☐
All pages work	☐
Environment vars set	☐
HTTPS working	☐
Mobile responsive	☐
No console errors	☐
Analytics added (optional)	☐

Automatic Deploys

Once connected, every push to main deploys automatically:

Terminal

$ git add .

$ git commit -m "Add new feature"

$ git push

# Vercel sees the push

# Builds automatically

# Deploys to production

▌

Key Takeaways

Vercel and Netlify offer free hosting
Deploy from CLI or connect to GitHub
Use environment variables for secrets
Every push can auto-deploy
Test the live site after deploy

Testing Your Code

Module 4 Quiz