Setting environment variables in a shell script for a React app

Question

I am trying to set some environment variables in a powershell (and bash) script and read them in a ReactJS application. The shell script is simple:

$env:AUTHDOMAIN="some.domain.com"
$env:AUTHCLIENTID="bunch-o-characters"
$env:AUTHCALLBACK="http://somewhere:3002/callback"
$env:AUTHAUDIENCE="auth-audience"

$env:PORT=3002

# Get-ChildItem Env:

yarn start

The port is being picked up correctly by yarn but none of the variables (including PORT) are available via process.env within the React javascript.

console.log("domain     : " + process.env.AUTHDOMAIN);
...
domain     : undefined App.js:33

No mods to my package.json file:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

What am I missing? Get-ChildItem shows that the variables are set correctly in the environment.

Edit: I tried the solution listed here and it doesn't work. It also blocks the terminal from receiving any output:

$ ($env:AUTHDOMAIN="some.domain.com") -and (yarn start)

Same result.

Edit #2: It's worth noting that the behavior is exactly the same in linux/bash (which is a good litmus test cuz I've done this in bash about a 100 billion times) - yarn sets the port correctly but none of the info makes it into the react app:

#!/bin/sh

export AUTHDOMAIN="some.domain.com"
export AUTHCLIENTID="bunch-o-text"
export AUTHCALLBACK="http://somewhere:3001/callback"
export AUTHAUDIENCE="auth-audience"

export PORT=3002

yarn start

So this likely has nothing to do with powershell.

Is this just an issue of context? If you set the variables in the system context instead of current user, do you get a different result? — AdminOfThings
– AdminOfThings, Commented Apr 13, 2019 at 14:26
Do you mean via [Environment]::SetEnvironmentVariable()? I'd rather not do that. For the record I do this exact same thing to load env vars into the golang api and the api sees them just fine. — Omortis
– Omortis, Commented Apr 13, 2019 at 14:33
The env variables do in fact persist in the environment after I kill the server which is kind of vexing. — Omortis
– Omortis, Commented Apr 13, 2019 at 14:37
You need to reload the process shell to load the environment changes, see e.g.: stackoverflow.com/q/171588/1701026 — iRon
– iRon, Commented Apr 13, 2019 at 15:32
@iRon I don't think any of that applies. This is powershell not cmd.exe, the env vars are definitely getting set (as shown by Get-ChildItem) and this same setup works fine with a golang application that uses environment variables. I don't want the vars to be system wide, just local to the script process. — Omortis
– Omortis, Commented Apr 13, 2019 at 16:51

Dor Shinar · Accepted Answer · 2019-04-13 17:45:35Z

3

Every environment variable you wish to consume must be prefixed with REACT_APP_ as per the documentation of create-react-app:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

answered Apr 13, 2019 at 17:45

Dor Shinar

1,5222 gold badges11 silver badges17 bronze badges

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

1 Comment

Omortis Over a year ago

Just found that - thanks! It's worth noting that, as above, the env vars being sent to yarn (react-scripts) do NOT have this requirement.

Collectives™ on Stack Overflow

Setting environment variables in a shell script for a React app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related