Host A Static Website Using Firebase Hosting Service - Part One

Introduction

 
Google cloud provides a hosting service. Using that service, we can host static web application easily, free and securely.
 

Why you should go with Firebase Hosting?

 
Firebase hosting is not only free service, its an easy way to host as well, as its default provides the SSL certificate so that your website will be hosted securely with HTTPS.

Many of the hosting servers are in paid with slow speed. But Firebase hosting service will provide you impressive good speed across many locations without the need of separate CDN.

For Configuration or Hosting, we required the following:
  • Google Account: For Firebase setup account in the console.
  • Domain Details: Map you hosting service with the domain, There are many providers available, you can purchase a domain from any provider.
  • Firebase-CLI: you can install Firebase-CLI using the below npm command

    npm install -g firebase-tools or yarn global add firebase-tools

Get started hosting a static website

 
Step 1 - Configured Firebase project on Firebase console
 
Open Firebase console - Sign-In using Google account - Create New Project - Dashboard
 
Host Static Website Using Firebase Hosting Service 
Host Static Website Using Firebase Hosting Service
 
Host Static Website Using Firebase Hosting Service
 
Host Static Website Using Firebase Hosting Service
 
Host Static Website Using Firebase Hosting Service
 
Step 2 - Install Firebase-CLI on the local machine
 
npm install -g firebase-tools or yarn global add firebase-tools
 
Step 3 - Configuration of Firebase-CLI on the local machine
  • Create a new folder in your computer, for example, I've created one folder with name Firebase-WebApp in Drive D
  • Open CMD(command prompt) window and reach to path D:\Firebase-WebApp
  • Now write-down the command firebase login

    Host Static Website Using Firebase Hosting Service

    Host Static Website Using Firebase Hosting Service

  • This will redirect you to sign-in page in the browser, where you just need to simply sign-in.

    Host Static Website Using Firebase Hosting Service

  • After successfully allowing the permission, you will get below message on the browser

    Host Static Website Using Firebase Hosting Service
Step 4 - Initialize the project
  • Initialize the project using firebase init command from cmd prompt window, After entering init command in command prompt firebase provides you few options to go with, in those options you need to choose to host option and then click Enter to choose.

    Host Static Website Using Firebase Hosting Service

  • Once the Hosting option is selected, they'll provide the option to choose an existing project or create a new one. As we have already created a sample static project, you need to just choose the existing option and click on enter.

    Host Static Website Using Firebase Hosting Service

  • Then few configuration settings are required to perform you just need to select yes or no based on your requirements. On the final step, they will ask to create a new inde.html file or be with index.html file, once you've selected your option your application is ready to go live on your localhost server.
    Host Static Website Using Firebase Hosting Service

    Host Static Website Using Firebase Hosting Service
STEP 5 - Publish website on localhost
  • After configuration settings for a web application, we need to enter firebase serve command in command prompt, this command will host a web application in localhost with 5000 port number.

    Host Static Website Using Firebase Hosting Service
  • Once your application hosted on http://localhost:5000, you can review it in the browser by opening this.

    Host Static Website Using Firebase Hosting Service
Step 6
 
Deploy on the live firebase server:

Host Static Website Using Firebase Hosting Service
 
Step 7
 
After entering the firebase deploy command, our application hosted on live server. you can review by given link address in the console.

Host Static Website Using Firebase Hosting Service
 

Summary

 
Here is the step by step explanation of hosting a static website using the firebase hosting service. In the next article, we will learn how to map custom domain web application which we deployed earlier.