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!


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
  • 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.

Now that we are done setting up our firebase project, the next step is to go into our react application and perform the steps below:

  • 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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tracking Police Brutality Using React

Basic Overview Of React

Euler.Tools Token

React-Flow :All You Need To Know In This Library.

a simple customization.

How to use React Hooks to give functional components their own “State”

Handle unrecognized pattern of RabbitMQ with Nestjs server-side

Javascript Problem-solving

It is Christmas !, but we do not rest.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bruce-Crabbe

Victor Bruce-Crabbe

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.

More from Medium

Create Revealing Text Animation with React & GSAP

How to setup React Native and create a simple To-Do App

Fetching Data from Firestore and save it inside the Context

React Native: The Basics