Change Environmet Variables at runtime (React, vite) with docker and nginx

at work I need to make it possible to change the environmet variables at runtime, from an Azure web service, through docker and nginx. I tried this, this and some similar solutions, but I couln't get any of them to work.

I also couldn't find any solution online or any article/thread/post that explained if this is even possible, I only always find the text that vite statically replaces the env variables at build time.

During our CI/CD pipeline vite gets the env variables but our Azure admins want to be able to configure them from Azure, just for the case of it.

Does anyone know if this is possible and or maybe has a solution or some help, please ? :)

We Can Change the envirement variable of vite at runtime when running our docker container with nginx Follow the below steps

Step-1: In .dockerignore file put your .env file so that the environment variables are not get exposed

Let's say you have following variable in .env file

VITE_API_URL=http://localhost:5000
VITE_KEY=jo2i3jkj3kj

Step-2: Create a .env.production file don't put this file in .dockerignore file.

Inside the .env.production write your env vars like this it can be prefixed with any characters like here I have prefixed them with MY_APP_

VITE_API_URL=MY_APP_API_URL
VITE_APP_KEY=MY_APP_KEY

We are using a prefix MY_APP_

Step-3: Create a env.sh file in root directory

Inside the env.sh file put this code

#!/bin/sh
for i in $(env | grep MY_APP_) // Make sure to use the prefix MY_APP_ if you have any other prefix in env.production file varialbe name replace it with MY_APP_
do
    key=$(echo $i | cut -d '=' -f 1)
    value=$(echo $i | cut -d '=' -f 2-)
    echo $key=$value
    # sed All files
    # find /usr/share/nginx/html -type f -exec sed -i "s|${key}|${value}|g" '{}' +

    # sed JS and CSS only
    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
done

Step-4: Create a Dockerfile put the following code

# Stage 1: Build Image
FROM node:18-alpine as build
RUN apk add git
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2, use the compiled app, ready for production with Nginx
FROM nginx:1.21.6-alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/conf.d/default.conf
COPY env.sh /docker-entrypoint.d/env.sh
RUN chmod +x /docker-entrypoint.d/env.sh

Step-5: Run below command to create a docker image

docker build -t image-name

Step-6: To Start the container use the below command to start and add env-vars at runtime

docker run --rm -p 3000:80 -e MY_APP_API_URL=api_url -e MY_APP_KEY=key image-name

When we run the above command all the env vars which start with prefix MY_APP_ it will replace the value which we provided using -e flag this is how we can add the env-vars in vite react app at runtime

Hope my solution works in your case Thank you!