Cara Deploy React App dengan Firebase Hosting


react-Js-Deploy.jpg


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.


1-ihe54cb-Dz7-Etg-BH887tn8g.png


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.


1-bc-Wcib7-Tx-Oa9-DHYOQLGHHg.png


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.


1-u-CUMI4-OUEVUTHng-PPDO-og.png


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”


1-Yeekz-ZTqjm7n9-ERPK5-o-IA.png


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.


1-ZHhp-GMBg-Wf3-Ogwi-Naz-ZSt-A.png


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


1-Fji-Wa-Zo-Dl-Ge-AW-r-Lj2j4w.png


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

avatar Kubilismail

Ditulis oleh @Kubilismail

"Code and coffe"