Cara Hosting Aplikasi React.js
Hostifame mendukung ekosistem React.js (Vite & Create React App) secara fleksibel dengan menyediakan opsi Auto-Build maupun Pre-Built. Panduan ini akan membantu Anda mengunggah aplikasi frontend Anda hingga berjalan live.
1. Persiapkan File Proyek (.ZIP)
Mesin deployment Hostifame sangat cerdas dan mendukung 2 metode instalasi. Silakan pilih salah satu metode sebelum Anda mengompres (zip) file proyek Anda:
Metode Auto-Build
Upload seluruh kode sumber (source code) Anda. Mesin kami akan melakukan npm install dan npm run build di server.
node_modules ke dalam file ZIP agar proses unggah tidak macet!
Metode Pre-Built (Fast Deploy)
Jika Anda sudah mem-build proyek di laptop Anda (menjadi folder dist atau build), cukup kompres dan unggah folder tersebut beserta file package.json-nya.
2. Unggah & Deteksi Otomatis
Masuk ke Dasbor Hostifame dan klik tombol Tambah Proyek. Pilih file ZIP yang sudah Anda siapkan. Setelah Anda menyimpan formulir, algoritma CI Analysis kami akan memindai file package.json Anda untuk mengenali bahwa ini adalah proyek React.js.
3. Proses Build (Deployment)
Klik tombol Deploy pada Dasbor. Jika Anda menggunakan "Metode Auto-Build", Agen Server kami akan menjalankan proses kompilasi di latar belakang (memakan waktu 1-3 menit).
Fitur Auto-Cleanup: Hemat Kuota Disk!
Setelah proses build berhasil menciptakan folder statis (dist atau build), Hostifame akan secara otomatis menghapus folder node_modules dan cache milik Anda. Hal ini dilakukan agar kuota penyimpanan server Anda tidak cepat penuh oleh ratusan modul Javascript yang sudah tidak terpakai lagi di mode Production.
4. Environment Variables (.env)
Jika React Anda perlu berkomunikasi dengan API Eksternal (Backend), buat atau edit file .env melalui Web File Manager. Catatan Penting: Karena kompilasi (Build) menanamkan file .env ke dalam kode statis, Anda wajib melakukan Deploy ulang dengan menekan tombol npm run build yang ada di File Manager setiap kali merubah isi file .env agar perubahan terbaca oleh browser.
# Jika Anda menggunakan Vite (Gunakan prefix VITE_):
VITE_API_URL="https://api.domainanda.com/v1"
VITE_APP_NAME="Sistem Informasi Frontend"
# Jika Anda menggunakan Create React App (Gunakan prefix REACT_APP_):
REACT_APP_API_URL="https://api.domainanda.com/v1"Penting: Error 404 pada React Router
Karena React adalah Single Page Application (SPA), me-refresh halaman pada URL spesifik (misalnya /dashboard) biasanya akan menampilkan error 404. Jangan khawatir, skrip Nginx Hostifame sudah menanamkan konfigurasi try_files $uri $uri/ /index.html; secara otomatis saat deploy, sehingga Routing frontend Anda dijamin berjalan mulus sempurna!