Cara Hosting di Firebase Dari Visual Studio Code
Saat ini Google telah memberikan layanan yang memudahkan para pengembang web dan App untuk mengembangkan aplikasi dengan konsep yang mudah tanpa ribet. Layanan ini bernama "Firebase" yang dapat membantu pengguna dalam mengembangkan berbagai aplikasi berbasis web. Itu berarti kita dapat memanfaatkan layanan ini untuk hosting firebase website atau aplikasi yang kita buat secara gratis.
Jika Anda ingin hosting situs web sederhana secara gratis, Anda tidak terbatas pada pembuat situs web gratis seperti Google Sites atau Wix. Banyak penyedia cloud menawarkan platform hosting dengan tingkat gratis yang memungkinkan Anda memiliki kontrol penuh atas konten yang Anda layani secara gratis. Selain itu, Anda juga dapat mengetahui bagaimana Firebase Realtime Database For Web bekerja dan terkoneksi pada postingan sebelumnya.
Google menawarkan layanan seperti itu, untuk hosting dari bucket Cloud Storage menggunakan Load Balancer atau CDN di depannya. Namun, ini dirancang untuk situs perusahaan berkinerja tinggi, dan tidak sepenuhnya gratis untuk digunakan. Untuk penerapan sederhana, Anda dapat menggunakan platform Firebase Google, yang dirancang untuk menyediakan backend ke aplikasi seluler, tetapi juga menyertakan layanan hosting konten statis fantastis yang dapat Anda gunakan.
Baca juga : Aplikasi Jadwal Aktivitas Menggunakan Firebase
Hosting Situs Web Statis di Firebase Gratis
Membangun aplikasi web selalu merupakan pekerjaan yang memakan waktu, terutama bagi pengembang pemula yang baru saja memasuki dunia pemrograman yang luas. Salah satu bagian yang paling menarik adalah saat aplikasi tersedia untuk dilihat semua orang. Menjadi lebah baru dalam pemrograman, kebanyakan pemula tidak memiliki pengetahuan tentang hosting, server, dan cara mempresentasikan proyek mereka kepada pengguna akhir.
Meskipun kami memiliki beberapa cara lain untuk menghosting situs web secara gratis seperti melalui Github, netlify, Firebase dianggap yang terbaik karena memberi pengembang banyak fungsi untuk dipilih. Di sini, kita akan melihat bagaimana seseorang dapat meng-host situs web statis mereka di firebase hanya dalam beberapa menit dan itu juga gratis.
Firebase adalah platform yang dikembangkan oleh Google untuk membantu pengembang membangun dan mengembangkan aplikasi seluler dan web lebih cepat. Di sini kami akan menggunakan layanan hosting untuk menyebarkan situs web statis kami karena ini adalah hosting latensi rendah yang secara otomatis akan mengamankan situs web kami dengan sertifikat SSL selain menyediakan banyak fitur lainnya. Dan yang paling penting, kosongkan hingga satu gigabit penyimpanan untuk satu proyek, yang lebih dari cukup untuk sebagian besar proyek.
Berikut ini persyratan untuk Cara Hosting di Firebase:
- Akun Gmail , yang akan diperlukan untuk masuk ke firebase.
- Node JS , diperlukan untuk menginstal Firebase-CLI (antarmuka baris perintah) yang akan menyebarkan atau situs web ke server.
- Anda harus siap dengan situs web statis. Situs web yang akan kami gunakan di sini adalah situs web tutorial.
Pada postingan kali ini, kita akan membahas bagaimana cara meng-host website dengan firebase dari kode visual studio. Untuk itu simak ulasan berikut agar Anda bisa mempraktekkannya dengan baik untuk meng-host proyek web atau aplikasi Anda di firebase.
Hosting Firebase Tutorial
Hosting web gratis menggunakan firebase, Firebase adalah platform Google untuk pengembangan aplikasi web dan seluler. Web hosting adalah salah satu dari banyak fitur yang ditawarkan oleh firebase. Berikut cara meng-host proyek web atau aplikasi di firebase. Ikuti tutorial di bawah ini sampai selesai agar Anda bisa memahaminya.
1. Membuat proyek baru dan instance web di firebase
Kunjungi firebase.google.com, masuk dengan akun Gmail Anda. Dan setelah masuk, buka konsol dan tambahkan proyek baru. Setelah itu buat nama proyek pilihan Anda di sini saya telah memberikan nama seperti contoh berikut 'tik-seo'. Dan lakukan langkah-langkah lain berikut dengan memilih Google analytics (untuk analisa data) dan proyek Anda akan siap dalam sepuluh detik. Seperti contoh seperti proyek yang kami kerjakan dengan cepat menggunakan database firebase pada postingan tentang Sign up dan Login User Authentication Menggunakan Firebase Web.
2. Buka situs web dalam IDE
Disini kita harus sudah mempersiapkan file project yang akan kita koneksikan ke firebase melalui software visual studio code. Jika Anda belum menginstallnya di komputer Anda bisa mendownload software visual studio code di website resminya disini: "https://code.visualstudio.com". Selain itu, kami juga membagikan source code gratis bagi Anda yang belum mempunyai bahan project untuk di hosting melalui firebase pada postingan kami sebelumnya tentang Cara Membuat Web dan Hosting Gratis di Github.
Sekarang buat folder baru dengan nama proyek Anda. Dan di dalamnya buat folder baru lagi dengan nama public. Di folder "publik", pastikan Anda memiliki file proyek web atau aplikasi yang siap tampil. Atau jika belum punya, Anda bisa mendownload source codenya terlebih dahulu. Setelah itu, buka software visual studio code di komputer yang Anda gunakan. Caranya cukup mudah, saya tidak perlu menjelaskan panjang lebar. Anda dapat mengklik tab dan pilih file > kemudian open folder dan sesuaikan project yang akan di hosting.
Dasbor proyek akan terlihat seperti ini. Di sini klik tombol web yang dilingkari merah pada gambar di bawah. Perhatikan bahwa proses ini akan membuat instance web dari proyek yang sedang kita bangun.
Setelah itu kita akan di arahkan ke halaman form ia akan menanyakan nama yang ingin kita berikan pada situs web kita (instance web). Anda dapat memilih salah satu, pilih 'Also setup Firebase Hosting', dan klik aplikasi daftar. Sampai disini kita belum perlu menambahkan Firebase SDK.
3. Pengaturan Hosting Firebase
Sampai disini kita akan mengatur hosting pada tampilan halaman "Dashboard Firebase" yang kita gunakan. Dan pilih menu Hosting disana. Untuk caranya juga cukup mudah tidak perlu dijelaskan panjang lebar. Anda langsung saja klik tombol Get started > Copy kode pada keterangan "Install Firebase CLI" seperti pada kode berikut ini.
npm install -g firebase-toolsBuka kembali visual studio code pilih tab pada menu header pilih tab Terminal > New Terminal > ketikkan perintah seperti diatas pada terminal visual studio code lalu Enter > klik tombol Next. Step berikutnya adalah kita login ke firebasenya. Dengan cara mengetikkan perintah "firebase login" pada terminal visual studio code lalu enter. Masih di tempat yang sama selanjutnya ketikkan perintah "firebase init" dan enter lagi. Pada keterangan yang ada di terminal akan muncul keterangan seperti berikut ini.
Are you ready to proceed? (Y/n)
Setelah itu langsung enter saja. Selanjutnya akan muncul beberapa pilihan menu yang akan kita tentukan. Karena pada posting ini kami hanya membahas tentang hosting firebase gratis maka pada menu pilihan yang ada sekarang pilih pilihan "Configure and deploy Firebase Hosting sites" dengan cara mengklik tombol panah bawah di keyboard. Selanjutnya tekan tombol Space pada keyboard dan Enter. Setelah itu masih pada lokasi yang sama akan muncul keterangan pada terminal seperti berikut ini.
Please select an option:
Ada beberapa opsi pada pilihan yang ditampilkan disana. Anda pilih "Use an existing project" kemudian Enter. Pada keterangan yang ada di terminal akan muncul keterangan seperti berikut ini.
Select a default Firebase project for this directory:
Pada keterangan selanjutnya Anda harus sesuaikan project yang sudah kita buat tadi. Kemudian klik Enter untuk menyesuaikan. Pada keterangan yang ada di terminal akan muncul keterangan seperti berikut ini.
What do you want to use as your public directory? (public)
Karena tadi kita sudah membuat folder public maka kita langsung Enter saja. Pada keterangan yang ada di terminal akan muncul keterangan seperti berikut ini.
Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
Pada keterangan di atas menanyakan tentang halaman yang akan kita muat single pages (banyak halaman). Karena kita akan membuat banyak halaman kita ketikkan "N" lalu Enter. Pada keterangan yang ada di terminal akan muncul keterangan seperti berikut ini.
File public/index.html already exists. Overwrite? (y/N)
Untuk itu Anda ketikkan "N" lalu Enter. Setelah semua selesai dan berjalan dengan mulus maka akan muncul keterangan Firebase initialization complete!.
Pada perintah yang kita ketikkan diatas maka secara otomatis firebase menambahkan beberapa file ke dalam folder project kita seperti file .firebaserc, .gitignore, dan firebase.json.
Pada langkah selanjutnya masih di terminal visual studio code ketikkan perintah "firebase deploy" untuk menghosting project yang kita biat ke public. Untuk membuka project yang sudah berhasil dihosting Anda bisa klik alamat Hosting URL yang diberikan dan open project. Maka secara otomatis firebase akan menampilkan halaman yang dibuat di web dan siap berjalan di browser. Dan alamat URL tersebut bisa diakses dimana pun karena web kita sudah di hosting.
Berikut ini contoh project yang kami buat dan hosting di firebase dengan alamat domain yang diberikan seperti berikut ini:
Setelah semua selesai Anda bisa kembali ke dashboard firebase dan klik tombol Continue to console.
Frequently Asked Questions About Firebase Hosting
Saya ingin menerbitkan situs web menggunakan firebase tetapi saya memiliki pertanyaan berikut:
- Berapa lama saya bisa menggunakan firebase gratis?
- Bisakah saya menambahkan nama domain khusus jika saya memilikinya saat menerbitkan situs web?
- Jika saya memublikasikan situs web saya dan mulai mendapatkan lebih banyak penayangan, apakah saya harus membayar firebase?
Jawaban
- Silakan kunjungi alamat web Firebase Pricing Site
- Ya, Anda dapat menggunakan nama domain khusus setelah mengimplementasikan situs web. Ada peluang di Firebase console "Tambahkan Domain Khusus".
- Anda harus membayar untuk layanan tersebut ketika Anda melebihi pembacaan gratis, dll. dalam paket firebase gratis. Tapi kamu harus pindah ke Blaze Plan dulu. Saat Anda tidak beralih ke Paket Blaze, Anda tidak akan mendapatkan jawaban lagi dari database dll. setelah melebihi paket gratis.
Apa saja yang dapat di hosting pada firebase?. Berikut ini beberapa hal yang dapat dilakukan oleh firebase untuk hosting:
- hosting firebase react
- hosting firebase angular
- hosting firebase tutorial
- hosting firebase price
- hosting firebase reactjs
- hosting firebase http
- hosting firebase gratis
- hosting firebase pricing
- hosting firebase php
Sampai disini jika Anda masih bingung cara untuk hosting di firebase melalui visual studio code.. bisa melihat video youtube melalui link di bawah ini. Berikut ini link video youtube yang kami rekomendasikan sebagai panduan belajar firebase hosting.
https://www.youtube.com/watch?v=XsQI7WS6p4oSebelum menggunakan Firebase, jangan lupa pastikan beberapa hal berikut ini:
- Pastikan yang Anda gunakan Firebase atau Realtime DB!? kami sendiri lebih menggunakannya sebagai keperluan prefer Firestore untuk store data.
- Kalau Anda menggunakan Authentication, tidak perlu membuat encrypt ataupun decrypt password sendiri, karena sebenarnya bukan itu kegunaan dari firebase.
Untuk mengenal firebase itu sendiri kita dapat membaca dokumentasinya langsung dari situs resminya. Semua sudah dituliskan disana lengkap dengan penjelasan fungsi dari firebase itu sendiri.
Baca juga : Cara untuk upload dan hosting file di github
Kesimpulan
Firebase Hosting menangani semua ini, termasuk penyediaan sertifikat SSL otomatis. Menyebarkan aplikasi juga hanya membutuhkan satu perintah dan hal yang sama berlaku untuk rollback. Agar semuanya berjalan lancar, Firebase membangun dukungan untuk CDN Fastly dengan pusat data di seluruh dunia langsung ke dalam solusinya.
Untuk pengembang yang tidak memerlukan domain khusus (mungkin saat mereka masih membuat prototipe aplikasi mereka), layanan ini menawarkan tingkat gratis. Setelah pengembang ingin menerapkan aplikasi ini, mereka harus menggunakan salah satu paket berbayar Firebase, yang sekarang mencakup dukungan untuk layanan hosting serta penyimpanan 10 GB dan transfer 1 TB.
Perlu dicatat bahwa Firebase tidak menjual layanan hostingnya secara terpisah dari layanan lainnya. Anda tentu saja dapat menghosting di Firebase dan menggunakan layanan backend lain untuk semua atau sebagian aplikasi Anda, tetapi sulit untuk melihat bagaimana hal itu masuk akal secara ekonomi.
Demikian postingan kali ini tentang Cara Hosting di Firebase Dari Visual Studio Code. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk bagikan artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
