Persiapan Sebelum Mendeploy
Sebelum mendeploy project ReactJS, pastikan Anda telah melakukan beberapa persiapan berikut:
Build Project ReactJS ReactJS menggunakan tool seperti npm atau yarn untuk mengompilasi kode sumber menjadi file-file statis yang siap di-deploy. Pastikan Anda telah menjalankan perintah build untuk menghasilkan file-file tersebut.
Siapkan Akun Hosting Pastikan Anda telah memiliki akun hosting yang mendukung aplikasi ReactJS. Exabytes Network Indonesia menyediakan berbagai pilihan hosting yang kompatibel dengan aplikasi ReactJS.
Domain dan DNS Jika Anda ingin menggunakan domain khusus, pastikan domain tersebut sudah terhubung dengan hosting Anda melalui pengaturan DNS.
Langkah-Langkah Mendeploy Project ReactJS ke Hosting
Berikut adalah langkah-langkah detail untuk mendeploy project ReactJS ke hosting:
Mengganti url homepage pada file package.json project ReactJS
Sebelum membuild project ReactJS, Anda perlu menambahkan / mengganti baris kode berikut pada file package.json menjadi nama website / domain Anda.
Build Project ReactJS
Sebelum mendeploy, Anda perlu mengompilasi project ReactJS menjadi file-file statis. Jalankan perintah berikut di terminal:
atau jika menggunakan Yarn:
Perintah ini akan menghasilkan folder bernama build yang berisi file-file statis seperti HTML, CSS, dan JavaScript yang siap di-deploy.
"Catatan penting, untuk project ReactJS yang menggunakan Vite, biasanya ketika build maka folder yang akan dihasilkan bernama dist"
Compress folder build / dist ReactJS
Pada tahap ini Anda disarankan untuk mengcompress folder yang dihasilkan setelah build tadi menjadi bentuk zip / rar yang nantinya akan di upload ke hosting Anda.
Upload dan extract folder build/dist yang telah di compress ke hosting
Setelah berhasil mengcompress dan membuat file zip/rar , maka selanjutnya Anda perlu mengupload file tersebut ke hosting milik Anda dan kemudian Extract file tersebut.
Upload file zip tadi ke hosting website kalian, pada contoh kali ini kami menggunakan Addon domain pada hosting exabytes dengan nama aji-testnet.my.id sehingga menjadi seperti berikut.
Setelah berhasil upload, balik ke file manager dan kemudian extract file zip tersebut sehingga file-file di dalamnya akan keluar menjadi seperti berikut.
Membuat file .htaccess untuk project ReactJS
Setelah berhasil mengupload dan extract file build reactjs, maka langkah selanjutnya adalah membuat file .htaccess agar project ReactJS Anda bisa ditampilkan melalui website/domain.
Buatlah file baru bernama .htaccess seperti pada gambar berikut.
Kemudian edit dan isikan file .htaccess tersebut dengan kode dibawah ini lalu klik save changes.
Verifikasi Deployment
Setelah semua langkah diatas dilakukan dan semua file berhasil diunggah dengan baik, buka browser dan akses domain atau alamat IP hosting Anda. Jika semuanya berjalan lancar, website ReactJS Anda akan tampil dengan baik. Berikut adalah tampilan website ReactJS pada contoh kali ini
Kesimpulan
Mendeploy project ReactJS ke hosting tidaklah sulit jika Anda mengikuti langkah-langkah yang tepat. Dengan mem-build project, mengunggah file ke hosting, dan melakukan konfigurasi yang diperlukan, website ReactJS Anda dapat diakses secara online dengan lancar. Jika mengalami kendala, pastikan untuk memeriksa konfigurasi server atau memanfaatkan alternatif deployment seperti GitHub Pages atau Vercel.
