Course Home / Module 2: Vibe Coding

2.5: Go Live

20 min
Interactive: start 2-5

What is Deployment?

Deployment transfers your code from your computer to servers that are always online.

After deployment, anyone with the URL can access your app—24/7, from anywhere in the world.

What is Hosting?

Hosting means servers running your code continuously to handle visitor traffic.

When someone visits your URL:

  1. Their browser requests your site
  2. The hosting server responds with your app
  3. The page loads in their browser

Why Vercel?

Vercel is the recommended hosting platform for this course:

  • Free for personal projects
  • Built by the creators of Next.js (perfect compatibility)
  • Automatic deployments when you push to GitHub
  • Global CDN for fast loading worldwide

How Auto-Deployment Works

Once set up, your workflow becomes:

Push to GitHub → Vercel detects → Rebuilds automatically → Site updates

Changes go live within ~1 minute. No manual deployment needed after initial setup.

Setting Up Vercel

Step 1: Create a Vercel account

Sign up at vercel.com. Use “Continue with GitHub” for easiest setup.

Step 2: Install Vercel CLI

npm i -g vercel

Step 3: Authenticate

vercel login

Your browser opens for authentication. Complete the sign-in process.

Step 4: Deploy

In your project folder, tell Claude:

Deploy this project to Vercel

Or run manually:

vercel

Follow the prompts. Vercel will:

  1. Detect your project type
  2. Build your app
  3. Deploy to a .vercel.app URL

Your Live URL

After deployment, you’ll receive a URL like:

https://my-quiz-app.vercel.app

This is your live site! Share it with anyone.

Custom Domains

Want yourname.com instead of .vercel.app?

  1. Buy a domain from any registrar (Namecheap, Google Domains, etc.)
  2. In Vercel dashboard, go to your project → Settings → Domains
  3. Add your domain and follow DNS instructions

Updating Your Site

After initial deployment, updates are automatic:

  1. Make changes locally
  2. Push to GitHub: Save my changes to GitHub
  3. Vercel automatically rebuilds and deploys
  4. Site updates in ~1 minute

Troubleshooting

”vercel: command not found”

The Vercel CLI isn’t installed.

Fix:

npm i -g vercel

“Authentication failed”

Fix: Run vercel login and complete the browser authorization.

Build errors

Fix:

  1. Check the Vercel dashboard for error logs
  2. Share the error with Claude for debugging help

Old version still showing

Fix:

  • Wait ~1 minute for deployment to complete
  • Hard refresh: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
  • Check Vercel dashboard for deployment status

Works locally but not on Vercel

Fix:

  • Check Vercel build logs for differences
  • Environment variables may be missing in Vercel
  • Share logs with Claude for diagnosis

Post-Deployment Checklist

After going live:

  • Test on mobile devices
  • Test on different browsers
  • Share the URL with a friend
  • Bookmark your Vercel dashboard

Congratulations!

You’ve completed Module 2. You now know how to:

  1. Plan a project with clear requirements
  2. Build with Claude Code
  3. Iterate using screenshots and feedback
  4. Save to GitHub for version control
  5. Deploy to Vercel for a live URL

This workflow applies to any web project—landing pages, tools, dashboards, prototypes.

Ready to go live? Run start 2-5 to deploy your quiz app.