Azure WebApps React: the environment variables exist but are not present when I call process.env

Question

Prerequisite

this is my first usage of React/Node.JS/Azure App Service. I usually deploy apps using flask/jinja2/gunicorn.

The use case

I would like to use the environment variables stored in the Configuration of my App Service on Azure

Unfortunately, the environment variables displays 3 environment variables (NODE_END, PUBLIC_URL and FAST_REFRESH) instead of several dozens.

The partial content of the Azure App Service appsettings

[
{
    "name": "REACT_APP_APIKEY",
    "value": "some key",
    "slotSetting": false
  },
  {
    "name": "REACT_APP_APPID",
    "value": "an app id",
    "slotSetting": false
  },
  {
    "name": "REACT_APP_AUTHDOMAIN",
    "value": "an auth domain",
    "slotSetting": false
  },
{
    "name": "APPINSIGHTS_INSTRUMENTATIONKEY",
    "value": "something",
    "slotSetting": false
  },
  {
    "name": "APPLICATIONINSIGHTS_CONNECTION_STRING",
    "value": "something else",
    "slotSetting": false
  },
  {
    "name": "ApplicationInsightsAgent_EXTENSION_VERSION",
    "value": "some alphanumeric value",
    "slotSetting": false
  },
  {
    "name": "KUDU_EXTENSION_VERSION",
    "value": "78.11002.3584",
    "slotSetting": false
  }
]

The CI/CD process

1. I am using Azure DevOps to build and deploy the app on Azure.
2. The process runs npm install and npm run build before generating the zip file containing the build (see the directory tree list here below)

How do I Run the App?

The startup command contains npx serve -l 8080 .

The Issue

I display the environment variables with

console.log('process.env', process.env);

The content of the process.env is

{
  "NODE_ENV": "production",
  "PUBLIC_URL": "",
  "FAST_REFRESH": true
}

The Wired part

I use SSH on Azure and I run

printenv | grep APPINS the result is

APPSETTING_APPINSIGHTS_INSTRUMENTATIONKEY=something
APPINSIGHTS_INSTRUMENTATIONKEY=something

printenv | grep APPLICATION the result is

APPSETTING_APPLICATIONINSIGHTS_CONNECTION_STRING=something else
APPLICATIONINSIGHTS_CONNECTION_STRING=something else

Misc

Directory Tree list

.
├── asset-manifest.json
├── favicon.ico
├── images
│   ├── app
│   │   └── home_page-ott-overthetop-platform.png
│   ├── films
│   │   ├── children
│   │   │   ├── despicable-me
│   │   │   │   ├── large.jpg
│   │   │   │   └── small.jpg
│   ├── icons
│   │   ├── add.png
│   ├── misc
│   │   ├── home-bg.jpg
│   ├── series
│   │   ├── children
│   │   │   ├── arthur
│   │   │   │   ├── large.jpg
│   │   │   │   └── small.jpg
│   └── users
│       ├── 1.png
├── index.html
├── static
│   ├── css
│   │   ├── 2.679831fc.chunk.css
│   │   └── 2.679831fc.chunk.css.map
│   ├── js
│   │   ├── 2.60c35184.chunk.js
│   │   ├── 2.60c35184.chunk.js.LICENSE.txt
│   │   ├── 2.60c35184.chunk.js.map
│   │   ├── main.80f5c16d.chunk.js
│   │   ├── main.80f5c16d.chunk.js.map
│   │   ├── runtime-main.917a28e7.js
│   │   └── runtime-main.917a28e7.js.map
│   └── media
│       └── logo.623fc416.svg
└── videos
    └── bunny.mp4

74 directories, 148 files

Answer 1

When you run your application locally, you could use .env file to config your environment variables. Format like "name=value"(without quotes). Here is a sample:

REACT_APP_APIKEY=REACT_APP_APIKEY
REACT_APP_APPID=REACT_APP_APPID
REACT_APP_AUTHDOMAIN=REACT_APP_AUTHDOMAIN

When I call console.log('process.env', process.env); in index.js file, it works well:

After configuring the app settings on portal, deploy the nodejs web app to Azure.

You can view log output (calls to console.log) from the app directly in the VS Code output window. Just right-click the app node and choose Start Streaming Logs in the AZURE APP SERVICE explorer.

It shows the environment variables on portal Application settings:

---

By the way:

1. If you are very new to use node with Azure web app, you could have a look at this: https://learn.microsoft.com/en-us/azure/app-service/quickstart-nodejs?pivots=platform-windows
2. About how to use .env file, see this: https://holycoders.com/node-js-environment-variable/