Cara hosting di firebase

Halo selamat pagi semua, kali ini saya akan share bagaimana caranya hosting static file seperti css, js dan html pada platform firebase. Kemudian anda bisa mengaksesnya melalui web browser.

Perhatian!

Mohon agar anda membaca dengan seksama artikel ini, karena beberapa case menggunakan perintah-perintah CLI yang harus anda langsung praktekan jika ingin melihat hasilnya secara langsung.

Firebase adalah salah satu platform dari google yang dimana platform ini termasuk bagian dari ekosistem google yang besar dan komplek, firebase digunakan untuk keperluan development mobile programming seperti ios, android dan web.

Platform ini cukup lengkap karena memberikan fitur seperti database dan storage yang dimana storage nya bisa anda pilih di jakarta, karena GCP sudah membuat data center di indonesia.

Berikut adalah langkah untuk membuat static file pada firebase.

Login / Daftar firebase

• Login ke firebase https://firebase.google.com/
• Buat project baru (add project)
• Kemudian ada pilihan untuk menganalisa trafic project anda dengan google analytic, hidupkan opsi ini secara default atau anda bisa matikan.
• Klik continue, project sedang di buat silahkan anda tunggu
• Klik continue jika sudah selesai
• Pilih project
• Ada beberapa pilihan seperti, ios, android, web dan bigquery
• Kemudian pilih web <>

Register Aplikasi

Setelah anda memilih web, langkah selanjutnya adalah meregister nama dari aplikasi anda, bisa gunakan nama anda atua apapun yang mudah di ingat, nantinya akan diberikan suggestion oleh google. Klik Register app.

Tambah firebase SDK

Secara default SDK firebase sudah tercreate, anda tingga melihat dan mempelajari bagaimana firebase melakukan request js.

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.17.2/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>

Jika anda sudah melihat sekilas bagaimana request js sdk di firebase silahkan klik next.

Install CLI Firebase

Pada tahap ini jika anda menggunakan macos / linux silahkan open terminal dan kemudian jalankan perintah ini :

npm install -g firebase-tools

bisa juga gunakan juga perintah ini (saya gunakan perintah ini btw, tidak menggunakan npm) :

curl -sL https://firebase.tools | bash

Jika anda pengguna windows anda bisa gunakan node.js silahkan kunjungi halaman : node.js atau bisa download firebase binnary (100MB besar filenya) disini.

Biarkan firebase cli terinsall di komputer anda, ini memakan waktu berkisar 1-2 menit tergantung kecepatan koneksi internet anda dirumah.

Deploy Firebase Hosting

Setelah anda menginstall CLI firebase di komputer, langkah selanjutnya adalah mendeploy program / web anda agar bisa diakses oleh public.

Untuk melakukan depploy, anda perlu login melalui firebase CLI yang sudah anda install sebelumnya, login melalui CLI membutuhkan auth google pada browser anda, jadi jangan lupa untuk melihatnya di browser ya.

Login

Perintah login nya sebagai berikut (masih di dalam mode terminal ):

firebase login

Silahkan masukan username /email dan password gmail anda ke browser, atau beri auth untuk firebase cli. Anda perlu melakukan setup sekali saja untuk login ini, kemudian jika anda menggunakan cli lagi, otomatis sudah login jika diberikan perintah firebase login.

Init

Langkah selanjutnya adalah melakukan intialize dari project yang akan anda publish, dengan menggunakan perintah :

firebase init

Jika sudah, anda sekarang berada pada project directory firebase, langkah selanjutnya adalah memilih untuk setup. Karena kita akan memilih hosting, maka beri tanda HIJAU pada Hosting : configure and deploy Firebase Hosting sites, caranya adalah dengan menekan SPASI pada check box yang sudah disediakan, gunakan tanda panah ke atas dan kebawah untuk memilih

You're about to initialize a Firebase project in this directory:

  /Users/hendrawijaya

Before we get started, keep in mind:

  * You are initializing your home directory as a Firebase project
  * You are initializing in an existing Firebase project directory

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. (Press <space> to selec
t, <a> to toggle all, <i> to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

Anda cukup memilih Yes (y), agar secara default file hosting anda berada pada folder public yang sudah direkomendasikan oleh google, btw saya mendeploy ulang project yang sudah ada sebelumnya, maka dari itu disini terlihat pertanyaan apakah file eksisting (index.html) akan direplace atau tidak, jika anda deploy baru maka tidak akan muncul.

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, using hendrawijayadotnet.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

Deploy

Setelah anda melakukan init dan berhasil, langkah selanjutnya adalah mendeploy program anda agar bisa di akses oleh public, perintah nya adalah sebagai berikut :

firebase deploy

Setelah anda melakukan deploy, nantinya akan diberikan link dimana app anda dapat diakses melalui browser, dengan subdomain nama project anda dan diakhiri .web.app. Sebagai contoh anda bisa mengakses hasil deploy dari project ini : https://hendrawijayadotnet.web.app

Apples-MacBook:~ hendrawijaya$ firebase deploy

=== Deploying to 'hendrawijayadotnet'...

i  deploying hosting
✔  database: rules syntax for database hendrawijayadotnet is valid
i  hosting[hendrawijayadotnet]: beginning deploy...
i  hosting[hendrawijayadotnet]: found 1 files in public
✔  hosting[hendrawijayadotnet]: file upload complete
i  hosting[hendrawijayadotnet]: finalizing version...
✔  hosting[hendrawijayadotnet]: version finalized
i  hosting[hendrawijayadotnet]: releasing new version...
✔  hosting[hendrawijayadotnet]: release complete

✔  Deploy complete!

Hosting URL: https://hendrawijayadotnet.web.app

Kesimpulan

Oke sampai disitu terlebih dahulu, anda dapat melakukan explore untuk modifikasi file index.html dan disesuaikan dengan halaman landing page misalnya, kemudian cotume domain agar alamat https://namaproject.web.app bisa menggunakan nama domain anda misalnya https://domainanda.com.

Fitur eksisting ini bisa free dengan ketentuan sebagai berikut :

• Quota Bandwith 10GB per bulan
• Quota Storage 10GB

Anda juga dapat memantau berapa quota yang sudah terpakai pada menu hosting > usage.

Oh ya jika anda ingin mengaktivkan fitur storage klik pada project anda dan klik storage, kemudian anda bisa memilih dimana lokasi storage yang akan anda buat, saya sendiri memilih jakarta, ada dokumentasi dimana lokasi jakarta bisa anda klik dan pilih.

Selamat mencoba, selamat belajar dan explore.

Wassalam
Hendra Wijaya