Hosting a react app with firebase

Today we are going to deploy the web application we created previously to firebase.

This can be done using the terminal. The first thing you need to do is install firebase-tools in your machine.

npm install -g firebase-tools

Then login to your firebase account.

firebase login

You'll be directed to your default web browser where you'll be prompted to sign in to your firebase/google account.

The above is done once.

deploying your project.

In the terminal you'll need to point to your project. If you want to follow along you can clone the project here which is a result of the tutorial series.

Next, you need to setup the project for deployment. Hence, run the following.

firebase init

This will ask you a series of questions.

The first question is which features your project requires to make use of. You can select more than one. For our case, we can just select Hosting. We are also making use of the database, but not utilising the rules, so just go down to Hosting, hit space and enter

The next question is:

What do you want to use as your public directory? (public)

If you hit enter, the default folder that would be deployed will be public. But we know that react's deployment folder is called build, so type that and move on.

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

A react app is a single-page app so type y and then enter

Next, if it asks whether anything should be overwritten, select no.

At this point you would need to build your react app (yarn build or npm run build).

Finally to deploy, run:

firebase deploy

And that's it. The Hosting URL is returned after deployment is complete

Security concerns can't be addressed

If you are following along with the project I mentioned above, we are connecting to firebase project by hardcoding the configuration rules. They are located at ./src/fire.js

const config = {
      apiKey: "***********",
    authDomain: "***********",
    databaseURL: "***********",
    projectId: "***********",
    storageBucket: "***********",
    messagingSenderId: "***********"
};

When deploying the application, the above information would be easily accessible by anyone that inspects the code.

I thought that this issue can easily be fixed using the environment configurations. Basically we are able to create private variables that can only be accessed by us.

In the terminal we would add this:

firebase functions:config:set todoservice.apikey="MaDeItUppBlaBla" todoservice.databaseurl= ...

Then, I thought we could modify the ./src/fire.js to this

import functions from 'firebase-functions';
import admin from 'firebase-admin';
admin.initializeApp(functions.config().firebase);
const config = {
      apiKey: functions.config().todoservice.apikey,
    authDomain: functions.config().todoservice.authdomain,
    databaseURL: functions.config().todoservice.databaseurl,
    projectId: functions.config().todoservice.projectid,
    storageBucket: functions.config().todoservice.storagebucket,
    messagingSenderId: functions.config().todoservice.messagingsenderid,
};

I Waisted so much time trying different versions of firebase-functions and firebase-admin packages but apparently these can be accessed only from server side code!

If anyone knows how to secure the configuration data in in a front-end JavaScript (react) app. Please let me know, because, as it stands, I can't see the point of hosting an app of this kind in firebase (though from my research, I guess an isomorphic app might solve this issue). Or is there something else I'm missing?