Firebase Hosting

FIREBASE

Firebase adalah suatu layanan dari Google yang digunakan untuk mempermudah para pengembang aplikasi dalam mengembangkan aplikasi. Dengan adanya Firebase, pengembang aplikasi bisa fokus mengembangkan aplikasi tanpa harus memberikan usaha yang besar. Dua fitur yang menarik dari Firebase yaitu Firebase Remote Config dan Firebase Realtime Database. Selain itu terdapat fitur pendukung untuk aplikasi yang membutuhkan pemberitahuan yaitu Firebase Notification.

Selain fitur firebase remote config, firebase relatime database dan firebase notification ada fitur menarik lainnya yaitu firebase hosting. Firebase Hosting adalah layanan hosting konten web yang berkelas produksi untuk developer. Hanya dengan satu perintah, Anda dapat menerapkan aplikasi web serta menyajikan konten statis dan dinamis ke CDN (jaringan penayangan konten) global dengan cepat.

FIREBASE HOSTING

FIREBASE HOSTING dibuat untuk developer web modern. Dengan hadirnya framework JavaScript front-end seperti Angular dan fitur generator statis seperti Jekyll, situs dan aplikasi kini jadi lebih tangguh daripada sebelumnya. Jika Anda menerapkan halaman landing aplikasi yang sederhana atau Progressive Web App (PWA) yang kompleks, Hosting menyediakan infrastruktur, fitur, dan rangkaian sarana yang disesuaikan untuk menerapkan serta mengelola situs dan aplikasi.
Dengan menggunakan Firebase CLI, Anda menerapkan file dari direktori lokal di komputer Anda ke server Hosting. Selain menayangkan konten statis, Anda dapat menggunakan Cloud Functions for Firebase atau Cloud Run untuk menayangkan konten dinamis dan menghosting layanan microservice di situs Anda. Semua konten ditayangkan melalui koneksi SSL dari server edge terdekat di CDN global. Firebase Hosting memiliki opsi konfigurasi hosting yang ringan bagi Anda untuk membuat PWA yang canggih. Anda dapat menulis ulang URL untuk perutean sisi klien atau menyiapkan header kustom dengan mudah.
Untuk menayangkan konten Anda, Firebase menawarkan beberapa opsi domain dan subdomain:

Secara default, setiap project Firebase memiliki subdomain gratis di domain web.app dan firebaseapp.com. Kedua situs ini melayani konten dan konfigurasi yang sama-sama diterapkan.
Anda dapat membuat beberapa situs jika memiliki situs dan aplikasi terkait yang menayangkan konten berbeda tetapi tetap memiliki resource project Firebase yang sama (misalnya jika Anda memiliki blog, panel admin, dan aplikasi publik).
Anda dapat menghubungkan nama domain sendiri ke situs yang di-hosting oleh Firebase.

Firebase secara otomatis memberikan sertifikat SSL untuk semua domain Anda, sehingga semua konten Anda ditayangkan dengan aman.

KEMAMPUAN FIREBASE

Menayangkan konten melalui koneksi yang aman

Web modern itu aman. SSL tanpa konfigurasi sudah disertakan dalam Firebase Hosting, sehingga konten selalu dikirim dengan aman.

Menghosting konten statis dan dinamis plus layanan mikro

Firebase Hosting mendukung semua jenis konten untuk hosting, mulai dari file CSS dan HTML hingga API atau layanan mikro Express.js Anda.

Mengirim konten dengan cepat

Setiap file yang Anda upload akan di-cache di SSD pada berbagai server edge CDN seluruh dunia. Di mana pun pengguna berada, konten akan dikirim dengan cepat.

Menerapkan versi baru dengan satu perintah

Dengan Firebase CLI, aplikasi Anda dapat aktif dan berjalan dalam hitungan detik. Fitur command-line mempermudah penambahan target penerapan ke dalam proses build Anda.

Melakukan rollback dengan satu klik

Penerapan cepat itu baik, tapi akan jadi lebih baik jika disertai kemampuan mengurungkan kesalahan. Firebase Hosting menyediakan pembuatan versi lengkap dan pengelolaan rilis dengan rollback sekali klik.

INSTALASI FIREBASE

