Search code examples
reactjsazureazure-web-app-servicepm2

Process.Env Isn't Populated in React App on Azure

I'm trying to get a React app running in Azure App Services and having difficulties getting environmental variables to work.

Locally

When running locally I'm using a .env.local file to load environmental variables (which isn't checked into git).

REACT_APP_SERVER_URL=http://localhost:5000

I can then use it in my application by referencing it using process.env.REACT_APP_SERVER_URL. Everything is working as expected.

On Azure

Now I'm trying to get the same thing working in Azure. I've setup configuration using Application Settings (described in their documentation here and here).

I can use kudu to get to the debug console and see that the environmental variable is being set.

kudu debug console

But using process.env.REACT_APP_SERVER_URL is not pulling in that value. If I console.log(process.env) my url isn't doesn't show up.

process.env printing

My React app was created using the create-react-app cli a couple days of ago. My React App is deployed via github actions with the following startup command: (pm2 serve /home/site/wwwroot/build --no-daemon --spa)

From what I've read online it "should" just work, so I'm not sure what the breakdown is. My thought is something with pm2 might be blocking environmental variables, but not sure.

This guy seems to be having a similar problem to me, but no answer is elaborated on that question. And I don't want to store config in package.json, since that's what Azure Config is suppose to help me do.

Solution

  • A react single page app is, from an infrastructure perspective, just a bunch of static files - HTML,JS,CSS, whatever. It cannot reach into the server to read those variables because there is no server side code running.

    You're going to have to bundle your environment variables, whether inside .env or package.json or wherever.