<p>I have a react application which reads a couple of API related environmental variables. </p>

<ol>
<li>When running off a local machine or a VM, the API variables are read correctly into the application. </li>
<li>When hardcoded into the react application itself, the application runs too.</li>
</ol>

<p>However, creating a pod in Kubernetes with the <strong>image</strong> and a <strong>configmap</strong> does not work - the application runs but the environmental variables are not set.</p>

<p><strong>pod.yaml</strong></p>

<pre><code>...
 spec:
      containers:
      - command:
        - sleep
        - "3600"
        envFrom:
        - configMapRef:
            name: configmap
        image: xxxxx
        imagePullPolicy: IfNotPresent
...
</code></pre>

<p><strong>configmap</strong></p>

<pre><code>apiVersion: v1
data:
  API_HOST: xxxxxxx
  SOME_ID: abcdef
  NODE_ENV: development
  PROVIDER: GCP
kind: ConfigMap
metadata:
  creationTimestamp: xxxx
  name: configmap
  namespace: xxxx
  resourceVersion: xxxx
  selfLink: xxxx
  uid: xxxx
</code></pre>

<p><strong>React snippet</strong></p>

<pre><code>    if(!process.env.SOME_ID) {
      console.log('ID')
    }
</code></pre>

<p>My trouble lies with passing the environmental variables to the React application. I am certain the environmental variables are setup correctly in the pods but seemingly, the client-side React application does not have these variables (i.e. <code>console.log</code> prints nothing).</p>

<p>I chanced upon this <a href="https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/" rel="noreferrer">article</a> doing something similar but with Docker. It mentions that the transpiling replaces all <code>process.env</code> with a string value. The trick given to mitigate this bash script which creates JavaScript file with environment variables assigned as properties of the global window object.</p>

<p>While I am unsure if this is doable in Kubernetes, I am wonder is there an easier way to inject environmental variables of a Kubernetes pod into a react application at runtime? </p>

<p>It doesn't work as you expect because the <code>process.env</code> variables are replaced during transpiling. You can't access them during runtime.</p>

<p>You can check this guide for one possible solution: <a href="https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/" rel="noreferrer">https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/</a>. But regarding your question, there is nothing wrong with your Kubernetes configuration.</p>
