Deploying my first React web app to Firebase 🔥
Tags: react, webpack, firebase, development
Published: 2018-02-12 13:36:25

---
title: Deploying my first React web app to Firebase 🔥
published: true
description: 
tags: #react #webpack #firebase #development
---

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?**](https://who-cares04.firebaseapp.com/) which you can find it on [**GitHub**](https://github.com/TheWebDevel/whocares). 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**](https://webpack.js.org/) 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.

![Imgur](https://i.imgur.com/LcAYRcm.png)


#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:

```json
{
  "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

#3. 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`.