Skip to content

DEPLOYMENT.md

Latest commit

 

History

History
139 lines (98 loc) · 3.1 KB

DEPLOYMENT.md

File metadata and controls

139 lines (98 loc) · 3.1 KB

CollabCode — Deployment Guide

Architecture (Deployment-Ready)

Everything runs on 2 services:

  • Backend (Render) — Express API + Socket.IO + Yjs WebSocket — all on one port
  • Frontend (Vercel) — Static React build

Step 1: Push to GitHub

cd collabcode

# Initialize git (if not already)
git init
git add .
git commit -m "CollabCode - ready for deployment"

# Create repo on GitHub, then:
git remote add origin https://github.com/YOUR_USERNAME/collabcode.git
git branch -M main
git push -u origin main

Step 2: Deploy Backend on Render.com (Free)

  1. Go to render.com → Sign up / Log in
  2. Click "New +" → "Web Service"
  3. Connect your GitHub repo (collabcode)
  4. Configure:
Setting Value
Name collabcode-server
Root Directory server
Runtime Node
Build Command npm install
Start Command node index.js
  1. Add Environment Variables:
Key Value
NODE_ENV production
JWT_SECRET (any random long string)
GEMINI_API_KEY your_gemini_api_key_here
FRONTEND_URL (add after Vercel deploy)
  1. Click "Create Web Service"
  2. Wait for deploy → Note your URL (e.g., https://collabcode-server.onrender.com)

⚠️ Important: Render free tier sleeps after 15min of inactivity. First request after sleep takes ~30s.

Step 3: Deploy Frontend on Vercel (Free)

  1. Go to vercel.com → Sign up / Log in
  2. Click "Import Project" → Select your GitHub repo
  3. Configure:
Setting Value
Root Directory client
Framework Vite
Build Command npm run build
Output Directory dist
  1. Add Environment Variable:
Key Value
VITE_BACKEND_URL https://collabcode-server.onrender.com

⚠️ Replace with YOUR actual Render URL from Step 2!

  1. Click "Deploy"
  2. Note your frontend URL (e.g., https://collabcode.vercel.app)

Step 4: Update Render Backend

Go back to Render → Your service → Environment → Add:

Key Value
FRONTEND_URL https://collabcode.vercel.app

Click "Save Changes" → Service will auto-redeploy.

Step 5: Add Vercel Rewrites (for SPA routing)

Create vercel.json in the client/ folder:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

This ensures routes like /editor/:roomId work on refresh.

How It Works After Deployment

  1. Open your Vercel URL → https://collabcode.vercel.app
  2. Enter username → Click "Create New Room"
  3. Click "Copy Invite Link"
  4. Send link to friend → They join the same room
  5. Collaborate in real-time! 🎉

Local Development

# Terminal 1 — Backend (port 3001)
cd server && npm run dev

# Terminal 2 — Frontend (port 5173)
cd client && npm run dev

Ports (Local)

Service Port Protocol
REST API 3001 HTTP
Socket.IO 3001 WebSocket
Yjs Sync 3001/yjs/ WebSocket
Frontend 5173 HTTP