UI Development

Firebase Hosting

Introduction

Firebase

Firebase is a web application and mobile development platform that provides us with various server side features. It means, firebase provides us with all of the backend features which frontend developers would have to build themselves. So now the developer can focus on the user experience for the app rather than setting up the server on their own. Firebase includes features like cloud services, authentication, databases, hosting and lot more. Let’s have a look at the advantages of using firebase.

Advantages of Using Firebase  

  1. Firebase let’s us quickly create all the aspects of an application’s backend then whether it is file storage, database, API, user management etc, everything can be done just within a few minutes.
  2. All the services are hosted on cloud requiring very little effort from the developer end which means, the developer can now focus on front end instead of getting into the complexities of developing backend.
  3. Firebase is always available online which means collaboration among developers is much simpler.

In this blog, we will talk about one of the very promising features of firebase which is firebase hosting. Let’s dig into that.

Firebase hosting

Firebase hosting is one of the many services provided by firebase through which we can deploy our webpage (whether static or dynamic) to firebase server which will then host our application. In this blog, we are going to provide the user with all the necessary steps required to host an app on firebase. But first question that comes to mind is, why are we choosing firebase out of everything? Let’s get to that. 

Why I love firebase hosting?

  1. Firebase hosting serves the given content over a secure HTTP connection, for which users have to pay otherwise.
  2. Deploying websites on firebase can be done in few steps and is very easy to use.
  3. Firebase hosting is also very fast and can work well for different geographic locations.
  4. Last but not the least, it is free! All we need to do to host our website on firebase is, to just sign up with any google account and we are good to go.

Now, as we are clear with why we have chosen firebase hosting, let’s move on to the steps required for hosting. 

Getting started with firebase hosting

Prerequisites:

There are few things required before we start with the hosting

  1. Install Node.js: Make sure you have Node.js installed in your machine. This will be required to install Firebase-CLI on the machine.

  2. Sign up for free account: To get started, first go to the link https://firebase.google.com/ and sign up for free with google account. So, make sure you have a google account, if you don’t, then create one.
  3. Go to console: After signing up, click on the link “Go to console” present on the homepage of firebase to go to the console where the hosting will take place.

We are all set up, let’s start hosting.

Step-1: Creating a new firebase project 

After we are done with the prerequisites, let’s login into firebase and go to the console.

Add a new project and give it a name (Here we have given firebase-hosting-tutorial name to our project).

Click on create Project.

Step-2: Getting started with Firebase hosting

Once the project is created, it will take us to a control panel which will contain the whole backend settings for our application.

Select Hosting option and get started.

We will get additional 3 steps that are required to set up for firebase hosting.

  1. Install Firebase CLI.
  2. Initalize your project.
  3. Deploy to firebase hosting.

Click “Next” on each of these steps and “Continue to console”, we will understand each of these steps in detail in this blog.

We will now see a dashboard with the link where the app will be hosted once deployed and a message stating “Waiting for release”.

Step-3: Install Firebase-CLI

Let’s install firebase CLI tool on our computer.

We will go to command prompt and install firebase tools using node package manager by running the following command:

The version of firebase at the time of the blog is 8.4.3

 Step-4:  Firebase login

Once we have installed firebase on our machine, we have to login to firebase locally. In the command prompt itself, run the following command:

We will get a sign-in page pop-up in the browser and it will log you in with any chosen google account (Make sure to sign-in into the same account that you have used for firebase signup).

After login is done, it will locally create a link between our firebase and localhost (i.e., localhost and the server).

Step-5: Initializing Firebase

Now the next step is to initialize firebase project locally inside the folder where our webpage is located.

Let’s go to our code terminal (This is to make sure that we are in our code directory).

Once we are in the correct directory, we will run the following command:

To initialize firebase, we will be asked a few questions.

Yes, we are. Type Y and enter.

For next question, select the Hosting option (we can use arrow keys to navigate to the desired option, spacebar to select the option) and press enter.

For the next question, we have already created a new project on our firebase console earlier (Go back to step-1). Let’s link our codebase to the project present on firebase. Select “Use an existing project” option and we will be provided with the different project options that already exist on our firebase.

We will select the “firebase-hosting-tutorial” project that we created for firebase hosting and click enter.

Then this will ask us the directory that will get pushed to the firebase service. Let’s leave it to default (i.e., public) or you can determine any directory path that consists your project. Also, in your existing project, if you are using a bundling tool like webpack or parcel, you must select the distribution folder configured in your bundler configuration. In which case, there will be another question that Firebase CLI asks, whether or not to override the index.html. Its safe to select ‘No’ for that question.

