Return to the Land of Environment Variables
Tags: react, env, environmentvariables, security
Published: 2021-05-22 16:19:20

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](https://dev.to/maxjacobzander/deploying-a-full-stack-app-for-the-first-time-vanilla-javascript-rails-api-2ocg)!). 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](https://dev.to/maxjacobzander/well-you-just-got-to-got-to-got-to-got-to-get-in-touch-29n7), 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](https://github.com/github/gitignore). 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"](https://dev.to/maxjacobzander/deploying-a-full-stack-app-for-the-first-time-vanilla-javascript-rails-api-2ocg) 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!*