Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

osama_abdullah's avatar

Change Environment Variables at runtime (React, Vite) with Docker and Nginx

Usually, when building a Vite app image needs two steps:

  • installing nodejs and building the app(vite build)
  • copying files generated from the above stem and running nginx

the goal is to create **one image and change the environment variables at runtime to use the same image in dev/stage/prod.

in normal cases ".env" is processed when building the app(first step) so you must create totally different images for differing environments and that's bad practice.

0 likes
6 replies
azimidev's avatar

OK, I think you can use environment variables to control the configuration of your application at runtime, instead of hardcoding it in your source code. To achieve what you're looking for, you can use environment variable files to store your configuration and use them in your Dockerfile. Create a .env.production, .env.development, and .env.staging file for each environment you need to configure. In your Dockerfile, use the ARG instruction to pass the environment variable file to the image at build time.

ARG NODE_ENV

# set environment file based on the argument
ENV ENV_FILE=.env.$NODE_ENV

# copy environment file to container
COPY $ENV_FILE /app/.env

# build the app
RUN vite build

# copy the built files to the nginx directory
COPY dist /usr/share/nginx/html

# run nginx
CMD ["nginx", "-g", "daemon off;"]

To build the image for each environment, you can pass the NODE_ENV argument to the docker build command.

# build the production image
docker build --build-arg NODE_ENV=production -t myapp:production .

# build the development image
docker build --build-arg NODE_ENV=development -t myapp:development .

# build the staging image
docker build --build-arg NODE_ENV=staging -t myapp:staging .

when you run the container, you can specify the environment-specific image that you built earlier.

osama_abdullah's avatar

@azimidev thanks your idea is good, but still you will make different images for different environments while our goal is to build only one image and pass the environment variables at runtime

azimidev's avatar

@osama_abdullah The idea of docker is to build imageS and containerS in my opinion otherwise everyone would use Unix based server don't you think?

osama_abdullah's avatar

@azimidev yes but we want our dev/stage/prod environment to be almost identical to not have unexpected behaviors in production, only with different environment variables this will be better than generating 3 different images each for its own environment,

osama_abdullah's avatar
osama_abdullah
OP
Best Answer
Level 14

I found a solution:

here is the Dockerfile

FROM node:alpine3.14 AS buildJS
WORKDIR /var/www/html
COPY . .
RUN apk add --no-cache yarn \
    && yarn && yarn build

FROM nginx:stable-alpine
WORKDIR /var/www/html
COPY --from=buildJS /var/www/html/dist .
COPY ./docker/conf/nginx.conf /etc/nginx/conf.d/default.conf
COPY ./docker/conf/config.json /etc/nginx/templates/config.json.template

ENTRYPOINT []

CMD sleep 5 && mv /etc/nginx/conf.d/config.json config.json & /docker-entrypoint.sh nginx -g 'daemon off;'

I'm building the project in the first stage without any envs, in the second stage I'm copying the files and then creating the config.json file based on envs that are passed at run time with envstub feature of nginx.

then from the project I called the config.json file and load the envs from there but be careful you can not import it because imports will be resolved at build time instead you have to get it with fetch or axios or any equivalents

liemine's avatar

For my work i have the same requirments one image for all environments.

In one project we use a window._env to set runtime env's but that project is made by create-react-app and runs in dock node express

But now we have a vite react project and with nginx and i stil have not a good solution.

Today i tried this plugin (import-meta-env from iendeavor.github.io) for vite but din't get it working yet. It has good documentation and example projects on github.

Please or to participate in this conversation.