Deploy
aplikasi React
Unggah production build dari Vite, Create React App, atau React SPA lain dan publikasikan dengan route yang aman saat refresh, HTTPS, pengiriman global, dan domain kustom saat dibutuhkan.
Unggah output build, bukan proyek source
File source React dipakai untuk development. DeployPages melayani file statis yang dihasilkan production build.
Vite React
Output statis default Vite adalah dist. Jika vite.config.js mengubah build.outDir atau base, deploy folder output itu dan uji URL asset setelah unggahan.
Create React App
CRA menulis file produksi ke build. Jika app dilayani dari subpath, pengaturan homepage bisa memengaruhi URL asset yang dibuat.
React SPA lain
Setup React apa pun bisa bekerja saat menghasilkan index.html, bundle JavaScript, CSS, gambar, font, dan asset yang bisa dilayani sebagai file statis.
Kenapa aplikasi React sering rusak setelah deployment
React SPA tetap dimulai dari satu dokumen
Sebagian besar React single-page app mengirim satu titik masuk HTML, lalu client-side router menentukan layar yang dirender setelah JavaScript dimuat.
Itu bekerja lokal karena dev server tahu cara fallback ke index.html. Static host biasa belum tentu begitu, sehingga /dashboard bisa bekerja saat navigasi tetapi menjadi 404 setelah refresh.
Yang rusak saat refresh
Static file server menerima GET /settings dan mencari file atau folder settings yang nyata.
Build React biasanya hanya punya index.html plus asset hashed, jadi server mengembalikan 404 sebelum React Router sempat membaca URL.
Cara DeployPages menanganinya
DeployPages menerapkan fallback SPA untuk route dokumen yang hilang dan melayani index.html, bukan hard 404.
Setelah dokumen dimuat, React berjalan, router membaca URL saat ini, dan layar yang benar dirender tanpa Anda merawat file redirect.
Kenapa tim memakainya
Unggah folder dist atau build. Routing fallback, HTTPS, kompresi, dan pengiriman global menjadi bagian dari deployment, bukan checklist yang dibuat ulang untuk setiap app React kecil.
Cek produksi yang layak untuk React app
App bisa compile tetapi tetap gagal online. Cek ini sebelum mengirim tautan.
Base path asset
Jika JavaScript atau CSS dimuat dari URL salah, halaman bisa blank. Pengaturan base Vite dan homepage CRA biasanya perlu diperiksa.
Client-side routes
Uji kunjungan langsung dan refresh untuk route penting seperti /login, /pricing, /dashboard, dan deep link yang dibagikan.
Endpoint API
Deployment React statis bisa memanggil API eksternal, tetapi tidak menjalankan kode backend sendiri. Jangan masukkan secret server dan private API key ke bundle frontend.
Environment variable
Sebagian besar build tool React memasukkan nilai environment publik ke bundle saat build. Mengubah variable setelah unggahan biasanya membutuhkan rebuild.
Alur deployment React
Build app
Jalankan production build secara lokal agar React, CSS, dan asset dibundel ke folder statis yang bisa dideploy.
Verifikasi output
Cek folder output berisi index.html plus asset yang dihasilkan. Untuk Vite biasanya dist; untuk Create React App biasanya build.
Unggah seluruh folder
Unggah seluruh folder dist ke DeployPages. Jangan hanya mengunggah index.html karena style dan script akan hilang.
Uji halaman dengan route
Buka nested route, refresh browser, dan pastikan app tetap load, bukan mengembalikan 404 dari host.
Masalah umum deployment React
Layar putih setelah deploy
Buka DevTools dan cek file JS atau CSS yang hilang lebih dulu. Base path salah, asset hilang, atau folder unggahan keliru sering menyebabkan halaman kosong.
Refresh menghasilkan 404 di nested route
Static host mencoba mencari file nyata untuk route. Gunakan fallback SPA agar route dokumen yang hilang melayani index.html.
Asset bekerja lokal tetapi tidak online
Cek path absolut, pengaturan public base, dan apakah folder output yang diunggah menyertakan direktori asset yang dihasilkan.
Perubahan environment variable tidak muncul
Rebuild app dengan variable publik baru, lalu unggah output baru. Bundle yang sudah deploy tidak bisa membaca nilai env server privat saat runtime.
FAQ deployment React
Q:Kenapa React app saya menampilkan layar putih setelah deploy?
Sebagian besar masalah layar putih berasal dari path asset yang salah atau bundle hilang. Untuk Vite, pastikan base sesuai target deployment. Untuk CRA, cek homepage dan pastikan folder unggahan berisi asset hasil build.
Q:Apakah perlu konfigurasi nginx atau redirect manual?
Tidak. DeployPages menangani fallback SPA untuk route yang hilang di jaringan, jadi Anda tidak perlu merawat server rewrite sendiri.
Q:Haruskah saya mengunggah folder proyek atau folder dist?
Unggah folder output produksi, bukan proyek source. Untuk Vite biasanya dist. Untuk Create React App biasanya build.
Q:Bisakah memakai environment variable?
Bisa, tetapi nilainya di-resolve saat Anda menjalankan build lokal. DeployPages hosting output statis final, jadi injeksi environment server-side runtime tidak termasuk alur ini.
Q:Bisakah React app memanggil API setelah deployment?
Bisa. React app statis dapat memanggil API eksternal dari browser. Ingat, apa pun yang masuk kode frontend terlihat oleh pengguna, jadi secret privat butuh backend.
Q:Bisakah deploy Next.js di sini juga?
Bisa jika diekspor sebagai website statis. Gunakan output: 'export' dan unggah direktori out. Route Next.js server-rendered membutuhkan runtime di luar hosting statis.
Q:Bisakah saya menambah domain kustom nanti?
Bisa. Setelah website live, tambahkan domain di console dan ikuti instruksi DNS. DeployPages menerbitkan HTTPS otomatis setelah record terbaca.