title: Azure WebApps React: the environment variables exist but are not present when I call process.env
body: <h1>Prerequisite</h1>
  <p>this is my first usage of React/Node.JS/Azure App Service. I usually deploy apps using flask/jinja2/gunicorn.</p>
  <h1>The use case</h1>
  <p>I would like to use the environment variables stored in the <strong>Configuration</strong> of my App <strong>Service on Azure</strong></p>
  <p>Unfortunately, <strong>the environment variables displays 3 environment variables (NODE_END, PUBLIC_URL and FAST_REFRESH) instead of several dozens</strong>.</p>
  <h2>The partial content of the Azure App Service <strong>appsettings</strong></h2>
  <pre class="lang-json prettyprint-override"><code>[
  {
      &quot;name&quot;: &quot;REACT_APP_APIKEY&quot;,
      &quot;value&quot;: &quot;some key&quot;,
      &quot;slotSetting&quot;: false
    },
    {
      &quot;name&quot;: &quot;REACT_APP_APPID&quot;,
      &quot;value&quot;: &quot;an app id&quot;,
      &quot;slotSetting&quot;: false
    },
    {
      &quot;name&quot;: &quot;REACT_APP_AUTHDOMAIN&quot;,
      &quot;value&quot;: &quot;an auth domain&quot;,
      &quot;slotSetting&quot;: false
    },
  {
      &quot;name&quot;: &quot;APPINSIGHTS_INSTRUMENTATIONKEY&quot;,
      &quot;value&quot;: &quot;something&quot;,
      &quot;slotSetting&quot;: false
    },
    {
      &quot;name&quot;: &quot;APPLICATIONINSIGHTS_CONNECTION_STRING&quot;,
      &quot;value&quot;: &quot;something else&quot;,
      &quot;slotSetting&quot;: false
    },
    {
      &quot;name&quot;: &quot;ApplicationInsightsAgent_EXTENSION_VERSION&quot;,
      &quot;value&quot;: &quot;some alphanumeric value&quot;,
      &quot;slotSetting&quot;: false
    },
    {
      &quot;name&quot;: &quot;KUDU_EXTENSION_VERSION&quot;,
      &quot;value&quot;: &quot;78.11002.3584&quot;,
      &quot;slotSetting&quot;: false
    }
  ]
  </code></pre>
  <p><a href="https://i.stack.imgur.com/uvuA5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uvuA5.png" alt="environment variables on Azure Web App" /></a></p>
  <h1>The CI/CD process</h1>
  <ol>
  <li>I am using Azure DevOps to build and deploy the app on Azure.</li>
  <li>The process runs <code>npm install</code> and <code>npm run build</code> before generating the zip file containing the build (see the <strong>directory tree list</strong> here below)</li>
  </ol>
  <h1>How do I Run the App?</h1>
  <p>The <strong>startup command</strong> contains <code>npx serve -l 8080 .</code></p>
  <p><a href="https://i.stack.imgur.com/gjhjJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gjhjJ.png" alt="Azure Web App Service - Configuration &gt; General Settings" /></a></p>
  <h1>The Issue</h1>
  <p>I display the environment variables with</p>
  <pre class="lang-js prettyprint-override"><code>console.log('process.env', process.env);
  </code></pre>
  <p>The content of the <code>process.env</code> is</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;NODE_ENV&quot;: &quot;production&quot;,
    &quot;PUBLIC_URL&quot;: &quot;&quot;,
    &quot;FAST_REFRESH&quot;: true
  }
  </code></pre>
  <h1>The Wired part</h1>
  <p>I use SSH on Azure and I run</p>
  <p><code>printenv | grep APPINS</code> the result is</p>
  <pre><code>APPSETTING_APPINSIGHTS_INSTRUMENTATIONKEY=something
  APPINSIGHTS_INSTRUMENTATIONKEY=something
  </code></pre>
  <p><code>printenv | grep APPLICATION</code> the result is</p>
  <pre><code>APPSETTING_APPLICATIONINSIGHTS_CONNECTION_STRING=something else
  APPLICATIONINSIGHTS_CONNECTION_STRING=something else
  </code></pre>
  <h1>Misc</h1>
  <h2>Directory Tree list</h2>
  <pre><code>.
  ├── 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
  
  </code></pre>