Docker : React App doesn't read environment variable

Question

I have a React App running using Docker. I want to deploy the same docker image on dev, staging and prod environment.

The value of my React environment variable (REACT_APP_PARAM) is different for each environment.

My dockerfile look like this :

…

COPY . .

ARG REACT_APP_PARAM

ENV REACT_APP_PARAM $ REACT_APP_PARAM

…

I use this Dockecompose file to build my image

version: "3"
services:
  frontend:
    image: my-image
    build:
      context: .
      args:
        - REACT_APP_PARAM=BuildParam
    environment:
      - REACT_APP_PARAM=${REACT_APP_PARAM}
    ports:
      - "80"
      - "443"

When deploy and run my image on dev environment I use this dockercompose file

version: "3"

services:
  frontend:
    image: my-image
    restart: always
    environment:
      - REACT_APP_PARAM=DevelopmentParam
    ports:
      - "80"
      - "443"

When I debug my application the value of REACT_APP_PARAM is still BuildParam

But went I list my container environment variable with command docker exec my-image env, the value of REACT_APP_PARAM is DevelopmentParam.

Any ideas how I can solve this or how is the best approach to archive that?

Thanks

rony · Accepted Answer · 2020-11-26 16:42:12Z

2

After several searches, I found that Environment variables are embedded into the build.

The official React documentation :

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, as described here. Alternatively you can rebuild the app on the server anytime you change them.

https://create-react-app.dev/docs/adding-custom-environment-variables/

I don't like the idea to build different image for each environment.

answered Nov 26, 2020 at 16:42

rony

1211 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Docker : React App doesn't read environment variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related