Click enter and next question will appear.

Enter “y” if you want firebase to redirect to index.html always (which is usually the case when application is based on Vue or React based projects) or enter “N” if the application is not a single page and you want to redirect to different pages.

The configuration is done and our firebase is initialized.

It will create a public folder which will have a default (dummy) index.html file. We can delete that (or keep it in case you haven’t created one).

There are few other files created. Let’s go through each of them in depth.

Firebase.json:

It will contain a hosting property that has different options. We can also add more options to it. The default options available are:

The type of the directory

“public” is the default directory here, you can change it to any directory that consists your projects.

 Ignore

It contains the files that we want to ignore

Rewrites

It contains the “source” that determines where the user will go to and “destination” that determines where they will be redirected to if they go to that source (Here all sources will be redirected to index.html).

Configuring Redirects

URL redirect is one of the optional attributes which is used to prevent broken links if you’ve moved any page or if your webpage is not a single page application.

We can specify URL redirects in following manner:

It contains an array of objects (called “redirect rules”) where we specify a URL pattern that, if matched to the request URL path, triggers Hosting to respond with a redirect to the specified destination URL.

It contains three properties that are:

Source: It is the requested URL path
Destination: It is where the user is redirected for the given requested source path
Type: Type of HTTP response code. Use type-
301– For permanent redirect
302– For temporary redirect.

Go ahead and type the requested source paths (/myart, /products) to check how redirects work.

https://fir-hosting-tuto-be5e6.web.app/

Firebase source file(.firebaserc):

This file just tells which project this is linking to in the backend.

Note: In addition, we are also provided with a gitignore file in case we want to link our code to git.

We now have the necessary setup ready for hosting the site. Only, we have to check whether or not the public(or the folder that is configured in bundler) has all the project related files. In my case, I’m not using any bundler and I had selected “public” folder during the firebase setup. My project’s public folder looks like this.

Step-6: Additional info for development (Checking the setup)

Firebase also comes with a local development server, where we can test our webpage locally.

Use the following command to run the code on the local server provided by firebase:

If you are using a bundler, it would be a time consuming process to build your code everytime before serving it using the “firbase serve”. So, we can have a save, if your bundler tool has a watch option. For instance, Vue-CLI has a watch option, so does webpack. The watch command continuously watches for the changes and builds the code to the public folder, firebase serve picks the code from the same.

Step-7: Deploying the project

We have reached the final step towards firebase hosting and only deploying is left. In the code terminal let’s run the following command:

It will deploy our code present in the public folder (or the folder that is configured in bundler) to the firebase server.

After it is done, we will be provided with two links in the terminal, the project console and the hosting URL.
Project console will open our firebase dashboard (Step-2), where the project is located.

The Hosting URL is the URL of our webpage where our code went live.

Click on the link to directly go to the Hosting URL and we are done with hosting of our project!

As we have reached the end of the blog and we have hosted our webpage successfully, we deserve a bonus step.

Bonus Step: Rollbacks and new versions

On the firebase hosting dashboard, we will be provided with few categories.

The domain category:  It contains the link to our webpage. By default, firebase projects will have subdomains on web.app and firebaseapp.com which serve the same configurations and deployed contents. We can also add custom domains (we are not focusing on that here).

When we click on the URL, we will be taken to our website (it redirects to your live website) that just got deployed. And hence, we know that our webpage is successfully hosted on firebase.

The release history category: It contains the Status of the deployment of the project, the time at which it was deployed, who deployed it and the number of files that were deployed.

Now, let’s talk about rollbacks and versions that this bonus step is all about.

With firebase, we can make changes to our code and deploy the website as many times as we want! But how?

All we need to do is run the command “Firebase deploy” and it will host the changes to the new version of the website.

But what if I want to go back to my previous version?

Firebase also provides us rollback option through which we can go back to any of the older versions when we desire or come back to the newer version again.

You will find  the rollback option when you click on the ellipsis present on your release history.

Conclusion:

Firebase provides us different options for hosting the webpage and is very easy to use.

We can host the same app any number of times that we desire and Firebase will provide us with the history of all the releases of our deployment.

Also, the rollback feature helps in returning to any version of the code and our site is ready for the whole world just in few steps.

Below is the link to my static webpage that I hosted using Firebase for this tutorial and also a link to the day-night switch app from my previous blog which was hosted using firebase as well.

https://fir-hosting-tuto-be5e6.web.app/ 

https://day-night-switch.web.app/

About The Author