Cara Hosting Web Statis di Firebase

Firebase

Pada kali ini saya akan membagikan tutorial Cara Hosting Web Statis di Firebase. Firebase adalah salah satu produk dari Google. Firebase memiliki banyak sekali fitur yang dapat memudahkan kita dalam membuat aplikasi website maupun mobile. Salah satu fitur yang disediakan oleh Firebase adalah hosting website statis. Langsung saja kita mulai mempublikasikan website yang sudah kita buat.

Silahkan buka halaman Console Firebase, pastikan Anda sudah login menggunakan akun Google Anda. Maka akan tampil halaman console Anda.

Jika Anda sudah pernah membuat project sebelumnya maka akan tampil project-project yang sudah dibuat. Klik Add Project untuk membuat project baru. Namun jika Anda belum pernah membuat project, silahkan klik tombol Create a project.

Maka akan muncul tampilan seperti di atas. Langkah pertama silahkan masukkan nama project yang akan dibuat. Jika sudah klik tombol Continue.

Kemudian klik tombol Continue kembali.

Kemudian pilih Default Account for Firebase, jika sudah klik tombol Create Project.

Tunggu prosesnya hingga selesai.

Jika sudah maka akan tampil seperti ini.

Kemudian klik tombol Continue. Maka kita akan diarahkan ke halaman dashboard project kita.

Kita sudah berhasil membuat project baru di Firebase. Selanjutnya buka project yang ingin dihosting pada code editor masing-masing. Disini saya menggunakan Visual Studio Code. Berikut adalah struktur dari folder project saya.

Mendeploy website ke Firebase Hosting dilakukan melalui aplikasi firebase-cli. Kita dapat mendownload firebase-cli melalui terminal atau CMD dengan menulis perintah berikut.

npm install -g firebase-tools

Perintah di atas hanya akan berhasil jika kita sudah menginstal NPM (Node Package Manager). Jika belum, silahkan download dan install Node.js sesuai sistem operasi masing-masing. Jika sudah download dan install Node.js, jalankan perintah di atas.

Jika sudah berhasil, selanjutnya kita log in dengan akun Google ke firebase-cli yang sudah kita install tadi. Jalankan perintah berikut melalui CMD atau terminal.

firebase login

Perintah di atas akan membuka jendela browser dan meminta kita untuk log in dengan akun Google. Klik tombol Allow untuk memperbolehkan Firebase CLI mengakses akun Google yang kita pilih.

Jika proses log in berhasil, maka akan muncul halaman baru yang menampilkan pesan sukses seperti pada gambar di bawah.

Jika sudah berhasil log in, selanjutnya kita kembali ke terminal atau CMD project kita tadi. Pastikan kita sudah berada di direktori project kita. Lakukan inisialisasi pada project kita yang akan diupload ke Firebase Hosting dengan perintah berikut.

firebase init

Ketik Y pada pertanyaan Are you ready to proceed?

Pilih Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action Deploys menggunakan tombol panah lalu tekan tombol SPASI untuk memilih dan terakhir tekan tombol ENTER.

Selanjutnya karena kita akan menggunakan project yang sudah kita buat pada firebase console tadi, kita pilih Use an existing project lalu tekan ENTER.

Pilih project dengan tombol panah lalu tekan ENTER.

Setelah memilih project, kita akan diminta untuk menentukan folder public (folder yang berisi halaman-halaman HTML untuk ditampilkan pada pengguna). Tekan saja tombol ENTER untuk pertanyaan What do you want to use as your public directory?

Karena kita tidak membuat Single-Page Application, maka ketik N pada pertanyaan Configure as a single-page app (rewrite all urls to /index.html)?

Dan karena kita juga tidak menggunakan GitHub dalam mendeploy, maka ketik N pada pertanyaan Set up automatic builds and deploys with GitHub?

Tunggu hingga pesan Firebase initialization complete! muncul. Jika sudah maka akan seperti ini.

Di direktori folder project kita saat ini akan muncul folder public baru yang berisi file index.html dan 404.html. Hapus saja file index.html hasil dari inisialisasi firebase tadi. Kemudian pindahkan file dan folder kita sebelumnya ke dalam folder public ini. Sehingga struktur project yang saya buat menjadi seperti ini.

Langkah terakhir yaitu mengupload website kita ke Firebase dengan menggunakan perintah berikut.

firebase deploy

Selamat, website Anda berhasil dipublish. Anda dapat mengakses dengan klik link pada Hosting URL atau Anda juga bisa melihat pada project di Console Firebase Anda. Jika ada yang masih bingung, silahkan tanyakan di kolom komentar. Selamat mencoba, semoga berhasil.