Setting up a web app project using Google Firebase and react.js

When I looked for a tutorial how to setup a Google Firebase project using react.js, I could not find many tutorials. Maybe because it is trivial if you are familiar with Firebase and/or react.js.

Basically, what you need to do to setup Google Firebase and react.js are just two steps:

  1. Create a react.js application using

create-react-ap nameOfApp

  1. Initialize a firebase project within the folder of your react.js application with some specific settings

Here, I assume that you have node.js already installed on your machine. I am running everything on macOS.

In the following I will describe the two steps in more detail.

1. Setting up a react.js project

I found the following tutorial really helpful to create a first react.js app. Thus, instead of repeating it here, I recommend to follow the guide:

https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc

However, at some point I had an issue and had to install:

npm install --save react-router-dom

But the everything was fine.

Important commands:

  • npm start for starting your app on your local machine

  • npm run build to build optimized code which will be put in the folder build

2. Setting up Google Firebase project

The following steps have to be executed to setup a Google Firebase project. The source of this description can be found here: https://medium.com/@larrysigo/hosting-your-react-app-with-firebase-hosting-add1fa08c214

First you gave to install the firebase-tools and initialize firebase in your project.

Install firebase tools by npm install -g firebase-tools which install firebase globally so it can be used in the ternimal.

Second you have to initialize the firebase project in your project folder. Navigate there in your terminal and enter the command firebase login, then login and run the command `firebase init.

Follow the steps on the screen:

  • Select the Firebase features you want to use. Here, I chose Database, Hosting nd Cloud functions.

  • Firebase command-line interface will pull up your list of Firebase projects, where you can then choose the corresponding project using the up and down keys. Here all projects created in the frírebase online frontend will be listed.

  • Keep the default for the Database Rules file name and just press enter.

  • Pay attention to the question about public directory, which is the directory that will be deployed and served by Firebase. In our case it is build, which is the folder where our production build is located. Type build and proceed. If you make a istake here, you can change the public directory in the file firebase.json

  • Firebase will ask you if you want the app to be configured as a single-page app. By default it is “no” — in our case, we could really benefit from the configuration, so we’ll type “y” and press enter. Later on you’ll be able to use react-router and the URLs will just work.

  • Firebase will warn us that we already have “build/index.html,” which we don’t want to be overwritten. Type “n” and press enter to keep our own “index.html,” generated by our build process earlier.

Further material: