<p>This is my yaml file, tried using both with putting the value in and using secrets</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: dockuser-site-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      component: dockuser-site
  template:
    metadata:
      labels:
        component: dockuser-site
    spec:
      imagePullSecrets:
        - name: dockhubcred
      containers:
        - name: dockuser-site
          image:dockuser/dockuser-site:v003
          ports:
            - containerPort: 80
          env:
          - name: REACT_APP_GHOST_API_KEY
            # value: &quot;83274689124798yas&quot;
            valueFrom:
              secretKeyRef:
                name: ghostapikey
                key: apikey
</code></pre>
<p>On the client side:</p>
<pre><code>const api = new GhostContentAPI({
  url: &quot;https://dockuser.com&quot;,
  key: process.env.REACT_APP_GHOST_API_KEY,
  version: &quot;v3&quot;,
});
</code></pre>
<p>Error I'm getting:</p>
<pre><code>Error: @tryghost/content-api Config Missing: 'key' is required.
</code></pre>
<p>Same thing happened for url until I manually entered it so for some reason my env vars aren't getting in...</p>
<p>This is a react app so I tried changing the env vars to REACT_APP_ first and even tried adding the env in the dockerfile, still nothing.</p>
<pre><code>State:          Running
      Started:      Sat, 21 Aug 2021 06:12:05 -0500
    Ready:          True
    Restart Count:  0
    Environment:
      REACT_APP_GHOST_API_KEY:  &lt;set to the key 'apikey' in secret 'ghostapikey'&gt;  Optional: false
</code></pre>
<p>It's setting the key inside the pod. The Create React App is the problem?</p>
<p>Dockerfile:</p>
<pre><code>FROM nginx:alpine
ENV REACT_APP_GHOST_API_KEY=blablabla123
COPY build/ /usr/share/nginx/html

</code></pre>

<p>You can use the React-dotenv : <a href="https://www.npmjs.com/package/react-dotenv" rel="nofollow noreferrer">https://www.npmjs.com/package/react-dotenv</a></p>
<p>React example code :</p>
<pre><code>import React from &quot;react&quot;;
import env from &quot;react-dotenv&quot;;

export function MyComponent() {
  return &lt;div&gt;{env.REACT_APP_GHOST_API_KEY}&lt;/div&gt;;
}
</code></pre>
<p>Deployment goes like :</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: dockuser-site-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      component: dockuser-site
  template:
    metadata:
      labels:
        component: dockuser-site
    spec:
      imagePullSecrets:
        - name: dockhubcred
      containers:
        - name: dockuser-site
          image:dockuser/dockuser-site:v003
          ports:
            - containerPort: 80
          env:
          - name: REACT_APP_GHOST_API_KEY
            # value: &quot;83274689124798yas&quot;
            valueFrom:
              secretKeyRef:
                name: ghostapikey
                key: apikey
</code></pre>
<p><strong>Option : 2</strong></p>
<p>You can also use the <code>config.json</code> file and get variables from there.</p>
<pre><code>import { Component } from '@angular/core';
import Config from &quot;../config.json&quot;;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  environment = Config.ENV;
  baseUrl = Config.BASE_URL;
}
</code></pre>
<p><strong>config.json</strong></p>
<pre><code>{
  ENV: &quot;$ENV&quot;,
  BASE_URL: &quot;$BASE_URL&quot;
}
</code></pre>
<p>you can save the whole config.json into the configmap and inject into the volume.</p>
<p><a href="https://developers.redhat.com/blog/2021/03/04/making-environment-variables-accessible-in-front-end-containers#inject_the_environment_variables" rel="nofollow noreferrer">https://developers.redhat.com/blog/2021/03/04/making-environment-variables-accessible-in-front-end-containers#inject_the_environment_variables</a></p>
