✅ Lesson 7.2: Using Render, Vercel, or Fly.io for UI Hosting
🎯 Learning Objectives:
By the end of this lesson, learners will:
-
Understand the differences between Render, Vercel, and Fly.io.
-
Deploy a frontend UI (React, HTML/JS, etc.) to a free hosting platform.
-
Connect the hosted frontend to a backend API.
-
Configure environment variables and custom domains (if applicable).
🧠 Key Concepts:
-
Static vs dynamic hosting
-
CI/CD workflow basics (Git integration)
-
Hosting limits and pricing (free tiers)
-
Deploying from GitHub repos
-
Securely storing environment variables
🌐 Platforms Overview:
| Platform | Best For | Free Tier | Custom Domain | Env Vars |
|---|---|---|---|---|
| Render | Full-stack, backend hosting | ✅ Yes | ✅ Yes | ✅ Yes |
| Vercel | Static frontend (Next.js/React) | ✅ Yes | ✅ Yes | ✅ Yes |
| Fly.io | Global Docker container hosting | ✅ Yes | ✅ Yes | ✅ Yes |
🚀 Hands-On: Deploying Your UI
Option A: Using Vercel (React/Next.js)
-
Push your frontend project to GitHub.
-
Go to vercel.com → Sign up with GitHub.
-
Import your repo and select the correct framework (e.g., React).
-
Set environment variables (e.g.,
VITE_API_URL=https://your-backend.com). -
Click Deploy. Done!
Option B: Using Render (HTML/JS frontend or Dockerized full app)
-
Sign up at render.com.
-
Choose Static Site or Web Service (Docker).
-
Link GitHub, set build & start commands.
-
Set environment variables if needed.
-
Deploy & test.
Option C: Using Fly.io
-
Install Fly CLI:
flyctl auth login -
Init app:
flyctl launch -
Deploy Docker image:
flyctl deploy -
Check deployment with
flyctl open
✅ Best Practices:
-
Use
.env.productionfiles for Vercel or environment tabs in Render/Fly.io -
Add a health check endpoint to your backend
-
Make sure your API is CORS-enabled to allow browser access
📁 Downloads:
-
Example React frontend template
-
Sample Fly.io
fly.tomlfile -
Render + Vercel deployment cheat sheet (PDF)
56