Dokumentasi Deploy Framework React.js

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) & Aturan Wajib

Untuk memastikan proses upload berjalan sangat cepat dan tidak mengalami kegagalan (timeout), Anda hanya perlu mengunggah Source Code murni dari proyek React.js Anda.

Benar & Cepat

Apa yang Harus Di-ZIP?

Kompres seluruh file kodingan proyek Anda seperti folder src, public, serta file konfigurasi seperti package.json, vite.config.js, atau index.html.

Ukuran Ringan: Tanpa folder dependensi dan file build lokal, ukuran file ZIP Anda umumnya hanya sekitar 1 - 3 MB sehingga upload selesai dalam hitungan detik!

Dilarang Keras

Jangan Sertakan Folder Ini!

Pastikan Anda TIDAK MENGIKUTSERTAKAN folder-folder di bawah ini ke dalam file .ZIP Anda:

❌ /node_modules (Ratusan megabyte library)
❌ /dist atau /build (Folder hasil build lokal)

Menyertakan folder ini akan membuat file ZIP bengkak hingga ratusan MB dan menyebabkan proses upload gagal.

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) di Server

Klik tombol Deploy pada Dasbor. Karena Anda mengunggah kodingan mentah, Agen Server kami akan menjalankan proses instalasi modul dan kompilasi di latar belakang (npm install dan npm run build) yang memakan waktu sekitar 1-2 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.

.env

# 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!

Sebelumnya Dokumentasi Laravel Selanjutnya Dokumentasi Vue.js