Hosting a React App on Firebase(Free!)

Photo by Joshua Aragon on Unsplash

Nowadays, there are numerous hosting services out there you can choose from as a developer to host your awesome application on the world wide web for your friends and the world to see. We have hosting services such as Heroku, Netlify, GitHub pages, Firebase, etc just to mention a few that come with a free plan to meet your basic needs to kick start a project.

In today's blog, I will touch on how to host your React app (or any other app or website) on firebase for free. Let’s begin!

Introduction

What is firebase?

Firebase is a platform for creating mobile and web applications. Developed in 2011 by an independent company but was later acquired by Google in 2014.

Firebase comes with services such as authentication, real-time database, cloud firestore(NoSQL database), storage, hosting, etc. These services allow you to build a complete full-stack mobile or web application without the need for a backend service.

Creating an account on Firebase.

For you to have access to Firebase services, you must first of all create an account. If you are new and don’t have a firebase account, quickly perform the following steps below:

  • Visit firebase.google.com
  • Click on the “Get started button” on the landing page
  • Enter your email and password
  • Done

Spin up a firebase project!

Right after creating an account, click on the “Go to console” link on the menu bar to open your firebase dashboard. Follow the steps below to create a project:

  • Click on the Add project card to create a new project.
  • Enter a project name
  • Enable google analytics for the project (optional)
  • If you enabled google analytics, select the default firebase account to be used as google analytics account
  • Finally, click on the create project button to finish the process.
  • Firstly, install firebase SDK globally by running the command npm i -g firebase-cli
  • Next, get the production build of your react application by running the command npm run build
  • After, initialize firebase in your react application by running the command firebase init
  • A list of options will be displayed(Database, Firestore, Functions, Hosting, and Storage) use the up and down arrow keys and navigate to Hosting. Hit the spacebar key on your keyboard to select firebase hosting.
  • After selecting hosting, firebase would like to know which folder you would like to deploy to. Type in the name of the build folder which was created in step 2(build).
  • Type yes or y as a response to the question, configure as a single-page app.
  • Next, type no or n to the question “File build/index.html already exits. Overwrite?”
  • Last but not the least, run the command firebase use to select which firebase project to deploy to.
  • Finally, run the command firebase deploy to publish your React App.

That’s it, guys! This has been quite longer than I expected but I hope it helps someone out there. If you have any comment or suggestions, please don’t hesitate to draw my attention by commenting in the section below, thank you!

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.