Skip to content

RENDER_DEPLOYMENT_VISUAL_GUIDE.md

Latest commit

 

History

History
360 lines (284 loc) · 8.7 KB

RENDER_DEPLOYMENT_VISUAL_GUIDE.md

File metadata and controls

360 lines (284 loc) · 8.7 KB
Raw

🎯 Render.com Deployment - Quick Visual Guide

📍 Your Current Status

Your Repository: https://github.com/HacktopiaTnp/hackto.git

✅ Created Files for Render:
   - render.yaml (Infrastructure as Code)
   - RENDER_DEPLOYMENT_GUIDE.md (Full guide)
   - RENDER_QUICK_START.md (5-minute quick start)
   
✅ Pushed to GitHub (ready to deploy)

🚀 Deployment in 2 Ways

Way 1: Manual Setup (20-30 minutes) - Easiest for First Time

1. Create PostgreSQL Database (on Render)
2. Create Redis Cache (on Render)  
3. Deploy Backend (from GitHub)
4. Deploy Frontend (from GitHub)
5. Add Environment Variables
✅ Done!

Way 2: Infrastructure as Code (5-10 minutes) - Fastest

1. Upload render.yaml to GitHub ✅ (Already done!)
2. Click "Blueprint" on Render dashboard
3. Connect GitHub repo
4. Let Render create everything automatically
5. Add secrets manually
✅ Done!

📋 Right Now: What You Need to Do

STEP 1: Go to Render Dashboard

👉 https://dashboard.render.com

What you'll see:

  • Empty dashboard (if new account)
  • "+ New" button (top right)

STEP 2: Read the Right Guide for You

Choose based on your preference:

👤 "I want the simplest way" → Read: RENDER_QUICK_START.md ⭐

Time: 5 minutes
Complexity: Very simple
Steps: 6 numbered steps
Contains: Copy-paste commands

📖 "I want detailed information" → Read: RENDER_DEPLOYMENT_GUIDE.md

Time: 10 minutes to read
Complexity: Detailed but clear
Contains: Full explanations, troubleshooting
Reference: All possible configurations

🤖 "I prefer Infrastructure as Code" → Use: render.yaml

Already in your repo!
Automatic deployment
Minimal manual setup
Just 3 steps to deploy all services

⚡ Super Quick Reference

What Render Will Do For You

✅ Automatic SSL/TLS (HTTPS)
✅ Auto-deploy on GitHub push
✅ Manage databases
✅ Health checks
✅ Scaling
✅ Monitoring
✅ Backups (paid)

What You Need to Provide

