Heroku environment variables not set in javascript for React/Rails application

Question

I've built a Rails-Api with React SPA frontend following this guide (very helpful, would recommend). I'm having issues getting Heroku to set the environment variables in the .env file that React uses for config vars. The values of the file are just set as literally "ENV[...]" instead of evaluating and setting the value. On the Rails side the Heroku ENV vars are being set correctly because I can see them in the console.

.env file:
REACT_APP_API_KEY=ENV['API_KEY']
REACT_APP_AUTH_DOMAIN=ENV['AUTH_DOMAIN']

App.js (top level Component):
console.log(config,process.env);
// which logs:
{
  NODE_ENV: "production"
  REACT_APP_API_KEY: "ENV['API_KEY']"
  REACT_APP_AUTH_DOMAIN: "ENV['AUTH_DOMAIN']"
  ...
}

Rails Console:
irb(main):001:0> ENV
=> {"LANG"=>"en_US.UTF-8", "NODE_ENV"=>"production",
"API_KEY"=>"<correct-value>", "AUTH_DOMAIN"=>"<correct-value>",......}

Is there something I need to do in order to alert Heroku that the ENV vars need to also be set in the .env file for the react app? The tutorial has the Heroku deployment use both the nodejs and ruby buildpacks (in that order). The app is built and then copied into the "public" dir for Rails to serve:

package.json
{
  //...
  "engines": {
    "node": "12.9.0",
    "yarn": "1.22.4"
  },
  "scripts": {
    "build": "yarn --cwd client install && yarn --cwd client build",
    "deploy": "cp -a client/build/. public/",
    "heroku-postbuild": "yarn build && yarn deploy"
  }
}

I don't know enough about the internal workings with Heroku's env vars swap. From what I understand with Create React App... the .env file's contents are set at build time so it is possible that the js is compiled before Heroku has any chance to inject the env vars. I'm open to suggestion on other ways to do this if this method isn't doable. Thanks!

Everything in React is viewable to your end user. You should not pass sensitive information via REACT_APP_ variables. — Peter J. Hart
– Peter J. Hart, Commented Jul 2, 2024 at 18:44

Petr Gazarov · Accepted Answer · 2020-03-23 00:48:17Z

2

You can expand environment variables in .env file. When React app is built, it has access to variables in your Heroku dyno, and react-scripts supports referencing them in your .env file. See more in docs.

With this in mind, your .env file would look like:

REACT_APP_API_KEY=$API_KEY
REACT_APP_AUTH_DOMAIN=$AUTH_DOMAIN

Assuming API_KEY and AUTH_DOMAIN variables are set in Heroku.

If you name these variables REACT_APP_API_KEY and REACT_APP_AUTH_DOMAIN in Heroku in the first place, then they will be picked up by react-scripts directly from the environment (no need for .env file then)

NOTE: with the above said, it sounds like you are trying to expose secrets in React app. The Create React App docs strongly warns NOT to do that, because:

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

answered Mar 23, 2020 at 0:48

Petr Gazarov

3,8412 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Ferretti Over a year ago

thanks Petr... I'll give it a try. FWIW, this is for the config for Firebase which belongs on the frontend. I just didn't want to complicate the question more by having that show up. I def agree with your note.

Ryan Ferretti Over a year ago

Worked perfectly... ended up just prepending the settings with REACT_APP_ and removed everything from the .env file. Wish I would have found this in the docs but happy to be through it with your help!

Collectives™ on Stack Overflow

Heroku environment variables not set in javascript for React/Rails application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related