June 11, 2020

Host your site free on firebase hosting

By Mohit Agrawal

Do you know that you can host your website completely free on a secured firebase server?

Introduction

Hello 👋 , in this tutorial I will cover everything about firebase hosting for beginners. In the end, you will be able to host your website on firebase hosting which is completely free ( the starter plan ). I will try to cover all frequently asked questions around this topic. So let’s get started.

What is firebase hosting?

It is a free (basic plan) hosting service provided by Google. It provides fast and secure hosting for the web application.

Implementation

I will start with basics assuming that you are completely new to the firebase. So let me give you a brief idea about the implementation flow which we are going to do.

  1. Creation of the project on firebase portal
  2. Installation of firebase CLI command
  3. Deploy your website to firebase hosting

1. Creation of the project

Go to the Firebase website and click on the “Add project” button. Give the project name whatever you want, I have named it “Firebase hosting demo”. I have switched off the analytic toggle at step 2. (Firebase analytics is a different topic). Check the below GIF for more clarification.

firebase_project_creation
Steps for creating firebase project

2. Firebase CLI

In this step, I will show you how to install the firebase CLI command to your machine. It is used to deploy your website source code directly to the firebase hosting server.

Open the project which you have created just now. Look for hosting options at the left side menu and click to Get started.

firebase_hosting_1

Now its time to install some commands so fire up your terminal.

Firebase CLI needs the npm tool. If you do not have npm installed then check this article https://www.npmjs.com/get-npm

Open your terminal and “npm install -g firebase-tools“.

npm install -g firebase-tools
firebase_hosting_2

3. Deploy your website to firebase hosting

In this step, I will show you how to deploy a website to the hosting server. Choose a secure place and create one folder with the name “FirebaseWebsite”. Now open this folder in the terminal and run this command.

firebase login

This command helps to connect the local system to the firebase account. So now we have connected to the firebase but how firebase will know which project we want to work on? So for that run this command in the same folder.

firebase init
firebase_hosting_3

You will get something like the above screenshot, use the down arrow key and go to the ‘Hosting’ option in the terminal, then hit the Space bar to select the option. Now hit Enter and select the option “Choose existing project option” like the below screenshot.

firebase_hosting_4

When you select the option ‘Use an existing project’ then It will list out all the firebase projects linked to your account. Choose your project and go-ahead to the next step. Now it will ask for the basic setup, for now, you can go with default settings just hit enter. Check out the below images for the reference.

firebase_hosting_5

Now run the deploy command from the same project folder.

firebase deploy
firebase_hosting_6

Woo.., You have successfully deployed your first website to the firebase server. You can check the website by clicking on the link. You can find your link on this page ( below is the screenshot). Let me know if you get any errors in the comment section.

firebase_hosting_7

Note: You have published the default index.html generated by firebase. You design it later according to your need.

firebase_hosting_8

The above image shows the folder structure of the website created by firebase. You can make changes in the index.html file according to your need to deploy the website again using the same deploy command.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!


Frequently asked questions related to firebase.

  1. What is firebase hosting service?

    It is a free (basic plan) hosting service provided by Google. It provides fast and secure hosting for the web application.

  2. Does firebase support PHP?

    No, firebase does not support PHP/MySQL.

  3. Is firebase hosting free?

    Yes, it is free (Spark plan) but you will get only 10GB of storage. If you want more then you can go with the paid service.

  4. Does firebase provide free SSL certificate?

    Yes, firebase hosting service comes with the free SSL certificate.

android android beginners tutorial android tutorial Animation API call API call in iOS async asynchronous cardview custom switch custom ui dark web dark web links deep web deep web links Dynamic gradient view facebook messenger firebase hosting firebase hosting tutorial firebase remote config firebase tutorials flutter flutter for beginner flutter tutorial flutter UI tutorial hacking hacking tutorial hashcat iOS ios tutorial ios ui tutorial kotlin listview in flutter Lottie animation Messenger for kids review onion links Roll the Dice app swift tech news tor tor browser tor links UISwitch wifi wifi hacking