Handling Environment Variables with Netlify + React

Photo by NOAA on Unsplash

I know I’m not alone when I say that project configuration, specifically environment configuration, is a big pain in the ass. There is no “right” way to set up your development environment and it varies from framework to framework.

Note: This article assumes that you have prior experience or at least are comfortable with Webpack as that is what we used to bundle/build our site and expose the variables to our React code. If not, no worries, Webpack has great documentation that can get you up and running in no time.

Custom Website

I have been working on a personal project with friends, barkpeople.us, for a couple months now. For this project we decided to build a custom website using React, AWS Lambda, and Netlify to sell our product. A major pain point for us was making sure we were using the correct DEV and PROD API keys depending on if we were in our local dev environment or if the code was being built for production.

So, how exactly do you pull this off with React and Netlify? Good question, here’s how we did it.

Netlify Environment Variables

Netlify Environment Variables

In the Build & Deploy section of your Netlify dashboard you will see an Environment section. This is where you can define custom variables that can be used by your website when it is built/deployed.

For our purposes we used the Square API to collect payments on our website. So, we set the API variables on the Netlify side and later we accessed these variables in the React code.

React Webpack Config

We used Webpack to bundle our code, add some relevant file loaders to handle Font files, handle environment variables (duh), etc.

Parsing the Env variables

Lets break down what is happening in the snippet above. This is at the top of our webpack.config.js file.

1. envKeys will end up being an object filled with [key : value] pairs representing the environment variables we want to provide to our React application at runtime.
2. The variables we defined on Netlify can be found in process.env.[Variable_Name] They are injected by Netlify so you don’t have to do anything to get this functionality out of the box.
3. Our final object that we will pass to Webpack will look something like

//envKeys Object
{ 
  CONTEXT: production, 
  SQUARE_LOCATION_ID: abc123,
  [more variables here],
}

3. We pass envKeys to the Webpack DefinePlugin in the plugins section of the webpack config.

// webpack.config.js
plugins: [
new webpack.DefinePlugin(envKeys)
]

Now you may be wondering, okay? So what? What does this let me do…

Well, this plugin exposes global constants to your application at build time. Which is exactly what we want for our React application. Now, when Webpack builds and bundles our website it will make available all of the environment variables we passed to the plugin.

Accessing Variables on the Frontend

With the environment variables defined and set up with Webpack the only thing left to do is access them from within our React code. So if we wanted to access the variable we defined back in our Netlify Dashboard, SQUARE_LOCATION_ID here is what that would look like…

// index.js (A random component in your React App)
const ourEnvVariable = SQUARE_LOCATION_ID;

Yup, that’s it. All you have to do is reference the variables you passed to the plugin by name and they will be available to you on the frontend.

Conclusion

As I mentioned, there are many ways to configure environment variables in your applications. This is just one possible way to combine Netlify Environment Variables and make them available to your React application. I hope you enjoyed and hopefully I save some of you some time that I unfortunately wasted trying to figure this out!