score:1

Accepted answer

as @harsh manvar suggested (thanks a lot!), the react-dotenv library can be used, but just adding it to the project is not enough.

firstly, you have to follow all steps described in react-dotenv documentation (adding .env file to your project, editing package.json file).

in my case, .env file looked like this:

react_app_deploy_setup='__dps__'
react_app_port='__prt__'
react_app_backend_url='__bur__'

these are just placeholders for real values that will be added during runtime.

having the .env file ready, npm scripts prepended with react-dotenv command, and the variables whitelisted (as described in the library documentation), you can build your app image.

when the image is ready, add it to the kubernetes pod config file and replace your variables' placeholders with real values, like this:

[...]
spec:
  containers:
  - name: plg-frontend
    image: localhost:5000/frontend:1.22
    ports:
    - containerport: 80
    command:
    - sh
    - -c
    args:
    - sed -i "s/__prt__/$react_app_port/g" /usr/share/nginx/html/env.js;
      sed -i "s/__bur__/http:\/\/$backend_service_host/g" /usr/share/nginx/html/env.js;
      sed -i "s/__dps__/$react_app_deploy_setup/g" /usr/share/nginx/html/env.js;
      nginx -g 'daemon off;'
    env:
    - name: react_app_deploy_setup
      value: "development"
    - name: react_app_port
      value: "5089"

what happened up there, was replacing placeholder values with actual values:

  • $backend_service_host is an environment variable that exists in the pod and can be read from the running container,
  • $react_app_deploy_setup is a regular string defined by user,
  • $react_app_port is an integer value (it has to be in quotes, like strings!).

and the replacing happened with sed command (or rather: sh -c "sed -i ..."). all of the commands are chained, so don't forget about semicolons at the end of each argument.

all of the replacements were made in /usr/share/nginx/html/env.js file, which is created by react-dotenv library in project root. the actual location depends on where you mounted your build image (it's defined in dockerfile).

lastly, nginx command is called, since this is the final command invoked in image's dockerfile. without this explicit call, the command from the dockerfile would be overwritten with the commands related to the pod container and, in this case, nginx wouldn't start your app.

after the pod is started, you can check whether the variables are present in the container:

kubectl exec <pod-name> -- printenv | grep react_app

but it doesn't mean they were read by your app during runtime. to see if they were changed to the values from the pod definition, you can either exec running pod container and preview the env.js file or add some console logging in the app code.

score:1

you can use the library dot-env

import react from "react";
import env from "react-dotenv";

export function mycomponent() {
  return <div>{env.react_app}</div>;
}

while in deployment you can pass secret from secret and configmap

spec:
      containers:
        - name: example-site
          image: example/app:v1
          ports:
            - containerport: 80
          env:
          - name: react_app
            value: "123456"

the main reason i want to know it, is dynamic update of e.g. backend or redis urls - they might change when the app is restarted, rescheduled, etc.

above scenario fit well with your requirement, instead of using the config.json.

you can pass multiple values to deployment using configmap and secrets.


Related Query

More Query from same tag