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:
Create a react.js application using
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:
However, at some point I had an issue and had to install:
npm install --save react-router-dom
But the everything was fine.
for starting your app on your local machine
to build optimized code which will be put in the folder
npm run 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
which install firebase globally so it can be used in the ternimal.
npm install -g firebase-tools
Second you have to initialize the firebase project in your project folder. Navigate there in your terminal and enter the command
, then login and run the command .
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
, which is the folder where our production build is located. Type
and proceed. If you make a istake here, you can change the public directory in the file
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.
Alternative/similar guide, I did not try yet: https://www.youtube.com/watch?v=mwNATxfUsgI