ReactJS Production Build with Docker and Nginx

Reactjs Docker Production Build With Docker and Nginx

Hi, let me the start with the issue. YOU CANNOT ACCESS TO THE process.env when you have build.. and that's ok. dont cry about it.

Let's see what we can do.

First approach is to create an .env file in the project root and set/use you variables like this

REACT_APP_DEV_API_BASE_URL=https://dev.google.com
REACT_APP_PRODUCTION_API_BASE_URL=/api/

Second approach would be exporting your environment variables to the Docker on build like this

In your Dockerfile

ENV REACT_APP_PRODUCTION_API_BASE_URL $REACT_APP_DEV_API_BASE_URL

and build with this command

docker build -t awesome_image --build-arg REACT_APP_PRODUCTION_API_BASE_URL=my-url

I have a third approach it's ugly as ... you know I would not like to mention about it.

These are the tips so let's get to the Docker setup ( and you see i choose use .env )

FROM node:13.12.0-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build

# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]