[FIXED] How to rebuild create-react-app from a dockerfile container by passing env_file in docker-compose.yaml

Issue

I will try to be as descriptive as I can but I have an react app built with creat-react-app from this app I build a docker image.

dockerfile

FROM node:17-alpine

# set working directory
WORKDIR /app

# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./

RUN apk add --no-cache --virtual .gyp python3 make g++ \
    && yarn install \
    && apk del .gyp

# Copies everything over to Docker environment
COPY . ./
RUN yarn build-docker

#install serve package
RUN yarn global add serve

EXPOSE 3000 5000
ENTRYPOINT ["serve", "-s", "build"]

Which works fine locally with the .env file included in the project. For our production and development we use docker-compose and include the env_file in our docker-compose.yaml

docker-compse.yaml sample

app:
    container_name: app
    image: {image_source}
    restart: always
    env_file:
      - env/app.env

api:
    container_name: api
    image: {image_source}
    restart: always
    env_file:
      - env/global.env
      - env/db.env

The api works fine since it's using ENTRYPOINT ["npm", "start"] and reload the .env file every time it start, but since the app is built before the docker-compose up -d,

Is their a way to rebuild using yarn build-docker with docker-compose so my new build get the right .env file?

Solution

I finally found out how to solve the issue.

Instead of building the app within the container I chained both action in package.json and simply run the build before the serve.

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build-docker": "react-scripts --openssl-legacy-provider build",
    "build-start": "react-scripts --openssl-legacy-provider build && serve -s build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

"build-start": "react-scripts --openssl-legacy-provider build && serve -s build"

And in dockerfile i removed the yarn build-docker and changed the entrypoint to ENTRYPOINT ["npm", "run", "build-start"]

dockerfile

FROM node:17-alpine

# set working directory
WORKDIR /app

# install app dependencies
#copies package.json and package-lock.json to Docker environment
COPY package.json ./

RUN apk add --no-cache --virtual .gyp python3 make g++ \
    && yarn install \
    && apk del .gyp

# Copies everything over to Docker environment
COPY . ./

##### REMOVED THE FIRST BUILD 
#RUN yarn build-docker 

#install serve package
RUN yarn global add serve

EXPOSE 3000 5000
##### CHANGED THE ENTRYPOINT WITH THE NEW SCRIPT
ENTRYPOINT ["npm", "run", "build-start"]

So everytime it goes up with docker-compose the .env is used during the build.

Hope this could help someone!

Answered By - maxleb

Answer Checked By - Mary Flores (PHPFixing Volunteer)