Cara Deploy React App dengan Firebase Hosting

Hallo teman-teman semua ini merupakan artikel pertama saya di sekolah koding dan kali ini saya akan share cara deploy react app dengan firebase hosting, oke langsung saja kita mulai.

Persiapan

Bagi teman-teman yang sudah memiliki project react bisa langsung menggunakannya namun disini saya akan membuat baru dengan menuliskan sintaks berikut.

npx create-react-app reactfirebase

Jika sudah selesai kita bisa menambahkan firebase tools kedalam project kita dengan menggunakan sintaks berikut.

cd reactfirebase
npm i -g firebase-tools

Login Firebase

Nah jika proses instalasi firebase tools sudah selesai teman-teman bisa login terlebih dahulu pada firebase-cli dengan menjalankan sintaks berikut.

firebase login

setelah itu masukan email dan password firebase kalian, namun jika belum memiliki akun firebase maka silahkan buat terlebih dahulu disini. Setelah proses login berhasil maka akan menampilkan output seperti ini.

Setup Firebase

Nah disini teman-teman bisa masuk ke dalam directory project dan setup firebase pada project kita dengan menggunakan.

firebase init

Akan muncul tampilan seperti ini dan silahkan ketik “Y” dan tekan enter.

setelah itu akan ada pilihan fitur dari firebase yang akan digunakan, karena kita akan menggunakan fitur hostingnya saja maka pilih.

“Hosting: Configure and Deploy Cloud Functions”

Dan jangan lupa klik spasi untuk memilih dan tekan enter.

Selanjutnya disini kita akan diberi pilihan kembali project firebase mana yang akan kita gunakan, karena kita belum memilikinya maka kita bisa buat baru dengan memilih.

“Create a new project”

Tekan enter untuk memilih dan masukan nama dari project kalian, pastikan nama dari project harus unik maka kalian boleh menambahkan angka random di belakang nama project kalian dan tekan enter jika sudah selesai, jika ada pilihan project ID kalian bisa langsung tekan enter saja.

Setelah itu kita akan diminta untuk menentukan directory folder lalu ketik “build” dan tekan enter.

Dan selanjutnya kita diminta untuk menggunakan single-page app maka ketik “y” dan tekan enter.

Yang terakhir jika ada pilihan Overwrite? kita bisa pilih “no”

Deploy Firebase

Tahap terakhir kita akan upload react app kita menggunakan sintaks.

yarn build && firebase deploy

Proses ini cukup memakan waktu jadi silahkan tunggu beberapa menit dan jika sudah selesai maka akan seperti ini.

Yap akhirnya project kita sudah selesai dan kita bisa langsung mengakses link website kite di “Hosting URL”.

Oke terimakasih teman-teman jika masih ada yang kurang jelas bisa di tanyakan di kolom komentar atau boleh kirim ke email saya.