Menggunakan Firebase untuk Hosting File JavaScript, CSS, dan HTML

Daftar Isi
Cara Hosting File JS CSS HTML Di Firebase

Dalam pengembangan web, pemilihan layanan hosting yang tepat untuk file JavaScript (JS), CSS, dan HTML sangat penting guna memastikan performa yang optimal. Sebelumnya, saya sering menggunakan layanan GitHub untuk menghosting file JS yang berukuran cukup besar. Agar file tersebut dapat di-render dengan baik dan lebih ramah saat diakses, saya juga memanfaatkan layanan CDN dari Statically untuk konversi file. Namun, belakangan ini saya mempertimbangkan untuk langsung menggunakan layanan dari Google, khususnya Firebase, sebagai alternatif yang lebih stabil.

Saya menemukan informasi terkait Firebase melalui situs KompiAjaib.com yang dikelola oleh Kang Adhy (saat ini sudah berganti pemilik). Setelah melakukan berbagai uji coba, saya mendapati bahwa Firebase dapat memberikan performa yang lebih baik dibandingkan dengan menggunakan CDN.


Pendaftaran Firebase

Langkah pertama dalam menggunakan Firebase untuk hosting adalah mendaftarkan akun dan membuat proyek baru. Berikut adalah panduan langkah demi langkah:

  1. Pertama tama kamu perlu mendaftar dengan cara masuk ke https://console.firebase.google.com dengan akun Google kamu. Untuk file storage, Google memberikan ruang 5GB untuk member gratis. Setelah masuk ke dashboard Anda silahkan klik tombol Create New Project.

    Untuk mengecek jumlah ruang penyimpanan kamu bisa akses ke Project Overview dan pilih Usage and billing

  2. Selanjutnya kamu mengisi nama projectnya dan selanjutnya klik Continue.
  3. Sampai akhirnya kamu bisa sampai ke tahap ke tiga seperti gambar berikut:
    Cara Hosting File JS CSS HTML Di Firebase Tahap ketiga pembuatan project firebase
  4. Tahap akhir tunggu proses nya hingga keluar notifikasi Your new project is ready dan selanjutnya klik Continue lagi.

Membuat Cloud Storage Firebase

Setelah berhasil membuat proyek, langkah berikutnya adalah mengaktifkan fitur Cloud Storage di Firebase untuk menyimpan file JS, CSS, dan HTML. Ikuti langkah-langkah berikut:

  1. Pada tampilan berikutnya kamu bisa mengakses menu Build - Storage dan Klik Get Started hingga mendapati tampilan seperti berikut: Pada tampilan tersebut kamu bisa langsung klik Next.
  2. Selanjutnya kamu akan mendapati tampilan seperti berikut: Langsung klik Done saja, dan tunggu prosesnya hingga selesai.

Mulai Hosting Javascript

text_paragraph

  1. Tahap akhir, ini saat nya kamu mulai menyiapkan file yang ingin kamu hosting, sebagai contoh kali ini saya akan hosting file highlight_copyclipboard.js.
  2. Kamu hanya perlu Klik Upload File dan cari file yang ingin kamu upload, kurang lebih seperti berikut:
  3. Kamu perlu perhatikan kotak yang ada disebelah kanan, itu ada tulisan Access token itulah link yang bisa kamu gunakan sebagai hosting. Agar lebih jelas lagi kamu perhatikan gamber berikut:
  4. Link yang diberikan biasanya lebih panjang dari pada link yang umum kita dapatkan, namun kita tidak mencari estetika panjang atau pendeknya URL melainkan kita mencari hosting terbaik. Sebagai contoh URL nya akan tampil seperti berikut:

    https://firebasestorage.googleapis.com/v0/b/hosting-js-c6bbf.appspot.com/o/highlight_copyclipboard.js?alt=media&token=f76fd107-2d61-4c43-9ffe-f1788c9137ca
    Selanjutnya kamu tinggal memakai link tersebut seperti biasa, seperti halnya menggunakan CDN.

Keunggulan Menggunakan Firebase

Firebase memiliki beberapa keunggulan dibandingkan dengan layanan hosting lainnya, antara lain:

  1. Stabilitas Tinggi: Menggunakan infrastruktur Google memastikan performa yang lebih stabil.
  2. Gratis dengan Kapasitas Cukup Besar: Google memberikan ruang penyimpanan gratis sebesar 5GB.
  3. Kemudahan Integrasi: Firebase dapat dengan mudah diintegrasikan dengan berbagai proyek web tanpa memerlukan konfigurasi yang kompleks.

Kesimpulan

Dengan memanfaatkan Firebase sebagai solusi hosting, kita dapat memperoleh performa yang lebih baik dibandingkan dengan penggunaan layanan CDN pihak ketiga. Meskipun Google dapat mengubah kebijakan sewaktu-waktu, layanan ini tetap menjadi pilihan yang layak untuk dipertimbangkan, terutama bagi pengembang yang mencari alternatif hosting berkualitas tinggi dengan biaya rendah.

Referensi:
  1. https://www.kompiajaib.com/2016/08/alternative-lain-hosting-file-js-css.html
  2. https://console.firebase.google.com

Posting Komentar