Hiding information in a React app repository

In this article, I would like to share some simple tips about hiding some data in GitHub for security.

Let's provide an example. Let's say we have a React.js app using Travis to handle with CI and CD and using Firebase.
First of all, you need to have a ".env" file. to put the firebase information, something like:

There we'll provide the credentials for firebase and any other important information. But it's not enough. Firebase, for example, generates some files like ".firebaserc" and "firebase.json", we need to hide it as well mostly the first, where is the name of the project database. For that, we need to create a script file just to create it at build.

Let's create a file named "deploy.sh" and put there the creating of these both files:

Let's understand a little bit this file, we are just creating two files using a bash script, note at the first line we are getting "$REACT_APP_projectId", it's an environment variable from our".env" file.

Okay, how can we run it? We'll share here using Travis, but the logic works for any other CD tool.

All application that uses Travis needs to have a file named ".travis.yml" with some configurations to deploy. let's see our Travis file:

So, we have two things to note there:

  1. At "before_install" we are running our bash file;
  2. At "after_install" we are running the firebase deploy and getting an environment variable. We didn't see that in our ".env" file because it'll be used in the production or staging environment, locally we just run the firebase deploy CLI for example.


Now we need to put there the files that we want to hide. ".firebase", ".firebaserc", "firebase.json", ".env".
Our file should be like:

See you soon!

Software Engineer, Full Stack Developer, Musician and Writer. edertaveira.com

Software Engineer, Full Stack Developer, Musician and Writer. edertaveira.com