Handling Environment Variables with Netlify + React

Photo by NOAA on Unsplash

Custom Website

Netlify Environment Variables

Netlify Environment Variables

React Webpack Config

Parsing the Env variables
//envKeys Object{ 
CONTEXT: production,
SQUARE_LOCATION_ID: abc123,
[more variables here],
}
// webpack.config.jsplugins: [new webpack.DefinePlugin(envKeys)]

Accessing Variables on the Frontend

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

Conclusion

--

--

Prolific Night-Coder. Runs on coffee and Dr.Pepper.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store