Nginx Question posted in
The official documentation can be found here.

How do I have npm run build of a React app include my environment variables? – Nginx

I am trying to deploy my app for the public to see but I am stuck with this step. To preface, I containerized my React app using docker and I pass in my variables through the –env-file option for docker run. This works fine and dandy when I am running the app using CMD ["npm", "start"] but when I tried to change the dockerfile for production, the site is accessible but the parts of the site that rely on the environment variables fail.

This is the docker file I used:

FROM node:latest as build-stage
WORKDIR /app
ADD . .
RUN npm install
RUN npm run build

FROM nginx:latest
COPY --from=build-stage /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

I am not sure if the problem is with nginx or I am just misunderstanding the build process in React and how environment variables are injected into it.

Tags:

2

Answers


  1. 0

    The image is a container (starting as node:latest) but that container does not inherit your environment variables. You can set variables in the container using RUN bash commands or using ARG/ENV. You will need to set any variables that are needed for your app to run, as they will be bundled into the resulting build. you can also set environment variables when you run the container, in this case when the nginx server starts up.

    Login or Signup to reply.
  2. 0

    This worked for me.
    env file name -> .e

    RUN NODE_ENV=qa npm run build

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search