Module 4: Building Your First AppLesson 5 of 6
0%
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

PlatformBest ForPricing
VercelNext.js, ReactFree tier
NetlifyStatic sitesFree tier
RailwayFull-stack appsFree tier
GitHub PagesSimple HTMLFree

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

CheckStatus
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