question

AbdelkrimBrussels avatar image
0 Votes"
AbdelkrimBrussels asked brtrach-MSFT answered

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

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
  }
]

86558-env-variable-on-azure.png


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 .

86624-react-azure-general-settings.png



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



[3]: https://i.stack.imgur.com/gjhjJ.png

[4]: https://i.stack.imgur.com/gjhjJ.png

azure-webappsazure-webapps-content-deployment
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

brtrach-MSFT avatar image
0 Votes"
brtrach-MSFT answered

@AbdelkrimBrussels 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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.