Firebase Hosting Tutorial: Step By Step Guide To Use Firebase Hosting

By Ajay Malik on February 8, 2019

Firebase Hosting Tutorial: Step By Step Guide To Use Firebase Hosting

Firebase Provide a Free Hosting Space for your static HTML Website With Tons of Great Features.
People Use Firebase Hosting to host there small Niche & Single Page websites.
This Help them save some money in hosting and also They Know Benefits of using firebase hosting.
Do you wanna use Firebase for your next website?
I myself use Firebase Hosting to Host a few Page niche website on it.
Today, I’m going to Give You a Brief Tutorial About Firebase Hosting and How to use firebase to make your free website.

What is Firebase Hosting?

Firebase is mainly designed for Web App developers, Most developers Use it to design web-based app for mobile device.Firebase Hosting is production-grade web content hosting for developers. With Hosting, you can quickly and easily deploy web apps and static content to a global content-delivery network (CDN) with a single command.

Let’s start Without wasting a single second.

Advantages of Firebase Hosting

Firebase Hosting Has many Advantages Over All Other Hosting with advantages it also has some major drawback for non-developersHere a List Of Things offered by Firebase Hosting:
Free SSL Certificate : All Authority website Use SSL certificate to secure their website from spies and hackers. In normal hosting, hosting provider charges a medium amount for an SSL certificate. But in Firebase you’ll get inbuild SSL certificate without any configuration. So that all your content is served over https.
Fast content delivery : Each file you upload is cached on SSDs at CDN edges around the world. No matter where your users are, the content is delivered fast. You Don’t Need an additional CDN for your website.
Rapid deployment : Using the Firebase CLI, you can get your app up and runn in seconds. Command line tools make it easy to add deployment targets into your build process.
One-click rollbacks : Quick deployments are great, but being able to undo mistakes is even better. Firebase Hosting provides full versioning and releases management with one-click rollbacks.
Free Web Address : Like Blogspot, Firebase Also gives you a Free Web Address through which Your Audience Reach Your Web App
Custom Domain : You can also Use Your Own Custom Domain with Firebase Hosting.

Difference Between Firebase Hosting and other Hostings

FeaturesFireBase HostingOther Hosting
Free SSL
FireBase Hosting:
Other Hosting:
Not Present
In-built CDN
FireBase Hosting:
Other Hosting:
Not Present
FireBase Hosting:
Not serve Dynamic content
Other Hosting:
Wordpress, Joomla and Others
Best Use
FireBase Hosting:
Single-page website or < 50 Pages
Other Hosting:
Blogging + Website
FireBase Hosting:
1GB (Free) / $0.026/GB (Additional)
Other Hosting:
Depend On Plan
GB transferred
FireBase Hosting:
10 GB/month (Free) + $0.15/GB (Additional)
Other Hosting:
Depend on Plan
Free Domain
FireBase Hosting:
Other Hosting:
Not Present

When To Use Firebase Hosting?

Form Above Table, you’ll know that firebase hosting isn’t good for Blogging or for people who didn’t know HTML/CSS/JS. So, There Are Some Special Thing Which you have to consider before using firebase hosting:
Technical Knowledge : If you Didn’t Have any technical Knowledge of Node.js, Html, CSS or Js. Than Firebase isn’t for you or you can Hire Some to make a website for you on the firebase.
Small Niche Sites : If you’re thinking of starting a niche site which Isn’t Wide Than You can Use Firebase Hosting for Your 10-50 page Niche Site.
Single Page Website : if you’re a Seller and thinking of a product page for your product. then you can make a single page website With the help of Firebase.
E-Commerce : You can Run Your Own Small E-commerce Store With The Help of Firebase Hosting.
Contact Forms : You can Use Firebase Hosting to Host Google Form or other contact forms for your work.
portfolio : You can Host Your portfolio By Using Firebase Hosting

How To Setup Firebase Tools?

