Question 187601 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Access YAML env variables inside react app

I am working on a react app which will be deployed in 3 environments.
Dev/QA and Prod.

Devops team has provided me a YAML file with the environment variables and asked us to use those variables in our application.

Sample YAML –

---
    apiVersion: apps/v1
      labels:
        app: kubesphere
        component: ui-dev
        tier: frontend
      name: ui-dev
      namespace: Test Project
    spec:
        matchLabels:
          app: kubesphere
          component: ui-dev
          tier: frontend
      template:
        metadata:
          labels:
            app: kubesphere
            component: ui-dev
            tier: frontend
        spec:
          containers:
            - env:
                - name: BACKEND_URL
                  value: http://192.40.84.98:5656
              image: $REGISTRY/$HARBOR_NAMESPACE/$APP_NAME:$IMAGE_VERSION-$BUILD_NUMBER
              imagePullPolicy: Always

And the variables we have to access are BACKEND_URL.

I am using these in our app as – process.env.BACKEND_URL but it isn’t working.

Is there something I am missing? Please guide.

Tags:

2

Answers


  1. 0

    You can’t access the process.env from the client javascript (the browser) in this case it is react. so even if the container has that env variable, javascript doesn’t have access to it.

    the way react works with env variables is that react read them from an .env file and then in the build react took those variables and keep them as javascript code.

    In your case the image (the react app) is already built, so simply it cannot
    access to those env variables in your container ..

    Login or Signup to reply.
  2. 0

    You have to mount a file like config.js which contains the environment variables, and reference it in the public.html.

    1-) Yaml must be something like this. (you may need the change mountPath accordingly, in this example I used nginx)

    metadata:
  name: kubesphere-config
  labels:
    app: kubesphere
data:
  config.js: |
    window.env = {}
    window.env.BACKEND_URL="http://192.40.84.98:5656"

--- 

apiVersion: apps/v1
  labels:
    app: kubesphere
    component: ui-dev
    tier: frontend
  name: ui-dev
  namespace: Test Project
spec:
    matchLabels:
      app: kubesphere
      component: ui-dev
      tier: frontend
  template:
    metadata:
      labels:
        app: kubesphere
        component: ui-dev
        tier: frontend
    spec:
      containers:
        - image: $REGISTRY/$HARBOR_NAMESPACE/$APP_NAME:$IMAGE_VERSION-$BUILD_NUMBER
          imagePullPolicy: Always
          volumeMounts:
            - name: config-volume
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-volume
          configMap:
            name: kubesphere-config

    2-) In index.html file (which is inside the public folder of react app), you have to give reference to this config.js file in head block.

     <script src="%PUBLIC_URL%/config.js"></script>

    3-) You can now access the environment variables inside a component like this:

    window.env.BACKEND_URL
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search