101 lines
2.3 KiB
Markdown
101 lines
2.3 KiB
Markdown
# Phase 4 — Deploy to Vercel
|
|
|
|
Deploy the generated site live. Takes ~2 minutes from build to live URL.
|
|
|
|
## Prerequisites
|
|
|
|
```bash
|
|
# Check Vercel CLI is installed
|
|
vercel --version
|
|
|
|
# If not installed
|
|
npm i -g vercel@latest
|
|
|
|
# Check you're logged in
|
|
vercel whoami
|
|
```
|
|
|
|
## Step 1 — Local Build Verification
|
|
|
|
Before deploying, run a local build to catch errors:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
Fix any TypeScript or module errors. Common issues:
|
|
- Missing `'use client'` on components using `useState`/`useEffect`/`useRef`
|
|
- GSAP `ScrollTrigger` not registered (must be in a client component)
|
|
- `framer-motion` `useMotionValue` used in Server Component — extract to client component
|
|
|
|
## Step 2 — Link to Vercel Project
|
|
|
|
```bash
|
|
vercel link
|
|
```
|
|
|
|
If this is a new project, answer the prompts:
|
|
- Scope: your team/personal account
|
|
- Project name: `<brand.name>-site` (lowercase, hyphenated)
|
|
- Root directory: `.` (current directory)
|
|
|
|
## Step 3 — Deploy Preview
|
|
|
|
```bash
|
|
vercel
|
|
```
|
|
|
|
This deploys to a preview URL like `https://<project>-<hash>.vercel.app`.
|
|
|
|
Open the preview URL and verify:
|
|
- Hero animation plays on load
|
|
- Scroll triggers fire on scroll
|
|
- All sections render
|
|
- Mobile layout works (use browser dev tools at 390px)
|
|
- No console errors
|
|
|
|
## Step 4 — Deploy Production
|
|
|
|
```bash
|
|
vercel --prod
|
|
```
|
|
|
|
This promotes the preview to `https://<project>.vercel.app` (or custom domain if configured).
|
|
|
|
## Step 5 — Output Live URL
|
|
|
|
After deployment completes, present the user with:
|
|
```
|
|
Your site is live!
|
|
|
|
Preview: https://<project>-<hash>.vercel.app
|
|
Production: https://<project>.vercel.app
|
|
|
|
Built from: <source-url>
|
|
```
|
|
|
|
## Optional: Custom Domain
|
|
|
|
```bash
|
|
vercel domains add <yourdomain.com>
|
|
vercel alias set <deployment-url> <yourdomain.com>
|
|
```
|
|
|
|
## Optional: Environment Variables
|
|
|
|
If the site uses AI features (AI Gateway, Firecrawl API key in server actions):
|
|
```bash
|
|
vercel env add FIRECRAWL_API_KEY
|
|
vercel env pull .env.local # pull all env vars locally
|
|
```
|
|
|
|
## Deployment Checklist
|
|
|
|
- [ ] `npm run build` succeeds with zero errors
|
|
- [ ] `vercel` preview URL loads correctly
|
|
- [ ] Hero animation plays on preview URL
|
|
- [ ] Scroll animations work on preview URL
|
|
- [ ] Mobile layout verified at 390px width
|
|
- [ ] No console errors in browser devtools
|
|
- [ ] `vercel --prod` promoted to production
|
|
- [ ] Production URL shared with user
|