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?
Top comments (3)
There is no way to prevent your API configuration from being completely public. Even if you find some way to hide it in environment variables, Google exposes it themselves through the SKD auto-configuration URLs. Just append
/__/firebase/init.jsonor/__/firebase/init.jsto the root of any Firebase hosting domain and there's the credentials.I set the environment variables on the root when I was building out my react-app and it worked out when it was time to build and deploy to Firebase. I believe you have to use to the server to add or make changes.
Ty :3