Skip to content

DEPLOYMENT_GUIDE.md

Latest commit

 

History

History
398 lines (291 loc) · 8.7 KB

DEPLOYMENT_GUIDE.md

File metadata and controls

398 lines (291 loc) · 8.7 KB
Raw

🚀 VeriFy - Deployment Guide

✅ Code Successfully Pushed to GitHub!

Repository: https://github.com/DevDebjit83/VeriFy-AI

📦 What's Included

Your repository contains:

  • ✅ Frontend (React + Vite + TypeScript)
  • ✅ Backend (FastAPI + Python with 5 detection models)
  • ✅ Chrome Extension (Manifest v3 with advanced features)
  • ✅ Complete Documentation (60+ MD files)
  • ✅ API Integration (Tavily, Gemini)
  • ✅ Multi-language Support (English, Hindi, Bengali)

🌐 Deployment Options

Option 1: Vercel (Frontend) + Render (Backend) - RECOMMENDED

A. Deploy Frontend to Vercel (Free tier available)

  1. Install Vercel CLI:

    npm install -g vercel

  2. Build your project:

    npm run build

  3. Deploy to Vercel:

    vercel --prod
    • Follow prompts
    • Choose public as output directory
    • Auto-detects Vite configuration

  4. Or use Vercel Dashboard:

    • Go to vercel.com
    • Click "New Project"
    • Import from GitHub: DevDebjit83/VeriFy-AI
    • Auto-deploys on every push to main

B. Deploy Backend to Render (Free tier available)

  1. Go to render.com

  2. Create New Web Service:

    • Connect GitHub repository
    • Select DevDebjit83/VeriFy-AI
    • Root Directory: backend
    • Build Command: pip install -r requirements_ai.txt
    • Start Command: uvicorn ai_server_sota:app --host 0.0.0.0 --port $PORT

  3. Add Environment Variables:

    TAVILY_API_KEY=your_tavily_key
GEMINI_API_KEY=your_gemini_key
HUGGINGFACE_TOKEN=your_huggingface_token

  4. Deploy - Render will build and start your backend

  5. Update Frontend API URL:

    • Edit src/config/api.ts
    • Change API_BASE_URL to your Render URL

Option 2: Railway (Full Stack)

  1. Go to railway.app

  2. Deploy from GitHub:

    • Click "New Project"
    • Select "Deploy from GitHub repo"
    • Choose DevDebjit83/VeriFy-AI

  3. Add Services:

    • Frontend Service:
      • Root: /
      • Build: npm install && npm run build
      • Start: npm run preview
    • Backend Service:
      • Root: /backend
      • Build: pip install -r requirements_ai.txt
      • Start: uvicorn ai_server_sota:app --host 0.0.0.0 --port $PORT

  4. Environment Variables: Add API keys to backend service

Option 3: Netlify (Frontend) + Heroku (Backend)

A. Deploy Frontend to Netlify

  1. Go to netlify.com

  2. New Site from Git:

    • Connect to GitHub
    • Select DevDebjit83/VeriFy-AI
    • Build Command: npm run build
    • Publish Directory: dist

  3. Auto-deploys on every push

B. Deploy Backend to Heroku

  1. Install Heroku CLI:

    winget install Heroku.HerokuCLI

  2. Login:

    heroku login

  3. Create Heroku App:

    cd backend
heroku create verify-backend

  4. Add Python Buildpack:

    heroku buildpacks:add heroku/python

  5. Set Environment Variables:

    heroku config:set TAVILY_API_KEY=your_key
heroku config:set GEMINI_API_KEY=your_key
heroku config:set HUGGINGFACE_TOKEN=your_token

  6. Deploy:

    git push heroku main

Option 4: Docker Deployment (Any Platform)

Your project includes docker-compose.yml:

# Build and run
docker-compose up -d

# Frontend: http://localhost:3000
# Backend: http://localhost:8000

Deploy to:

  • AWS ECS/EKS
  • Google Cloud Run
  • Azure Container Instances
  • DigitalOcean App Platform

🔧 Pre-Deployment Checklist

1. Environment Variables Setup

Create .env files (not tracked by git):

Root .env:

VITE_API_URL=https://your-backend-url.com

Backend .env:

