Deploying my first React web app to Firebase 🔥

It was on Saturday afternoon when I was banging my head for not being able to deploy my project to a server. I'm pretty much new to the React and the Front-end world where I'm learning React from Udemy for the past one month.

After completing half of the course, I decided to make a simple app out of the knowledge I learned. I named it WhoCares? which you can find it on GitHub. I was in a hope to deploy the project to the web so that I can show that to my friends. That's where it all started.

The woe

It was for the first time I used Webpack as the bundler. I usually deploy my Laravel projects on Digital Ocean & I have also used Heroku for some Node projects. So, I thought of deploying this app on any one of these. I surfed over the internet. The result is that I cannot find a single resource that doesn't use node backend to deploy a React App or the steps are too hard for me to follow and correlate with my application. I finally thought of dropping the idea for deployment after spending over 4 hours in it. That's when I got a suggestion from my friend to deploy it to Firebase.

The Deployment

In this section, I would like to write about the steps I followed which took about 20 odd minutes to host my application. Before that, I'll share my webpack config file.

1. Configure

To get started with Firebase Hosting, log in to the Firebase console, navigate to the Hosting panel of your project's dashboard and click Get Started.

Next, we'll install the Firebase CLI (command line tool) and initialize your site.

Install the Firebase CLI

Once you have Node.js and npm installed, you can install the Firebase CLI via npm:

npm install -g firebase-tools

This installs the globally available firebase command. To update to the latest version, simply re-run the same command.

Initializing your site

If you have an existing Firebase project you'd like to deploy, cd to the project's root directory and run:

$ firebase init

The firebase init command creates a firebase.json configuration file in the root of our project's directory. Our firebase.json Hosting configuration will look like this:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

2. Build

Using webpack, you can bundle all of your project components into a single file by using the following command on your terminal,

$ webpack

This will create a bundle.js file which can be imported into the index.html file where both of the files will reside in the public folder.

Project Structure

 Root

    Public

        -bundle.js

        -index.html

    Src

        React Components

1. Deploy

To deploy your site, simply run the following command from your project directory:

$ firebase deploy

This will deploy your project to <YOUR-FIREBASE-APP>.firebaseapp.com.

Comments

[Richard Orelup]

Thanks, I wasn't aware that you could host your app on Firebase. I was just familiar with their realtime database and Firestone. It's now added to my list of options for hosting.

[Sathish]

I'm glad that it'll help you. 💓

[Saurabh Sharma]

I have always used netlify.com for hosting react.js projects. Never thought that I can use firebase too.

[Sathish]

I never knew there is something called netlify! 😂

[Justin L Beall]

I like your GitHub handle!

This is an insanely simple and powerful article.

In a pinch, you can throw HTML/js files up on AWS S3.

[Sathish]

Thanks.