Return to the Land of Environment Variables

If you read my blog post about deploying my first full-stack app, you may remember our "Quick Deviation into the Land of Environment Variables" (if you haven't read it yet, you can check that out here!). I wanted to write a small follow-up piece for those of you who are trying to protect your data in a React app.

As I mentioned in my last blog post, I have been working on a project for a small business. I built the site with React and, as I mentioned in my last post, utilized EmailJS to help me handle the contact form. When it came to pushing to Github, I knew that I didn't want to push any information that could be traced back to my client's email account and, after using Environment Variables to help do that in Ruby, I figured that I could probably do the same thing in React! Wouldn't you know — there's an npm module to use and the whole process is pretty easy and straightforward!

To get started, you need to add dotenv to your package. Run:

npm install dotenv --save

Once that is successfully installed, we're going to require dotenv. Just as we had added our requirement into our environment.rb in my Ruby walkthrough, for React, we are going to require it in App.js. Go ahead and pop the following line into your App function before your return statement:

require('dotenv').config()

In context, that should look as follows:

function App() {
  require('dotenv').config()
  return (
  ...
  );
}

export default App;

Great! So now you're going to want to create your .env file. Just like in the Ruby walkthrough, we want to put our .env file in the Root level of your system structure and the file is just going to be called .env. In that file, we are going to define your secret key. As a reminder, the secret key is ALL CAPS, followed that with an = and then the value of what you're wanting to interpolate in. Big Reminder: MAKE SURE YOU DO NOT ADD SPACES HERE!

So an example of what that .env file could look like is:

REACT_APP_ENV_SERVICE_ID=anexampleserviceid
REACT_APP_ENV_TEMPLATE_ID=anexampletemplateid
REACT_APP_ENV_USER_ID=anexampleuserid

Now that you've created your .env file, you're going to want to add it to your gitignore. As I mentioned in my Ruby walkthrough, Github has a wonderful resource for creating/adding to a gitignore file and you can find it (for just about any coding language!) here. In our case, we are going to add our .env file by adding

# Used by dotenv library to load environment variables.
 .env

to our gitignore file. (Feel free to run git status to check and make sure that everything worked correctly!)

Now that the environment variables are required/usable, created, and protected, we can start using them by calling them with the process.env.SECRET_KEY format. An example of how it can be used is:

    function sendEmail(e) {
      e.preventDefault();

      emailjs.sendForm(process.env.REACT_APP_ENV_SERVICE_ID, process.env.REACT_APP_ENV_TEMPLATE_ID, e.target, process.env.REACT_APP_ENV_USER_ID)
        .then((result) => {
            console.log(result.text);  alert("Message sent successfully!");
        }, (error) => {
            console.log(error.text); alert("Failed."+error);
        });
        e.target.reset()
    }

And ultimately, that's it! Pretty easy and very secure! I hope you found this walkthrough helpful and I'll see you next time!

If you are planning to deploy your app, it is worth remembering that having your environment variables included in your gitignore will mean that things won't work without importing that data otherwise. See my post with the "Quick Deviation into the Land of Environment Variables" for details on how to do that with Heroku. In Netlify, you can find the place to add environment variables under your project's "Site settings", in the "Environment" section of the "Build & deploy" tab!