Sebelum menginstall firebase di komputer atau laptop, ada tools yang dibutuhkan yaitu node.js dengan NPM (Node Package Manager) yang dapat di download di www.nodejs.org. kemudian install aplikasi NPM seperti biasa sampai selesai, lalu buka CMD (Command Prompt) lalu ketikkan perintah npm –version, maka instalasi NPM berhasil dan akan tampil versi npm yang diinstal.
Setelah NPM terinstall, selanjutnya install firebase CLI (Command Line Interface) dengan mengetikkan perintah berikut : npm install –g firebase-tools. Jika proses instalasi sudah selesai, ketik perintah berikut : firebase –version untuk mengetahu versi firebase yang diinstall di computer atau laptop.
Kemudian buat akun firebase di Templat:Https://firebase.google.com lalu klik tombol go to console lalu buat projek baru di firebase.
Jika sudah berhasil membuat projek di firebase, buat folder di direktori computer atau laptop. Lalu buka kembali CMD (Command Prompt) dan masuk ke direktori folder yang telah dibuat.
Selanjutnya login firebase di direktori yang dibuat dengan mengetikkan perintah firebase login, maka akan tampil konfirmasi Allow Firebase to collect anonymous CLI usage information ? lalu ketik yes dan tekan enter. Maka akan menampilkan url authentikasi dari firebase yang dikirim di email yang didaftarkan di website firebase.
Jika sudah authetikasi, maka di CMD (Command Prompt) akan tampil Success Login.
Kemudian inisialisasi folder yang dibuat di direktori dengan menjalankan perintah firebase init lalu tekan enter akan tampil konfirmasi folder direktori yang akan diinstall firebase dengan mengetikkan y atau yes lalu tekan enter
Jika sudah menginisialisasi folder di firebase, akan tampil fitur firebase yang akan diinstall di direktori folder yang telah dibuat. Pilih fitur Hosting dengan menekan tombol spasi di keyboard kemudian tekan enter.
Instalasi firebase di direktori folder berhasil dan akan membuat beberapa file dan folder di direktori yaitu folder public dan fil index.html, firebase.json, package.json dan .firebaserc.
Untuk mengupload file di direktori yang telah dibuat ketikkan perintah berikut : firebase deploy, maka firebase akan mengupload file-file di folder direktori yang telah dibuat. Jika proses upload sudah selesai maka akan menampilkan alamat projek yang telah dibuat oleh firebase. Contoh firebase Hosting URL : Templat:Darmajaya-f8cc1.web.app dan Templat:Darmajaya-f8cc1.firebaseapp.com
Jika ingin mengkases project secara local, dengan mengetikkan perintah berikut : firebase serve lalu tekan enter. Setelah dijalankan akan dapat link localserver, lalu salin URL local servernya ke browser. Maka tampilan website akan sama dengan yang di hosting dengan perintah deploy tadi.

LAMPIRAN

Berikut isi file index.html yang di dapat dari firebase dan dapat kita ubah kemudian di deploy kembali di firebase dengan perintah firebase deploy.
<!DOCTYPE html> <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>Welcome to Firebase Hosting</title>

   

   <script defer src="/__/firebase/6.2.4/firebase-app.js"></script>

   

   <script defer src="/__/firebase/6.2.4/firebase-auth.js"></script>

   <script defer src="/__/firebase/6.2.4/firebase-database.js"></script>

   <script defer src="/__/firebase/6.2.4/firebase-messaging.js"></script>

   <script defer src="/__/firebase/6.2.4/firebase-storage.js"></script>

   

   <script defer src="/__/firebase/init.js"></script>

   <style media="screen">

     body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }

     #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }

     #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }

     #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}

     #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }

     #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }

     #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

     #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }

     @media (max-width: 600px) {

       body, #message { margin-top: 0; background: white; box-shadow: none; }

       body { border-top: 16px solid #ffa100; }

     }

   </style>

 </head>

 <body>

     DARMAJAYA

     Firebase Hosting Setup Complete

     You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

   <script>

     document.addEventListener('DOMContentLoaded', function() {

       try {

         let app = firebase.app();

         let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');

         document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;

       } catch (e) {

         console.error(e);

         document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';

       }

     });

   </script>

 </body>

</html>

Firebase Hosting

Daftar isi

FIREBASE