Hosting a react app with firebase
Tags: beginners, tutorial, firebase
Published: 2018-01-04 07:41:28

---
title: Hosting a react app with firebase
published: true
description: Hosting with firebase
tags: beginner, tutorial, firebase
---

Today we are going to deploy the web application we created [previously](https://github.com/aurelkurtula/todo-app-with-react-and-firebase) 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](https://github.com/aurelkurtula/todo-app-with-react-and-firebase) which is a result of the [tutorial series](https://dev.to/aurelkurtula/creating-an-app-with-react-and-firebase---part-one-814). 

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](https://firebase.google.com/docs/functions/config-env). 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?