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

Question

The original question is available here: https://stackoverflow.com/questions/67045282/azure-webapps-react-the-environment-variables-exist-but-are-not-present-when-i

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

   json  
   [  
   {  
       "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

I am using Azure DevOps to build and deploy the app on Azure.
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

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

The content of the process.env is

   json  
   {  
     "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

@Abdelkrim Thank you for your question. It appears someone on Stack Overflow may have already provided an answer. Can you please let us know if their reply answers your question?

Source: https://stackoverflow.com/a/67052708/8366814