Studi Kasus #24: Aplikasi Wisata Indonesia – Deployment Frontend ke Netlify/Vercel

Halo, calon full-stack developer!

Di Studi Kasus #23, kita telah berhasil mendeploy backend ke Render dan database ke Aiven. Sekarang saatnya mendeploy frontend React ke platform hosting gratis seperti Netlify atau Vercel. Dengan ini, aplikasi Wisata Indonesia akan benar-benar lengkap dan bisa diakses oleh publik.

Fitur yang akan dilakukan:

• Mempersiapkan environment variables untuk production (URL API backend).
• Menjalankan build production React.
• Mendeploy ke Netlify (drag-and-drop atau via GitHub).
• Mendeploy ke Vercel (via CLI atau GitHub).
• Mengatur environment variables di dashboard masing-masing platform.
• Menguji aplikasi yang sudah online.

Mari kita mulai!

Langkah 1: Persiapan Kode Frontend

1.1. Environment Variables untuk Production

Selama pengembangan, kita menggunakan file .env di frontend dengan variabel seperti VITE_API_URL dan VITE_UPLOAD_URL. Pastikan di kode kita menggunakan import.meta.env.VITE_NAMA_VARIABEL (khusus Vite). Contoh di services/api.js:

const API = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

Di komponen DestinationCard.jsx:

const imageUrl = destination.cover_image 
  ? `${import.meta.env.VITE_UPLOAD_URL}/${destination.cover_image}`
  : 'https://via.placeholder.com/300x200?text=No+Image';

Sekarang kita perlu menyiapkan nilai untuk production. Setelah backend dideploy, kita punya URL backend, misal: https://wisata-backend.onrender.com. Maka:

• VITE_API_URL = https://wisata-backend.onrender.com/api
• VITE_UPLOAD_URL = https://wisata-backend.onrender.com/uploads

💡 Catatan: Di Vite, hanya variabel yang diawali VITE_ yang akan tersedia di kode frontend. Jangan gunakan nama lain.

1.2. Membuat File .env.production (Opsional)

Kita bisa membuat file .env.production di root frontend untuk menyimpan nilai production. Isinya:

VITE_API_URL=https://wisata-backend.onrender.com/api
VITE_UPLOAD_URL=https://wisata-backend.onrender.com/uploads

File ini tidak akan di-commit ke GitHub (pastikan sudah di .gitignore). Nanti kita akan mengatur environment variables langsung di dashboard platform.

1.3. Menguji Build Lokal

Sebelum deploy, pastikan build berhasil di lokal. Jalankan perintah:

npm run build

Perintah ini akan membuat folder dist yang berisi file-file statis. Kamu bisa menguji hasil build dengan menjalankan:

npx serve dist

Buka http://localhost:3000 untuk melihat apakah aplikasi berjalan dengan baik (terkoneksi ke backend production). Pastikan tidak ada error di konsol.

Langkah 2: Deploy ke Netlify

Netlify adalah platform hosting untuk situs statis yang sangat populer. Ada dua cara: drag-and-drop folder dist atau menghubungkan dengan GitHub.

2.1. Metode Drag-and-Drop (Paling Cepat)

1. Buka app.netlify.com dan login (bisa dengan akun GitHub).
2. Di dashboard, seret folder dist ke area yang bertuliskan "Drag and drop your site folder here" .
3. Netlify akan mengupload dan langsung memberikan URL acak, misal https://random-name-123456.netlify.app.

Setelah itu, kita perlu mengatur environment variables.

2.2. Metode GitHub (Untuk Deployment Otomatis)

1. Push kode frontend ke repository GitHub.
2. Di Netlify, klik "Add new site" > "Import an existing project".
3. Pilih GitHub dan otorisasi Netlify.
4. Pilih repository frontend.
5. Isi konfigurasi build:
   • Build command: npm run build
   • Publish directory: dist
6. Klik "Deploy site".

2.3. Menambahkan Environment Variables di Netlify

Setelah site terdeploy, masuk ke Site settings > Environment variables. Tambahkan variabel:

• VITE_API_URL = https://wisata-backend.onrender.com/api
• VITE_UPLOAD_URL = https://wisata-backend.onrender.com/uploads

Klik "Save". Kemudian lakukan redeploy (bisa dengan Trigger deploy).

💡 Tips: Di Netlify, environment variables untuk frontend harus diawali VITE_ agar bisa dibaca oleh Vite.