TAVILY_API_KEY=your_tavily_api_key
GEMINI_API_KEY=your_gemini_api_key
HUGGINGFACE_TOKEN=your_huggingface_token
PORT=8000

2. Update API Configuration

Edit src/config/api.ts:

export const API_BASE_URL = import.meta.env.VITE_API_URL || 'https://your-backend-url.com';

3. Build Production Version

# Frontend
npm run build

# Backend (test locally)
cd backend
pip install -r requirements_ai.txt
uvicorn ai_server_sota:app --host 0.0.0.0 --port 8000

4. Test Production Build Locally

# Serve production build
npm run preview

# Visit http://localhost:4173

🌍 Chrome Extension Distribution

Option 1: Chrome Web Store (Recommended for public release)

  1. Package Extension:

    npm run package-extension

    Creates public/verify-extension.zip

  2. Create Developer Account:

  3. Upload Extension:

    • Click "New Item"
    • Upload verify-extension.zip
    • Fill in store listing details
    • Submit for review (2-3 days)

  4. Users Install with One Click from Chrome Web Store

Option 2: Private Distribution (Current setup)

Users download ZIP from your website:

  • Works immediately
  • No review process
  • Perfect for internal use
  • Manual installation required

📊 Performance Optimization

Frontend Optimizations:

  1. Code Splitting: Already configured in Vite
  2. Lazy Loading: Components load on-demand
  3. Image Optimization: Use WebP format
  4. CDN: Vercel/Netlify provide global CDN

Backend Optimizations:

  1. Model Caching: Models load once on startup
  2. API Rate Limiting: Implement for production
  3. Database: Add PostgreSQL for user data
  4. Redis: Cache frequent requests

🔒 Security Best Practices

Before Going Live:

  1. ✅ Never commit .env files (already in .gitignore)
  2. ✅ Rotate API keys after deployment
  3. ✅ Enable CORS only for your frontend domain
  4. ✅ Use HTTPS (auto with Vercel/Netlify/Render)
  5. ✅ Rate limiting on API endpoints
  6. ✅ Input validation on all endpoints

Update CORS in Backend:

Edit backend/ai_server_sota.py:

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://your-frontend-url.com"],  # Update this
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

📈 Monitoring & Analytics

Add to Your Deployment:

  1. Frontend Analytics:

    • Google Analytics
    • Vercel Analytics (built-in)
    • Plausible Analytics (privacy-friendly)

  2. Backend Monitoring:

    • Sentry (error tracking)
    • Datadog (performance monitoring)
    • LogRocket (session replay)

  3. Uptime Monitoring:

    • UptimeRobot (free)
    • Pingdom
    • StatusCake

🚀 Quick Deploy Commands

Deploy Frontend to Vercel:

npm run build
vercel --prod

Deploy Backend to Render (via Dashboard):

  1. Connect GitHub
  2. Auto-detects Python
  3. Add environment variables
  4. Deploy

Update Production:

# Commit changes
git add .
git commit -m "Update: description"
git push origin main

# Auto-deploys to Vercel/Netlify/Render

🎉 Post-Deployment

After deploying:

  1. ✅ Test all features in production
  2. ✅ Monitor logs for errors
  3. ✅ Set up domain (optional)
  4. ✅ Enable SSL (auto with most platforms)
  5. ✅ Submit to Chrome Web Store (optional)
  6. ✅ Share with users! 🎊

💡 Recommended Setup (Free Tier)

Best for beginners:

  • Frontend: Vercel (free, unlimited bandwidth)
  • Backend: Render (free, 750 hours/month)
  • Total Cost: $0/month
  • Performance: Excellent
  • Auto-deploy: On every push

📞 Support

Need help deploying?

✅ Deployment Checklist

  • Code pushed to GitHub
  • API keys stored securely
  • Frontend built successfully (npm run build)
  • Backend tested locally
  • CORS configured for production domain
  • Environment variables set on hosting platform
  • Frontend deployed (Vercel/Netlify)
  • Backend deployed (Render/Railway/Heroku)
  • API URL updated in frontend
  • All features tested in production
  • Domain configured (optional)
  • SSL enabled
  • Chrome extension packaged
  • Monitoring set up
  • 🎉 LIVE AND READY!

Your production-ready VeriFy application is now ready to deploy! 🚀

Choose your deployment platform above and follow the steps. Most platforms offer one-click deployment from GitHub!