CODEWITHSUNDEEP
node.jsreactjsherokuconfig
Luis Escobar-Driver
Luis Escobar-Driver

Reputation: 21

When I use my Heroku Config Variables in my react app, they come back as undefined

I've built a simple resume website using react; hosted on heroku, its code can be found here. I am using a service emailjs to allow others to reach me via email. Locally I am using config/secrets.json to load variables I need to initiate the emailjs object. I added all variables contained in config/secrets.json to my heroku app located at Settings Config Vars.

You can see how I attempt to access those environment variables here.

When I take a look at the console, I see that process.env.INIT_USER outputs undefined? I have INIT_USER in my heroku app and see it on the cli with command heroku config -a app_name.

I cannot access my environment variables despite the fact that I see them on my herokus app settings.

My application is deployed in Heroku and I use Heroku Pipelines for my deployment and build process.

Upvotes: 2

Views: 1927

Answers (2)

G. Shand
G. Shand

Reputation: 468

If you set the ENV vars in heroku after deploying the app, try redeploying the app.

With a create-react-app app (which uses buildpack), I found that the process.env variables were set during the build phase of the deployment. So, updating the variables in the heroku dashboard after the build was completed did not update the variables in the process.env object. Redeploying the app updated the process.env object with the env variables I had set.

This also causes problems with pipelines because Heroku does not rebuild the app slug when you promote it to production. This means the promoted app will use the process.env variables from your staging app, so you have to make sure your staging app has the same variables that you want to use in production.

Big design flaw on Heroku's part IMO.

Upvotes: 2

Dakota Michael
Dakota Michael

Reputation: 1

I had to actually uninstall my globally installed create-react-app:

npm uninstall -g create-react-app

and opt for this app generation command instead:

npx create-react-app myapp

Upvotes: 0

Related Questions