Membuat Landing Page Firebase, Free Subdomain and Hosting

BIKIN BALIK
8 Jul, 2022
Membuat Landing Page

Landing Page adalah suatu halaman/ website khusus yang dibuat dengan tujuan lebih spesifik untuk mengarahkan pelanggan melakukan Call To Action (CTA) tertentu, seperti membeli, memesan, mengisi formulir, atau ingin melihat profile seseorang

Landing Page ini tampilannya lebih to the point, maka desain pun akan menyesuaikan yang di masukan dan tidak lebih dari satu.

Ane akan membuat tutorial cara membuat landing page di platform firebase free subdomain, hosting,dan sudah di lengkapi dengan SSL (Secure Socket Layer) untuk melindungi protokol http menjadi  https.

Platform firebase merupakan layanan google cloud computing SaaS, digunakan untuk mempermudah dalam pembuatan atau pengembangan website atau aplikasi, dengan adanya firebase pengguna bisa lebih fokus mengembangkan tanpa usaha yang sangat besar.

Bahan untuk Membuat Landing Page Firebase

  1. Akun Gmail ➞ https://www.google.com/account/about/
  2. PC/ Laptop
  3. Akses Internet
  4. Aplikasi Node JS ➞ https://nodejs.org/en/download/
  5. File Landing Page  
➞ Download Disini
➞ Password : 123456789

Panduan Membuat Landing Page di Firebase 

Sebelum membuat sebuah landing page di firebase, ada hal-hal yang harus di penuhi terlebih dahulu untuk membantu dalam melakukan konfigurasi.

1. Install Software Node.JS di Komputer

Node.js adalah platform perangkat lunak yang dirancang oleh Ryan Dahl. Node.js runtime dipakai untuk lingkungan JavaScript di luar peramban web yang dibangun di atas mesin JavaScript V8, software Node.js dapat dijalankan pada sistem operasi Windows, Mac OS X, dan Linux.

Welcome to the Node.js Setup Wizard, Klik Next

setup wizard node js


Node.js Setip End-User License Agreement, Checklist ☑ I accept the terms in the License Agreement. Klik Next.

license agreement node js


Destination Folder installation node.js, biarkan default, Klik Next.

destination folder node js


Custom Setup, biarkan default saja node.js, Klik Next.

custom setup node js


Tool for Native Modules, biarkan default, Klik Next.

tools for native modules node js


Setup Node.js completed, Readt to install Node.js, Klik Install.

ready to install node js


Proses Installing Node.js, Jika Muncul Popup Menu baru pilih Yes .

installing node js


Installing Completed the Node.js Setup Wizard.

completed the setup wizard node.js

2. Daftar Akun Platform Firebase

Setelah measang perangkat lunak node.js di komputer, selanjutnya pembuatan akun platform firebase dengan menggunakan akun gmail, sangat di rekomendasi menggunakan gmail baru/ fresh untuk mempermudah dalam pengelolaan saat mempunyai landing page lebih dari satu.

Website : https://firebase.google.com/

Login terlebih lebih dahulu ke platform firebase menggunakan akun gmail, karena ini produk SaaS google, ane daftar via gmail tanpa harus melakukan pengisian fomulir.

website platform firebase google


Klik Menu Create a project Firebase.

create a project firebase new


Masukan Nama Project Firebase, contoh ane menyamakan dengan nama gmail Omer Karella.

name project firebase


Klik Continue.

firebase google analytic


Enable Google Analytics Platform Firebase, Klik Create Project.

configure google analytics firebase


Setup Project Firebase Completed, Klik Continue.

create project firebase completed

3. Konfigurasi Firebase untuk Membuat Landing Page

Selesai membuat project firebase baru untuk membuat sebuah landing page, selanjutnya ke konfigurasi firebase agar bisa tampil di browser.

Berikut dashboard firebase yang sebelumnya sob membuat project, dibagian ini control penuh terhadap yang project seperti aplikasi atau website, Klik Simbol </> .

dashboard firebase platform google


Isikan App nickname untuk project web app yang akan dibuat di firebasae, ane menyamakan dengan nama akun gmail.

Pilih Create a new site untuk membuat website baru.

