Firebase Hosting Tutorial: Your First Website on Firebase (Best Guide)

I would always like to Use platforms backed by Google Like Blogger, Gmail, Open suit and many more. The main reason behind this is they all bug-free and secure to use.


Firebase is a great Tool for the developer, It offers you many things to play around like Real-Time database, Cloud storage, Free Hosting and many More.

Today, I'm going to Give You a Brief Tutorial About Firebase Hosting and How to use firebase to make your free website.

firebase hosting tutorial

Hosting an also a great reason behind slow loading website, The Most website which is hosted on Shared Hosting or any other cheap Hosting load slow due to That reason. Most People Buy Such Kind of Hosting in There starting Year of blogging when they didn't know much about hostings and other things. Firebase Hosting is a Free Tool backed by google and used by millions of developers accross the globe.


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.


Advantages of Firebase Hosting

Firebase Hosting Has many Advantages Over All Other Hosting with advantages it also has some major drawback for non-developers

Here 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

With Advantages firebase hosting has some major drawbacks for blogger. Let's compare Firebase Hosting With Other Hosting Provide:





FeaturesFireBase HostingOther Hosting
Free SSLPresentNot Present
In-built CDNPresentNot Present
technical KnowledgeHTML/CSS/Js basicNo Need
CMSNot serve Dynamic contentMany CMS Present (WordPress)
Best UseSingle-page website or < 50 PagesBlogging + Website
Storage1GB (Free) / $0.026/GB (Additional)Depend On Plan
GB transferred10 GB/month (Free) + $0.15/GB (Additional)Depend on Plan
Free DomainPresentNot 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 yourID.firebaseapp.com) 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 yourID.firebaseapp.com
  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.

Redirects

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" : "https://firebase.google.com",
    "type" : 302
  } ]
}

In Above Example We are redirecting all /foo folders to /bar and all pages after /firebase/* to https://firebase.google.com.

Headers

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.

Conclusion

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.


Sunday, March 18, 2018 2018-06-12T12:29:35Z » » Firebase Hosting Tutorial: Your First Website on Firebase (Best Guide)

2 comments:

  1. Replies
    1. Thanks Piyush!
      I hope this tutorial help you to deploy your html app on Firebase :)

      Delete

Share