data-cleaning-openenv / DEPLOY_CHECKLIST.md
01ammu's picture
Sync from GitHub via hub-sync
fee2f22 verified
|
Raw History Blame Contribute Delete
5.17 kB

πŸš€ Phase 4.2 - Production Deployment Checklist

Status: Ready for Production | Estimated Time: 5 minutes | Cost: $0 (NO CREDIT CARD NEEDED)


βœ… What's Already Done

  • Backend deployed to HuggingFace Spaces (https://01ammu-data-cleaning-openenv.hf.space)
  • Database: SQLite (included with HF Spaces)
  • API endpoints working
  • Frontend deployed ← You are here

🎯 Your Task: Deploy Frontend to Vercel (5 minutes)

Step 1: Go to Vercel

  1. Open https://vercel.com
  2. Click Sign Up
  3. Choose GitHub (simplest)
  4. Authorize Vercel to access your repos

Step 2: Import Your Project

  1. Click + New Project
  2. Search for: data-cleaning-openenv
  3. Click Import

Step 3: Configure Project

  1. Framework: Vite
  2. Root Directory: frontend
  3. Build Command: npm run build (auto-filled)
  4. Output Directory: dist (auto-filled)

Step 4: Add Environment Variable

  1. Scroll to Environment Variables
  2. Click + Add
  3. Name: VITE_API_BASE_URL
  4. Value: https://01ammu-data-cleaning-openenv.hf.space/api
  5. Click Add

Step 5: Deploy!

  1. Click Deploy
  2. Wait 1-2 minutes
  3. βœ… Done! Vercel shows your live URL

✨ Your Live URLs

Once deployed, you'll have:

Service URL
Frontend https://data-cleaning-openenv.vercel.app (or custom domain)
Backend https://01ammu-data-cleaning-openenv.hf.space
API Docs https://01ammu-data-cleaning-openenv.hf.space/docs

πŸ§ͺ Verify It Works

Test in Browser

  1. Open your Vercel URL
  2. Upload a CSV file
  3. Click "Start Cleaning"
  4. Wait for job to complete
  5. Download cleaned data

Test API

# Check backend is alive
curl https://01ammu-data-cleaning-openenv.hf.space/health

# Expected: {"status": "ok"}

⚠️ Important Notes

HF Spaces Sleep Behavior

  • Sleeps after: 48 hours without access
  • Wake-up time: ~30 seconds (auto-wakes on first request)
  • Why: Free tier pauses unused services
  • Solution: Just refresh the page, it'll wake up

No Credit Card Needed

  • βœ… HuggingFace Spaces: No credit card
  • βœ… Vercel: No credit card
  • βœ… SQLite Database: Included (no separate DB)
  • βœ… Total Cost: $0 forever

πŸ“ Update Your Portfolio

Once live, add to your resume:

Live Demo: https://data-cleaning-openenv.vercel.app
(Backend: HuggingFace Spaces, Frontend: Vercel)

πŸŽ“ What This Deployment Shows

✨ Full-Stack Skills:

  • React + TypeScript frontend (Vercel)
  • FastAPI backend (HF Spaces)
  • SQLite database
  • Production deployment experience

✨ Cloud Knowledge:

  • Multiple cloud platforms (Vercel + HF Spaces)
  • Environment variable management
  • CI/CD (Vercel auto-deploys on git push)
  • Free tier optimization (no credit card = resourcefulness)

Done! πŸš€

When all checkboxes above are complete:

  1. βœ… Frontend is live on Vercel
  2. βœ… Backend is live on HF Spaces
  3. βœ… File upload β†’ cleaning β†’ download works
  4. βœ… You have a production-grade portfolio project
  5. βœ… Zero cost, zero credit cards, 5 minutes setup

Next: Share your live link! This is portfolio gold πŸ’Ž


Deploying via Docker Compose & GHCR (alternative)

If you prefer running the full stack yourself (self-hosted or cloud VM), this repo includes Dockerfiles and compose manifests.

  1. Build & publish images (CI does this automatically to GHCR):

    • ghcr.io//data-cleaning-openenv-backend:latest
    • ghcr.io//data-cleaning-openenv-frontend:latest
  2. Use docker-compose.prod.yml to run services locally or on a host:

    • Copy .env.example to .env and set production secrets (DATABASE_URL, POSTGRES_PASSWORD, JWT_SECRET)
    • docker compose -f docker-compose.prod.yml pull
    • docker compose -f docker-compose.prod.yml up -d
  3. Verify health endpoints:

    • curl http://:8000/api/health
  4. Notes on secrets & TLS:

    • Use environment variables or a secrets manager (Vault, cloud secrets)
    • Terminate TLS at a reverse proxy (NGINX, cloud LB) and ensure JWT_SECRET is kept secret

Troubleshooting

"Vercel deployment failed"

  1. Check GitHub repo is public (Vercel needs access)
  2. Verify frontend directory exists
  3. Check package.json has correct build script
  4. View Vercel logs for details

"Frontend can't reach backend"

  1. Make sure VITE_API_BASE_URL is set to: https://01ammu-data-cleaning-openenv.hf.space/api
  2. Backend URL must end with /api (don't forget!)
  3. Re-deploy frontend: Vercel dashboard β†’ Deployments β†’ Redeploy

"Backend is slow / timing out"

HF Spaces might be sleeping. Just refresh the page. It'll wake up in 30 seconds.


Cost Breakdown

Component Service Monthly Cost Credit Card
Frontend Vercel $0 No βœ“
Backend HF Spaces $0 No βœ“
Database SQLite $0 No βœ“
Total $0 No βœ“

Perfect for a student portfolio! πŸŽ“