Bagian 6: Deploy Aplikasi Todo ke Internet

Halo para developer! 👋

Setelah kita membangun aplikasi todo lengkap dari frontend hingga backend, saatnya kita online-kan agar bisa diakses siapa saja. Yuk kita deploy ke internet 🚀

📦 1. Struktur Project

Pastikan struktur project kamu seperti ini:

/todo-app
│
├── client          ← React frontend
├── models
├── routes
├── .env
├── index.js        ← Entry point Express
├── package.json
  

Frontend dan backend dalam satu folder ya, tapi kita akan deploy secara terpisah.

🌐 2. Deploy Backend ke Render

1. Buat akun dan login ke Render.com
2. Pilih menu New → Web Service
3. Hubungkan ke GitHub dan pilih repo backend-mu
4. Isi konfigurasi:

• Name: todo-backend
• Build Command: npm install
• Start Command: node index.js
• Environment: Node

Lalu tambahkan Environment Variables:

• MONGO_URI: (link MongoDB Atlas)
• JWT_SECRET: rahasia kamu
• PORT: 10000 atau biarkan kosong

Render akan otomatis build dan deploy. Kamu akan mendapatkan URL misalnya https://todo-api.onrender.com

🌍 3. Deploy Frontend ke Netlify

1. Buat akun dan login ke Netlify
2. Klik “Add new site” → “Import from Git”
3. Pilih repo React frontend kamu (folder client)

Isi pengaturan:

• Build command: npm run build
• Publish directory: build

Set environment variable agar React tahu URL backend-nya:

• REACT_APP_API_BASE: URL dari backend Render kamu

Di kode React, kamu ambil URL backend seperti ini:

const API = axios.create({
  baseURL: process.env.REACT_APP_API_BASE,
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }
});
  

🛠 Tips Tambahan

• Pastikan semua request dari React ke backend pakai HTTPS (Render dan Netlify sudah HTTPS)
• Kalau butuh CORS di backend, install dan gunakan:

npm install cors

const cors = require('cors');
app.use(cors());
  

✅ Selesai!

Selamat! 🎉 Kamu sudah berhasil deploy aplikasi todo ke internet. Sekarang kamu bisa share link-nya ke teman atau portofolio.

Apa selanjutnya?

• Tambahkan fitur logout dan proteksi route
• Gunakan refresh token untuk sesi panjang
• Implementasikan UI/UX yang lebih keren

Sekian seri membangun aplikasi to-do fullstack dari ruanginformatika.com. Semoga bermanfaat dan menginspirasi!

Ditulis oleh ruanginformatika.com