Langkah 3: Deploy ke Vercel

Vercel juga platform populer untuk frontend, dengan integrasi GitHub yang sangat baik.

3.1. Deploy dengan CLI (Command Line)

1. Install Vercel CLI secara global: npm i -g vercel .
2. Di folder frontend, jalankan vercel.
3. Ikuti petunjuk:
   • Set up and deploy: Y
   • Login dengan akun Vercel (jika belum).
   • Pilih scope (akun).
   • Link to existing project? N (buat baru).
   • Project name: biarkan default.
   • Directory: ./ (root).
   • Override settings? N
4. Setelah itu, Vercel akan otomatis mendeteksi Vite dan melakukan build. Akan diberikan URL.

Untuk menambahkan environment variables, jalankan:

vercel env add VITE_API_URL

Masukkan nilai, pilih environment (production). Ulangi untuk VITE_UPLOAD_URL. Kemudian deploy ulang dengan vercel --prod.

3.2. Deploy dengan GitHub (Otomatis)

1. Buka vercel.com, login dengan GitHub.
2. Klik "Add New..." > "Project".
3. Pilih repository frontend.
4. Vercel akan otomatis mendeteksi Vite dan mengisi build command dan output directory (dist).
5. Tambahkan environment variables di bagian "Environment Variables" sebelum deploy.
6. Klik "Deploy".

Setiap kali push ke GitHub, Vercel akan otomatis redeploy.

Langkah 4: Menguji Aplikasi yang Sudah Online

Buka URL yang diberikan Netlify atau Vercel. Misal: https://wisata-indonesia.netlify.app. Pastikan:

• Halaman utama menampilkan data dari backend (cek konsol jika ada error).
• Gambar cover dan galeri muncul (pastikan URL upload benar).
• Login admin berfungsi (coba akses /login).
• Halaman admin dapat diakses setelah login.

Jika ada gambar yang tidak muncul, periksa URL di elemen gambar. Mungkin perlu menyesuaikan VITE_UPLOAD_URL atau memastikan folder uploads di backend dapat diakses publik (di Render, kita sudah set static file).

⚠️ Penting: Pastikan backend mengizinkan CORS untuk domain frontend. Jika perlu, tambahkan domain frontend ke konfigurasi CORS di backend. Di backend kita sudah menggunakan cors() tanpa opsi, yang berarti mengizinkan semua origin. Untuk production, sebaiknya batasi hanya domain tertentu. Contoh di app.js:

app.use(cors({
  origin: ['https://wisata-indonesia.netlify.app', 'http://localhost:5173']
}));

Jangan lupa redeploy backend setelah perubahan.

Troubleshooting Umum

Masalah	Solusi
Error: Failed to fetch atau Network Error	Periksa environment variable VITE_API_URL. Pastikan URL benar dan tidak ada trailing slash. Juga pastikan CORS sudah diatur di backend.
Gambar tidak muncul	Cek VITE_UPLOAD_URL. Pastikan backend menyajikan folder uploads secara statis dan path gambar benar.
Halaman tidak ditemukan (404) saat refresh di rute selain home	Ini masalah routing di SPA. Di Netlify, buat file _redirects di folder public dengan isi: /* /index.html 200. Di Vercel, biasanya otomatis teratasi dengan konfigurasi vercel.json.
Build gagal di Netlify/Vercel	Periksa log build. Pastikan semua dependensi terinstall dan tidak ada error sintaks. Coba jalankan npm run build di lokal untuk memastikan.

Mengatasi Routing 404 di Netlify

Buat file public/_redirects (tanpa ekstensi) dengan isi:

/* /index.html 200

File ini akan disalin ke folder dist saat build, sehingga semua request diarahkan ke index.html.

Untuk Vercel, secara default sudah menangani ini, tapi bisa juga buat vercel.json di root:

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

Langkah Selanjutnya

Di Studi Kasus #25, kita akan melakukan uji coba menyeluruh, evaluasi, dan membahas ide pengembangan lebih lanjut seperti menambahkan sistem pemesanan, rating, atau peta interaktif.

Selamat! Aplikasi Wisata Indonesia sekarang sudah live dan bisa diakses oleh siapa pun. Bagikan URL-nya ke teman-temanmu!

Sampai jumpa di tutorial terakhir!

---

Ditulis dengan ❤️ untuk para pengembang yang ingin membangun aplikasi wisata.