Objective
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.
Step 2: push to GitHub (2 min)
git add .
git commit -m "Ready to deploy"
git push origin main
Write in your file:
## GitHub
Repo URL: [your repo URL]
Main branch pushed: [yes/no]
Step 3: connect to vercel or netlify (5 min)
- Go to vercel.com or netlify.com
- Sign up (free)
- Click "Import Project" or "Add new site"
- Connect your GitHub account
- Select your repository
Build settings are auto-detected for most frameworks. For Vite: build command npm run build, output directory dist.
Write in your file:
## Platform Connected
Platform: [Vercel/Netlify]
Build command: [auto-detected or manual]
Output directory: [auto-detected or manual]
Step 4: add environment variables (3 min)
Critical step. Go to Settings → Environment Variables and add every variable from your .env file:
VITE_SUPABASE_URL = [your URL]VITE_SUPABASE_ANON_KEY = [your key]- [any other variables]
Write in your file:
## Environment Variables
Variables added to platform: [list all]
All .env variables accounted for: [yes/no]
Step 5: deploy (2 min)
Click "Deploy." The platform:
- Clones your repo
- Runs
npm install - Runs
npm run build - Serves the output on a live URL
Write in your file:
## Deployment
Live URL: [your-app.vercel.app or similar]
Build succeeded: [yes/no]
Step 6: test the full user flow on the live site (5 min)
Visit the live URL and test the complete flow as a new user:
- Signup
- Login
- Data CRUD (create, read, update, delete)
- Logout
Write in your file:
## Live Site Test
1. Signup: [success/fail]
2. Login: [success/fail]
3. Data CRUD: [success/fail]
4. Logout: [success/fail]
Any issues found: [list or "none"]
Step 7: test automatic redeploy (5 min)
Make a small change (e.g., update the page title). Commit and push:
git add .
git commit -m "Test auto-deploy"
git push origin main
Watch the platform automatically rebuild and update the live site (1-2 minutes).
Write in your file:
## Auto-Redeploy Test
Change made: [what you changed]
Pushed to GitHub: [yes/no]
Live site updated automatically: [yes/no]
Time to update: [approximate]
Your app works locally but the deployed version can't reach the database. What's the most likely cause?
There's no .env on the platform; each variable must be added in its dashboard. It's the number-one deployment failure.