[Solved]-Create React App Build and Docker-Compose do not pass env variables-Reactjs

The .env file is a special, name-reserved file for docker-compose to set defaults for environment variables, so if you want to use it, you should rather not specify in your compose file, or use a different filename (eg: myservice.env) for your env_file section.

  web_front:
    env_file:
      - webfront.env
...

The docker docs mentions vaguely this under https://docs.docker.com/compose/env-file/ at the Compose file and CLI variables / Notes section

Environment variables defined in the .env file are not automatically visible inside containers.

To set container-applicable environment variables, follow the guidelines in the topic Environment variables in Compose, which describes how to pass shell environment variables through to containers, define environment variables in Compose files, and more at:

• https://docs.docker.com/compose/environment-variables/#the-env_file-configuration-option

For the environment variables to be passed onto the dockerfile from the docker compose build stage, you have to use args: in docker-compose build step. Example below

web_front:
    build:
      context: Web Front-CRA
      args:
         NODE_PATH=./src/
    ports:
      - "${WEB_FRONT_PORT}:6000"
    env_file:
      - .env
    volumes:
      - /usr/app/node_modules
      - ./Web Front-CRA:/usr/app

corresponding dockerfile

FROM node:10-alpine
ARG NODE_PATH
WORKDIR /usr/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.15

COPY --from=0 /usr/app/nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=0 /usr/app/build /usr/share/nginx/html

EXPOSE 6000

Access it in the dockerfile using $NODE_PATH. PS I am using an environment variable here and not an envfile. But I hope you get the point. Cheers.