React - Development vs Production problems - environment variables return undefined?

Get Help React.js
#1

So I’m working on a Codecademy project - specifically React Redux Inspirational Homepage Project - and everything works great in development mode locally on my own machine. When I go to deploy my project in Netlify and Heroku (I’ve tried both) following all the steps in the course, it’s failing to pass my hidden environment variables (dotenv) - Api Keys - and thus I can’t fetch any image data leaving a very plain looking inspirational homepage.

I have looked up the problem on Stack Overflow and I think I know what’s going wrong but I’m not sure how to put it right. The production settings in Netlify say ‘npm run build’ which should pass the references to my ‘.env’ file and basically do it all for me. I got my own personal API keys, like I say, everything worked fine in development. If anyone could advise me that would be wonderful.

Thanks, Gaffyn.

#2

My Netlify build settings
Base directory: not set
Build command: npm run build
Publish directory: build/

according to - https://www.codecademy.com/paths/advanced-react-redux-sp/tracks/advanced-react-redux-sp-deployment/modules/deploy-a-react-redux-application/informationals/deploy-your-react-redux-app-to-netlify - and Netlify own documentation

that should be right. I really don’t know what to do??

#3

If you scroll down in Site settings → Build & Deploy you should find Environment Variables where you add variable name and the value.

Hope this works

1 Like
#4

Hi thanks for reply, that is what I ended up doing and it worked. My next two problems were ‘cors’ issues and getting menu links to work properly. The ‘cors’ problems were resolved by creating a proxy server and prepending API calls with the server url (github - 'cors-anywhere). The menu problems were resolved by including a ‘netlify.toml’ file in root of project stating redirect paths. Stack Overflow is a really great resource :slight_smile: