ReactJS environment variable using docker compose

  docker, docker-compose, environment-variables, reactjs

This is my reactjs frontend docker compose section, in which I added 2 environment variable. The created variables are not available in the react app but I see the variable are created inside the frontend docker container. Is there any way to solve this?

React Docker Compose

webapp:
    image: webapp:latest
    build:  
        context: ./webapp
        dockerfile: Dockerfile
    volumes:
      - ./webapp:/app/webapp
      - node-modules:/app/webapp/node_modules
    ports:
      - "3000:3000"
    environment:
      - REACT_APP_ASPNETCORE_URL=localhost:5000
      - REACT_APP_ASPNETCORE_ENVIRONMENT=production
    depends_on:
      - dockerapi
    networks:
      - dockerapi-dev

My Docker file

#stage1 - build react app 
FROM node:14.15.1 as build

# set the working direction
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package*.json ./
COPY yarn*.lock ./

RUN yarn --silent
COPY . /app
RUN yarn build

# stage 2 - build the final image and copy the react build files
FROM nginx:1.17.8-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

EXPOSE 3000

CMD ["nginx", "-g", "daemon off;"]

React container environment variables using command "docker exec entryexit_webapp_1 env"

enter image description here

But when I open the app and go to network details, no environment variable is set

enter image description here

Source: Docker Questions

LEAVE A COMMENT