✅ GitHub repository (you have: https://github.com/HacktopiaTnp/hackto.git)
✅ Environment variables (list below)
✅ API keys (if using Cloudinary, Judge0)

Environment Variables You Need

Minimum (Required):

NODE_ENV = production
PORT = 3001
DATABASE_URL = (Render provides this)
REDIS_URL = (Render provides this)
JWT_SECRET = (You create: random 32+ chars)
VITE_API_BASE_URL = (Render provides: your backend URL)

Optional (if using these features):

CLOUDINARY_NAME = (Your Cloudinary account)
CLOUDINARY_API_KEY = (Your Cloudinary key)
CLOUDINARY_API_SECRET = (Your Cloudinary secret)
JUDGE0_API_KEY = (Your Judge0 API key from RapidAPI)

🎯 Deployment Flow Chart

┌─────────────────────────────────────────────────┐
│         Start: https://dashboard.render.com    │
└──────────────────┬──────────────────────────────┘
                   │
        ┌──────────┴──────────┐
        │                     │
        ▼                     ▼
    Manual Setup         Infrastructure as Code
  (RENDER_QUICK_        (render.yaml)
    START.md)
        │                     │
        ▼                     ▼
  ┌─────────────┐        ┌──────────────┐
  │ 1. Postgres │        │ 1. Blueprint │
  │ 2. Redis    │        │ 2. Import    │
  │ 3. Backend  │        │ 3. Deploy    │
  │ 4. Frontend │        └──────────────┘
  │ 5. Env Vars │
  └─────────────┘
        │
        └──────────┬──────────┘
                   │
                   ▼
        ┌──────────────────────┐
        │  Services Running!   │
        │                      │
        │ Backend:  3001       │
        │ Frontend: 80 (SSL)   │
        │ Postgres: internal   │
        │ Redis:    internal   │
        └──────────────────────┘
                   │
                   ▼
        ┌──────────────────────┐
        │   Visit Your App:    │
        │                      │
        │ https://hackto-      │
        │ frontend.            │
        │ onrender.com         │
        └──────────────────────┘

✅ Deployment Checklist

Copy this and check off as you go:

PRE-DEPLOYMENT
- [ ] Render.com account created
- [ ] GitHub account ready
- [ ] Repository: https://github.com/HacktopiaTnp/hackto.git (accessible)

DEPLOYMENT (Choose one method)

METHOD 1 - Manual (RENDER_QUICK_START.md):
- [ ] Created PostgreSQL database
- [ ] Created Redis cache
- [ ] Deployed backend service
- [ ] Deployed frontend service
- [ ] Set environment variables

METHOD 2 - IaC (render.yaml):
- [ ] Clicked "Blueprint" in Render
- [ ] Connected GitHub repo
- [ ] Reviewed render.yaml services
- [ ] Clicked "Deploy"
- [ ] Manually added secrets

POST-DEPLOYMENT
- [ ] Backend health check passes (https://..../health)
- [ ] Frontend loads in browser (https://.../)
- [ ] Frontend communicates with backend (check browser network tab)
- [ ] Auto-deploy enabled (next push to GitHub triggers deploy)

📱 Your Services After Deployment

Backend Service

Name: hackto-backend
Runtime: Node.js 18
URL: https://hackto-backend.onrender.com
Status: Running 24/7 (on paid plans) or sleep after 15min (free)
Port: 3001 (internal)

Frontend Service

Name: hackto-frontend
Runtime: Docker (Nginx)
URL: https://hackto-frontend.onrender.com
Status: Running 24/7 (on paid plans) or sleep after 15min (free)
Port: 80 (internal), 443 (SSL)

Database

Type: PostgreSQL 15
Managed by: Render
Access: Internal only (via DATABASE_URL)
Backups: Auto daily (paid plans)

Cache

Type: Redis 7
Managed by: Render
Access: Internal only (via REDIS_URL)

💾 Files Provided in Your Repo

📁 Your GitHub Repo (already pushed)
├── 📄 RENDER_QUICK_START.md ⭐ START HERE
├── 📄 RENDER_DEPLOYMENT_GUIDE.md (Full reference)
├── 📄 render.yaml (Infrastructure as Code)
├── 📄 QUICK_DEPLOYMENT_CHECKLIST.md (Previous Docker guide)
├── 🐳 docker-compose.yml (Local development)
├── 🐳 docker-compose.prod.yml (Optional advanced)
├── 🐳 backend/Dockerfile (Auto-detected by Render)
├── 🐳 frontend/Dockerfile (Auto-detected by Render)
└── ⚙️ [rest of your code]

🎯 Recommended Workflow

First Time (This Week)

1. Read: RENDER_QUICK_START.md (5 min)
2. Follow: Step 1-6 in that guide (25 min)
3. Test: Your app on https://hackto-frontend.onrender.com
4. Celebrate: 🎉 App is deployed!

Ongoing (After Deployment)

1. Make code changes locally
2. Test locally: docker-compose up -d
3. Push to GitHub: git push origin main
4. Render auto-deploys: Just wait 2-3 minutes
5. Verify: Check your live app

If Problems Occur

1. Check: RENDER_DEPLOYMENT_GUIDE.md → Troubleshooting section
2. View Logs: Go to service → Logs tab
3. Debug: Fix locally, push again

🆘 Need Help?

Quick Questions?

Stuck on a Step?

  1. Find the section in RENDER_DEPLOYMENT_GUIDE.md
  2. Check "Troubleshooting" section
  3. Read the error message in Render logs

Want to See Examples?

💰 Pricing Reminder

Item Free Cost
Web Service Yes (sleeps) $0-7/mo
PostgreSQL Limited $7/mo+
Redis Limited $3.75/mo+
Total Yes $10.75/mo+

Start free, upgrade if needed!

🚀 Ready to Deploy?

Next Action:

👉 Go to: https://dashboard.render.com
👉 Read: RENDER_QUICK_START.md
👉 Follow: 6 simple steps
👉 Done!

📊 Timeline

Now                        1-2 hours later
│                          │
│                          ▼
├─ Read guide (5 min)      Your app is LIVE! 🎉
├─ Create services (10 min)
├─ Deploy backend (10 min)
├─ Deploy frontend (10 min)
├─ Test (5 min)
│
└─ Total: 40 minutes

Good luck with your deployment! 🚀

Questions? Check the detailed guides or visit Render's documentation.