Phase 7: Shipping · 25 min · Vercel · Netlify · GitHub
Deployment Platforms Basics
Your app on localhost is a prototype. Your app on the internet is a product.
Hiring signal: What changes when you use this: you can deploy your app to the internet — which means you can share it with real users.
What you will learn
- Understand what deployment platforms do (build, host, CDN)
- Compare Vercel vs. Netlify for vibe-coded apps
- Connect a GitHub repo for automatic deployments
- Understand the deploy process: push → build → live URL
- Distinguish preview deployments from production deployments
Your Mission
Deploy your app to a live URL on Vercel or Netlify and test the full user flow on the deployed site. Output: deployment_notes.md.
You need: A working app pushed to GitHub. Vercel or Netlify account (free).
Time: 25 minutes.
Step 1: Learn What Deployment Platforms Do (3 min)
Three things:
- Build: Take your source code → compile TypeScript, bundle JS, optimize images
- Host: Serve files from fast servers connected to the internet
- CDN: Distribute globally — users in Tokyo load from Tokyo, users in NY from NY
Vercel vs. Netlify: Both work great. Vercel is natural for Next.js (they built it). For React+Vite, both are equal. Both have free tiers, automatic deploys from GitHub, preview deployments, and free SSL.
The environment variable trap
The #1 deployment failure: the app works locally but breaks on the platform because environment variables aren't set. Locally, the app reads .env. On the platform, there's no .env — you have to add each variable in the dashboard. Before deploying, make a list of every variable in your .env file and add them all to the platform.
Unlock the full lesson
You've read the first 2 sections. The rest of this lesson covers Step 2: Push to GitHub (2 min), GitHub, Step 3: Connect to Vercel or Netlify (5 min), Platform Connected, Step 4: Add Environment Variables (3 min), Environment Variables, Step 5: Deploy (2 min), Deployment, Step 6: Test the Full User Flow on the Live Site (5 min), Live Site Test, Step 7: Test Automatic Redeploy (5 min), Auto-Redeploy Test, You're Done — plus a hands-on lab, quiz, and project artifact.
Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.
Browse all courses · View pricing · DeVenture Academy