For developer Accessing Firebase Hosting is Very Easy. Follow Below Steps To Setup Your Firebase Hosting Account:

  1. Go to Firebase Console > Start project
  2. firebase console
  3. Now Choose Your Project name, Project ID (Your Project ID Also is your subdomain address as and country > Create Project
  4. firebase setup
  5. You Need To Install Node.js to Access Firebase CLI. Download Node.Js from its official website and install it.
  6. Once You Successfully Install Node.js, now Open your command prompt / Window PowerShell(For Win 10) by Pressing Win + r > type cmd and click enter & run following command:
    npm install -g firebase-tools

    It’ll take some time to install Firebase tools.

  7. install firebase
  8. Once You Successfully installed firebase tool, Now run following command (in command prompt) to login into your account:
    firebase login

    This command opens Google sign-in tab into your browser. Sign-in with your Google account (linked with firebase project).

  9. Now You successfully Login into your Your Account and You’re Firebase Tool is ready to Use.

Create Your First Website With Firebase Hosting

To host a website on firebase Your PC must have Firebase tools installed with login to your account, as we shown in above steps.
Follow Below Steps to Create a Website with Firebase Tool:

  1. Create a New Folder on Your PC or go to exiting one where you want to create your website.
  2. Now Go into That Folder and Open Command Prompt by clicking Left Shift + Right mouse click as shown in below image
  3. make firebase website
  4. Run Following Command in Command Prompt:
    firebase init

    This Command asks you to create firebase project in that directory, Type Y, and Press Enter.

  5. firebase init command
  6. Now a List of option appear in front of you, Use arrow key to move to Hosting and click spacebar to select it and then press enter.
  7. select firebase hosting
  8. Choose Your Project Name which you create in firebase console and Press Enter
  9. select firebase project
  10. After Selecting Directory it’ll ask you to choose your directory type “public” and press enter, this’ll create a folder named public in that folder.
  11. Second, it’ll ask you whether you need a single-page app or not, enter y for single page app type n for not a single page app and press enter
  12. Now it’ll show you that Firebase initialization complete!
  13. complete firebase project
  14. Now Go To Public folder where You found your Index.html Edit Index.html with HTML/CSS/js to make your website.
  15. Once You Edit Index.html now follow below command (In that same command prompt) to deploy Your Website
    firebase deploy

    It’ll Deploy Your Website to firebase hosting from where you can access your website from

  16. deploy firebase website

Preview Your Website

You can Also Preview Your Website Without Deploying By using Following Command instead of firebase deploy

Firebase Serve

This command will run a local server for Your App.

firebase serve command

Now Go to your browser and enter http://localhost:5000 in URL bar to Preview your Website.To Stop This Command Press CTRL + C in command prompt.

How to Update Your Website on Firebase Hosting?

Want to Update Your Firebase Hosted website? Don’t worry You Can Do it in seconds Just Update Your Index.html in public folder and Run Command

Firebase Serve

If You Deleted Something From Your Index.html it’ll also delete from that server. Want to Revert back Your Update?
Firebase Give Feature like One-click rollback to Revert change if you made any mistake.To Revert to Back to Your Old Version go to Firebase console > Develop > Hosting and select your old update and click “Rollback“.

firebase rollback feature

How to connect Custom Domain With Firebase Hosting?

You can Connect Your Custom Domain With Firebase Hosting Go to Firebase console > develop > hosting > Click on connect domain.

custom domain firebase hosting

Enter Your Domain Address setup redirects as shown in above image you can also redirect non-www version to www version and click “.Continue“.
In Next Step, You Have To Add given text Record To Your Domain DNS through your domain registrar to verify your domain address.

firebase hosting custom domain verify

Once You Verify Your Domain Address, Your Website is Ready To Use.

Customize Hosting Behavior

You can Customize Hosting Behavior By Editing Firebase.json present in your Main Folder.
You Can add a redirect to your website using firebase.json. URL redirects can be specified by defining a redirects section within hosting in the firebase.json file:

"hosting": {
  // Add the "redirects" section within "hosting"
  "redirects": [ {
    "source" : "/foo",
    "destination" : "/bar",
    "type" : 301
  }, {
    "source" : "/firebase/*",
    "destination" : "",
    "type" : 302
  } ]

In Above Example We are redirecting all /foo folders to /bar and all pages after /firebase/* to
Custom, file specific, headers can be specified by defining a headers section within hosting in the firebase.json file:

"hosting": {
    // Add the "headers" section within "hosting".
    "headers": [ {
      "source" : "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
      "headers" : [ {
        "key" : "Access-Control-Allow-Origin",
        "value" : "*"
    } ]
    }, {
      "source" : "**/*.@(jpg|jpeg|gif|png)",
      "headers" : [ {
      "key" : "Cache-Control",
      "value" : "max-age=7200"
      } ]
    }, {
      // Sets the cache header for 404 pages to cache for 5 minutes
      "source" : "404.html",
      "headers" : [ {
      "key" : "Cache-Control",
      "value" : "max-age=300"
      } ]
    } ]

in Above Code, We are adding CORS and cache header in our website.


Firebase Hosting is a great alternative To all those expensive hosting plans. If You’re a Developer and want to make your Own Niche Site. I recommend You to Use Firebase Hosting Instead of all other Option.Firebase Hosting is fast, Easy To use, Secure. It is the best hosting for a developer.

4 responses to “Firebase Hosting Tutorial: Step By Step Guide To Use Firebase Hosting”

  1. Really Great Tutorial…

    • Ajay Malik says:

      Thanks Piyush!
      I hope this tutorial help you to deploy your html app on Firebase 🙂

  2. Abhinay says:

    Can you explain how to add 404.html file?

    • ajay says:

      ‘firebase init’ command automatically create a 404.html along with index.html in your project directory you can modify that file in your own way.

Leave a Reply

Your email address will not be published. Required fields are marked *