Skip to content

Latest commit

 

History

History
136 lines (108 loc) · 4.12 KB

DEPLOYMENT_DUAL.md

File metadata and controls

136 lines (108 loc) · 4.12 KB

🚀 XMRT DAO Hub - Dual Deployment Architecture

📋 Overview

This project uses a dual deployment strategy to leverage the strengths of different hosting platforms:

  • 🌐 Vercel: Static Vite build for fast global CDN delivery
  • 🐍 Render: Full Python Flask application with real-time features

🏗️ Architecture

Vercel Deployment (Static)

  • Framework: Vite + Vanilla JavaScript
  • Features: Mobile-first responsive UI, functional navigation, static demos
  • Benefits: Fast loading, global CDN, excellent for showcasing design
  • URL: https://your-project.vercel.app

Render Deployment (Dynamic)

  • Framework: Python Flask + SocketIO
  • Features: Real-time chat, database integration, AI agents, GitHub MCP
  • Benefits: Full backend functionality, WebSockets, database persistence
  • URL: https://your-project.onrender.com

🎯 Use Cases

Use Vercel For:

  • 📱 Demonstrating mobile-first responsive design
  • ⚡ Fast static content delivery
  • 🎨 UI/UX showcasing
  • 📊 Static documentation and demos

Use Render For:

  • 🤖 Real-time AI agent interactions
  • 💾 Database operations and persistence
  • 🔗 GitHub MCP tool integration
  • 📡 WebSocket communication
  • 🔄 Live system monitoring

🚀 Deployment Commands

Vercel (Automatic)

# Vercel automatically detects Vite and builds on push to main
git push origin main

Render (Manual/Auto)

# Render detects Python and runs Flask app
# Configure Render to use: python enhanced_main_with_mcp.py

📂 File Structure

/
├── 📄 index.html              # Vite entry point (Vercel)
├── 🐍 enhanced_main_with_mcp.py  # Flask app entry (Render)
├── ⚙️ vite.config.js         # Vite build config
├── 📦 package.json           # Node.js dependencies (Vite)
├── 🐍 requirements.txt       # Python dependencies (Flask)
├── 🌐 vercel.json            # Vercel deployment config
├── 📁 src/                   # Vite JavaScript modules
├── 📁 dist/                  # Vite build output
├── 📁 templates/             # Flask Jinja2 templates
└── 📁 api/                   # Legacy API structure

🔧 Configuration Files

Vercel (vercel.json)

{
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}

Vite (vite.config.js)

export default defineConfig({
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: { main: './index.html' }
    }
  }
})

Flask (Python)

# Uses enhanced_main_with_mcp.py as entry point
# Includes Supabase integration, SocketIO, GitHub MCP

🎨 Features Comparison

Feature Vercel (Static) Render (Dynamic)
Mobile-First UI ✅ ✅
Functional Navigation ✅ ✅
Real-time Chat 📱 Demo ✅ Live
AI Agents 📋 Static Info 🤖 Interactive
GitHub MCP 📚 Documentation 🔗 Live Integration
Database ❌ ✅ Supabase
WebSockets ❌ ✅ SocketIO
System Monitoring ❌ ✅ Live Status

🌟 Best Practices

  1. Version Sync: Keep both deployments in sync with the same codebase
  2. Cross-linking: Link between deployments for full feature access
  3. SEO: Use Vercel for better SEO and static content
  4. Functionality: Direct users to Render for interactive features
  5. Monitoring: Monitor both deployments for optimal performance

🔄 Update Workflow

  1. Develop: Make changes to codebase
  2. Test Local: Test both Vite build and Flask app locally
  3. Commit: Push to GitHub main branch
  4. Auto Deploy: Both Vercel and Render deploy automatically
  5. Verify: Check both deployments work correctly

📞 Support

  • Static Issues: Check Vite build logs on Vercel
  • Dynamic Issues: Check Flask app logs on Render
  • Design Issues: Test responsive design on both platforms
  • Integration: Use Render deployment for full API access

This dual deployment architecture provides the best of both worlds: fast static delivery and full dynamic functionality.