Deploy Aplikasi Todo ke Hosting

Selamat! 🎉 Kamu sudah sampai di bagian terakhir dari seri membangun aplikasi todo dengan React + Node.js. Kali ini kita akan membahas langkah-langkah mendeploy aplikasi agar bisa diakses publik melalui internet.

🧱 Struktur Project

/todo-app
│
├── client   ← React App
├── server   ← Express + MongoDB
  

Kita akan deploy keduanya:

• Frontend ke Vercel / Netlify
• Backend ke Render / Railway

🚀 Deploy Backend (Express) ke Render

1️⃣ Buat Akun di Render.com

1. Login dengan GitHub
2. Push folder /server ke GitHub repo
3. Di Render, klik “New Web Service” → pilih repo backend
4. Isi pengaturan:
   • Environment: Node
   • Build Command: npm install
   • Start Command: node index.js
5. Tambahkan ENV:
   • MONGO_URI
   • JWT_SECRET
   • REFRESH_SECRET

Jika berhasil, Render akan memberi kamu URL seperti:
https://todo-api.onrender.com

🌐 Deploy Frontend (React) ke Vercel

1️⃣ Push folder /client ke GitHub

2️⃣ Deploy ke Vercel

1. Buka Vercel.com dan login
2. Pilih “New Project” → pilih repo React kamu
3. Set Environment Variable:
   VITE_API_BASE=https://todo-api.onrender.com/api
4. Click “Deploy” dan tunggu hingga live!

Vercel akan memberikan domain seperti:
https://todo-ruanginformatika.vercel.app

🔒 CORS dan Cookie

Pastikan backend kamu mengizinkan origin dari frontend dan mengizinkan kredensial (cookie):

// index.js
const cors = require('cors');
app.use(cors({
  origin: 'https://todo-ruanginformatika.vercel.app',
  credentials: true
}));
  

📦 Tips Tambahan

• Gunakan HTTPS di kedua sisi
• Gunakan .env.production di React untuk produksi
• Optimalkan gambar user saat upload
• Aktifkan minify & cache di Vercel/Netlify

🎉 Penutup

Dengan artikel ini, seluruh aplikasi Todo kamu sudah lengkap, profesional, dan siap digunakan banyak orang!

🎁 Total Fitur yang Telah Kita Buat:

• ✅ Autentikasi Login + Register
• ✅ Proteksi route private
• ✅ Refresh token (sesi panjang)
• ✅ Upload foto profil
• ✅ Halaman profil
• ✅ Mode gelap
• ✅ Live di internet

Kamu bisa terus kembangkan fitur-fitur baru seperti notifikasi, dashboard, atau versi mobile. Atau, mulai proyek baru dari ide lain.

Sampai ketemu di seri coding lainnya di ruanginformatika.com 🚀

Ditulis oleh ruanginformatika.com