Firebase Hosting | Cara hosting web semudah beli cilok (lebih mudah bahkan)

Oi chevas, kali ini kita akan belajar tentang bagaimana cara kita meng-hosting web kita ke Firebase Hosting, sebuah teknologi keren dari google dengan segala kelebihannya.

Firebase

Firebase

Jadi Firebase ini adalah teknologi anak dari google yang menyediakan berbagai macam service yang keren keren di bidang Dev-Ops dan Backend. Mulai dari Hosting, Storage, etc.

Kalo penasaran bisa langsung cek aja di sini

But, karna tujuan kita hari ini buat hosting web jadi…. check it out

Set Up

Pertama-tama pastiin kamu punya web yang mau kamu hosting tapi kalo belum ada kami udah siapin kok buat kamu. Apasih yang enggak buat kamu

Bisa download di sini ya. Nanti bakal ada tombol warna ijo di sebelah kanan klik aja, terus pilih download zip.

Next kita perlu yang nama nya node.js dan npm kalian bisa download di sini. Langsung install aja dan klik next next finish kayak biasa.

Dan terakhir, kita perlu install firebase tools di pc kita, dan harus lewat yang namanya command promt atau apapun itu namanya. Hehehe, mulai agak geeky nih. Tapi tenang gk terlalu susah kok.

Untuk kalian pengguna windows bisa klik Windows+R di keyboard kalo untuk pengguna mac kurang tau (ahahahaha maklum gk pernah pake mac) terus ketikin “cmd” terus teken Enter. Setelah itu akan muncul layar hitam ajaib dengan teks putih.

Selanjutnya ketikin

> npm install -g firebase-tools

Nanti dia bakal install dan download segala macem, bisa kita tinggal aja dan kita bisa lanjutin ke next step.

Sekarang kita buka web Firebase buat set up project kita. Pertama buka https://firebase.google.com/ terus pilih menu “Masuk” atau “Log In” di kanan atas, lanjutkan dengan login pake akun google kalian. Kalo udah kalian bakal dilempar ke halaman awal tadi, namun kali ini kita pilih “Open Console” atau “Buka Konsol” di kanan atas kalo udah hasil nya bakal begini

Karna kita belum punya project sebelumnya, jadi kita bikin project baru aja. Klik “Add Project” atau “Tambahkan Proyek”.

Isi data project kalian, dan copy project id kalian. Karna kita bakal perlu itu nanti. Kalo utuk contoh kasus sekarang, project id ku chevalier-lab. Lanjutin ke agree-agree dan “Create Project”. Tunggu bentar…. kalo dah kelar klik “Continue”.

Nah ini dah kelar nih, kalian bisa akses menu Hosting di menu dashboard kanan Develop > Hosting.

Hosting Our Web

Karna semua sudah siap sekarang kita bakal hosting project kita ke Firebase Hosting. Pertama-tama kita buka command prompt kita tercinta. Masih pada inget kan ? Kalo yg enggak inget scroll up sono.

Kalo udah buka command prompt sekarang kita masuk ke folder project kita, command nya dengan

kalo yang folder projectnya di D: atau drive lain bisa masuk ke drive D: dulu

> d:

terus buka folder projectnya

>cd D:\Projects\Chevalier Lab\static-web-course-master

kalo mau cari lokasi folder kalian bisa dengan buka folder nya lewat explorer kayak bisa terus klik path yg di atas kayak gini, terus tinggal copy aja

Aahahaha keliatan kagak ?

Lanjut ya sekarang kita buka folder project kita di cmd, terus kita login ke Firebase dengan command

> firebase login

Kita bakal dilemparin ke browser kesayangan kita dan login pake google account kita.

Selanjtunya kita set project kita biar bisa di host ke firebase dengan command

> firebase init

Nanti bakal ada beberapa pilihan

Are you ready to proceed? (y/n) y

Terus pilih service hosting dengan gerakan cursor ke atas bawah lalu centang Hosting dengan klik space di keyboard

What do you want to use as your public directory? (public) /

Sisanya jawab dengan “no” atau “n”

Dan kalo ada pilihan gunain project mana, pilih project yg udah kalian sebelumnya. Kalo gk muncul, kalian bisa assign project kalian dengan command

> firebase use --add [isi Project Id Kalian]

Dan terakhir

> firebase deploy

Setelah selesai kalian akan dikasih link buat akses web kalian dan pamerin ke temen temen kalian

Acieee web baru nih :D

Summary

Jadi buat kesimpulannya, sebenernya semua ini dilakuin 3 command yaitu

> firebase login
> firebase init
> firebase deploy

Simple kan ? Gampang mana ama beli cilok ?

Kalo ada yang mau ditanyakan bisa silahkan di kolom komentar ya!

Dan jangan lupa kasih clap nya 50x boleh lah ya.

Chevalier Lab

We code, we share, we create.