Skip to content

DEPLOYMENT_STEPS.md

Latest commit

 

History

History
166 lines (134 loc) · 3.27 KB

DEPLOYMENT_STEPS.md

File metadata and controls

166 lines (134 loc) · 3.27 KB

🚀 Complete Deployment Guide

📊 Your Database Configuration:

Host: sql12.freesqldatabase.com
Database: sql12791893
User: sql12791893
Password: 3ALYm8PAgb
Port: 3306

🔧 Step 1: Deploy Backend to Vercel

Option A: Using Vercel CLI

# Install Vercel CLI
npm i -g vercel

# Navigate to backend directory
cd backend

# Deploy to Vercel
vercel

# Follow the prompts:
# - Set up and deploy: Yes
# - Which scope: Select your account
# - Link to existing project: No
# - Project name: superbot-backend
# - Directory: ./
# - Override settings: No

Option B: Using Vercel Dashboard

  1. Go to vercel.com
  2. Create new project
  3. Upload the backend folder
  4. Set environment variables in dashboard: 
    DB_HOST=sql12.freesqldatabase.com
DB_USER=sql12791893
DB_PASSWORD=3ALYm8PAgb
DB_NAME=sql12791893
DB_PORT=3306
PORT=5001

🌐 Step 2: Get Your Backend URL

After deployment, you'll get a URL like:

https://superbot-backend-xxxxx.vercel.app

🔗 Step 3: Update Frontend Configuration

Update config.js:

const config = {
  development: {
    API_URL: 'http://localhost:5001/api'
  },
  production: {
    API_URL: 'https://your-actual-backend-url.vercel.app/api'
  }
};

Or set environment variable in Vercel:

VITE_API_URL=https://your-actual-backend-url.vercel.app/api

🧪 Step 4: Test Your Backend

Test Health Endpoint:

curl https://your-backend-url.vercel.app/api/health

Test Database Connection:

curl https://your-backend-url.vercel.app/api/tasks

Expected Response:

{
  "status": "ok",
  "message": "Server is running",
  "database": {
    "host": "sql12.freesqldatabase.com",
    "database": "sql12791893",
    "connected": true
  }
}

📱 Step 5: Deploy Frontend

Build and Deploy:

# Install terser
npm install terser --save-dev

# Build the project
npm run build

# Deploy to Vercel
vercel --prod

✅ Verification Checklist:

  • Backend deployed to Vercel
  • Database connection working
  • Health endpoint responding
  • Tasks API returning data
  • Frontend configuration updated
  • Frontend deployed with correct backend URL
  • No CORS errors in browser console

🔍 Troubleshooting:

If Backend Fails to Deploy:

  1. Check Vercel logs for errors
  2. Verify environment variables are set
  3. Ensure all dependencies are in package.json

If Database Connection Fails:

  1. Verify database credentials
  2. Check if database is accessible from Vercel
  3. Test connection locally first

If Frontend Can't Connect:

  1. Verify backend URL is correct
  2. Check CORS configuration
  3. Test backend endpoints directly

📞 Quick Commands:

Deploy Backend:

cd backend
vercel --prod

Deploy Frontend:

npm run build
vercel --prod

Test Backend:

curl https://your-backend-url.vercel.app/api/health
curl https://your-backend-url.vercel.app/api/tasks

🎯 Expected Result:

After deployment, your frontend should:

  • ✅ Load without MIME type errors
  • ✅ Connect to your backend successfully
  • ✅ Display tasks and finance data
  • ✅ Work on both localhost and hosted URL