React

Introduction Do you need a certain environment variable at build time in Docker as opposed to runtime? There is an easy way to achieve this. Use Docker build arguments in combination with environment variables. An example of this is below of a React JS docker build that needs the environment variable REACT_APP_BACKEND_API and build time in the command npm run build. # Declare the build argument in the global scope ARG REACT_APP_BACKEND_API_ARG=TEST # Use an official Node runtime as a parent image FROM node:20-alpine # Set the working directory WORKDIR /app # Copy package.json and package-lock.json COPY package*.json ./ # Install the dependencies RUN npm install # Copy the rest of the application code COPY . . # Consume the build argument in the build stage ARG REACT_APP_BACKEND_API_ARG ENV REACT_APP_BACKEND_API=${REACT_APP_BACKEND_API_ARG} RUN echo $REACT_APP_BACKEND_API # Build the React app # WE need the env variable to be available at BUILD TIME RUN npm run build # Serve the app using serve RUN npm install -g serve # Expose the port the app runs on EXPOSE 3000 # Command to run the app CMD ["serve", "-s", "build", "-l", "3000"] The trick is to declare a build argument REACT_APP_BACKEND_API_ARG, use it in a stage and set the value of the required environment variable (in this case REACT_APP_BACKEND_API_ARG) to the argument value (${REACT_APP_BACKEND_API_ARG}) ...