How to access Kubernetes container environment variables from React.js application?

Question

I have a create-react-app with default configurations. I have some PORT and APIs inside .env file configured with

REACT_APP_PORT=3000

and using inside app with process.env.REACT_APP_PORT.

I have my server deployed on Kubernetes. Can someone explain how to configure my create-react-app, to use environment variables provided by pods/containers?

I want to access cluster IP via Name given by kubectl svc

Update 1 :

I have the opposite scenario, I don't want my frontend env variables to be configured in kubernetes pod container, but want to use the pod's env variable

e.x CLUSTER_IP and CLUSTER_PORT with their name defined by pod's env variable inside my react app.

For eg.-

NAME TYPE CLUSTER-IP 

XYZ ClusterIP x.y.z.a

and want to access XYZ in react app to point to the Cluster IP (x.y.z.a)

Are you intending to use your React App in development mode? Because the env variable REACT_APP_PORT is only used by the development script setup by create-react-app. Nonetheless, here is the link to Kubernetes documentation on how to handle environment variables: kubernetes.io/docs/tasks/inject-data-application/… — guzmonne
– guzmonne, Commented May 21, 2021 at 11:30
Yes in the development mode, also like in the documentation you shared, how to access EXAMPLE_SERVICE_PORT_8080_TCP_ADDR="" ( pod env variable in react app, since react reads env variables starting with REACT_APP) — Sunny
– Sunny, Commented May 21, 2021 at 11:41
Here is a link to handle environment variables when using create-react-app. Bare in mind that you won't be able to consume environment variables once the app is built. You will only be able to use them while you run your development server since it injects the environment variables values into React's code. — guzmonne
– guzmonne, Commented May 21, 2021 at 11:46
Sorry, forgot to paste it. Here it is: create-react-app.dev/docs/adding-custom-environment-variables — guzmonne
– guzmonne, Commented May 21, 2021 at 12:12

Sravan Kumar · Accepted Answer · 2021-05-21 16:15:00Z

Use Pod fields as values for environment variables

apiVersion: v1
kind: Pod
metadata:
  name: dapi-envars-fieldref
spec:
  containers:
    - name: test-container
      image: k8s.gcr.io/busybox
      command: [ "sh", "-c"]
      args:
      - while true; do
          echo -en '\n';
          printenv MY_NODE_NAME MY_POD_NAME MY_POD_NAMESPACE;
          printenv MY_POD_IP MY_POD_SERVICE_ACCOUNT;
          sleep 10;
        done;
      env:
        - name: MY_NODE_NAME
          valueFrom:
            fieldRef:
              fieldPath: spec.nodeName
        - name: MY_POD_NAME
          valueFrom:
            fieldRef:
              fieldPath: metadata.name
        - name: MY_POD_NAMESPACE
          valueFrom:
            fieldRef:
              fieldPath: metadata.namespace
        - name: MY_POD_IP
          valueFrom:
            fieldRef:
              fieldPath: status.podIP
        - name: MY_POD_SERVICE_ACCOUNT
          valueFrom:
            fieldRef:
              fieldPath: spec.serviceAccountName
  restartPolicy: Never

https://kubernetes.io/docs/tasks/inject-data-application/_print/ Maybe above example will help you.

Ivonet · Accepted Answer · 2021-05-21 12:09:59Z

1

try this:

kubectl create configmap react-config --from-literal=REACT_APP_PORT=3000

and then:

     spec:
       containers:
       - name: create-react-app
         image: gcr.io/google-samples/node-hello:1.0
         envFrom:
         - configMapRef:
             name: react-config

Now you configured your env from "outside" the pod

See also the documentation: https://kubernetes.io/docs/tasks/configure-pod-container/configure-pod-configmap/#configure-all-key-value-pairs-in-a-configmap-as-container-environment-variables

answered May 21, 2021 at 12:09

Ivonet

2,7502 gold badges20 silver badges31 bronze badges

2 Comments

Sunny Over a year ago

I have the opposite scenario, I don't want my frontend env variables to be configured in kubernetes pod container, but want to use the pod's env variable e.x CLUSTER_IP and CLUSTER_PORT with their name defined by pod's env variable inside my react app. E.x- NAME TYPE CLUSTER-IP XYZ ClusterIP x.y.z.a and want to access XYZ in react app to point to the Cluster IP (x.y.z.a)

Ivonet Over a year ago

Hmm if you want system environment variables available in your react app then they must be made available through the "back-end" as client-side code does not have access to system variables AFAIK

Raj Dudhare · Accepted Answer · 2021-05-21 11:33:57Z

0

Try Following

     spec:
       containers:
       - name: create-react-app
         image: gcr.io/google-samples/node-hello:1.0
         env:
         - name: REACT_APP_PORT
           value: "3000"

answered May 21, 2021 at 11:33

Raj Dudhare

111 bronze badge

1 Comment

Sunny Over a year ago

I want to use Pod's env variable inside my react-app, I don't want to configure my env inside pod's .yaml.

Collectives™ on Stack Overflow

How to access Kubernetes container environment variables from React.js application?

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related