Lalu masukan link url untuk alamat home page dari landing page, ane memberikan url omer-karellaa menyamakan dengan nama gmail.

add firebase web app


Add firebase SDK, Klik Next.

add firebase sdk


Buka CMD (Command Prompt) pada windows PC/ Laptop, untuk install firebase tool pada node.js , fungsinya untuk melakukan konfigurasi landing page secara remote dan tidak langsung di website firebase.

Masukan perintah npm install -g firebase-tools ke CMD lalu Klik Enter.

install firebase tool


Berikut install firebase tool sudah selesai, Klik Next.



Masukan perintah firebase login pada cmd untuk melakukan authentication pada software node.js yang terpasang di komputer.

Akan muncul menu baru untuk menyetujui pilih saja browser chrome, Klik OK.

authentication login software node.js


Pilih akun gmail yang sebelumnya digunakan untuk membuat akun platform firebase google, ane omerkarella@gmail.com .

select gmail firebase


Klik Allow untuk menyetujui Firebase CLI.

allow firebase cli


Notifikasi Successful di browser chrome.

firebase cli login successful


Notifikasi Successful di CMD.

notifikasi login successful di cmd windows


Menambahkan project web app ke firebase menggunakan CMD, firebase use -add omer-karella, Klik Enter.

add project web app firebase via cli


Initiate your project, untuk memasukan file-file dari landing page ke firebase, firebase init ➞ y ➞ (*) Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys ➞ Klik Enter.

firebase init


Klik Enter.

public directory hosting firebase


Hosting Setup, urutan konfigurasi ➞ n ➞ n ➞  y ➞ y .

firebase hosting setup


Setelah konfigurasi hosting selesai, selanjutnya deploy file-file landing page dari lokal komputer ke hosting firebase menggunakan CLI, firebase deploy.

Pastikan ada pesan Deploy complete.

Hosting URL : https://omear-karella.web.app ➞ ini alamat dari landing page

deploy file landing page


Copy hosting url dan pastekan di browser chrome, berikut landing page default dari firebase, selanjuntya kita akan merubah home page default menjadi custom sesuai dengan keinginan kita.

home page default firebase

4. Mengganti Landing Page Default Firebase Menjadi Custom

Untuk mengganti default landing firebase pastikan sob sudah download link diatas, ane sudah meyediakan kurang lebih 6 theme landing page yang terkompres format *.zip .

Contoh pada penggantian landing page menggunakan theme dengan nama folder switch lalu ekstrak, maka sob akan menemukan folder dengan nama twitch.

Pilih semua file pada folder switch, lalu copy.

result extract file zip


Selanjutnya masuke ke Local Disk (C:) ➔ Users ➔ ANGGA ➔ public , hapus/backup terlebih dahulu file yang berada di folder public, lalu pastekan file dari landing page custom.

Untuk nama ANGGA menyesuaikan dengan nama pada komputer sob.

paste file landing page custom di folder public


Setelah meletakan file landing page custom pada folder public, lanjut proses deploy/ memasukan ke hosting firebase dengan menggunakan mode cli.

firebase deploy

deploy file landing page ke hosting firebase


Berikut tampilan dari landing page theme switch yang sudah di deploy ke hosting firebase, untuk alamat url masih sama https://omear-karella.web.app .

Jika sob ingin custom secara spesifik pada landing page harus melakukan deploy ulang, begitu seterusnya.

view landing page theme switch

Kesimpulan

Landing Page adalah suatu halaman/ website khusus yang dibuat dengan tujuan lebih spesifik, seperti membeli, memesan, mengisi formulir, atau ingin melihat profile seseorang.

Bisa dikatakan landing page itu website mini, dengan struktur website yang tidak rumit dalam artian source code nya bisa custom.

Platform firebase menjadi solusi untuk sob yang ingin menguji landing page tanpa harus menyewa terlebih dahulu domain TLD dan hosting.

Bukan hanya itu untuk melakukan testing mobile friendly, responsif, dll.

Tapi jika source code dari website mengandung bug, pihak platform firebase akan menghapus project dari web app.

Next Post Previous Post
No Comment
Add Comment
comment url