Docker with Vite - env variables are undefined inside the docker container

Question

I'm building a react project with Vite, and I'm new to Docker, and when I created a docker file, all was good, but the env variables are always undefined inside the Docker container.

Here's my simple Dockerfile ...

FROM node:18.17.1-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD ["npm","run","preview"]

And here's the .dockerignore file ...

README.md
build
dist
node_modules
LICENSE
package-lock.json
.git
.DS_Store
.env

And here's the .env file ...

VITE_API_BASE_URL=https://example.com

And this is how I'm accessing the env variable inside the code ...

import.meta.env.VITE_API_BASE_URL

Whenever I build the Docker image and run the Docker container, the VITE_API_BASE_URL is always undefined in the network tab, however when I remove the .env from the .dockerignore file and build the image again and run it, it works fine. But obviously that's not the solution, I need the app to be able to read the env variables inside the Dockere container.

What can I do?

Answer 1

For those who are struggling, and thanks to @jonrsharpe comment, here's what you need to do ...

You need to pass the Env variables to your Docker container somehow, what worked for me was passing the variables during the Docker image build, NOT when running the container, by creating a build args in your Dockerfile like this ...

FROM node:18.17.1-alpine

# Define build arguments for environment variables
ARG VITE_API_BASE_URL
ARG VITE_API_KEY

# Set environment variables during the build process
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
ENV VITE_API_KEY=$VITE_API_KEY

WORKDIR /app

COPY package.json .
RUN npm install
COPY . .

# Rest of your Dockerfile...

# For example:
RUN npm run build

EXPOSE 8080
CMD ["npm", "run", "preview"]

Then you can pass the values of those args to your Docker image build command like this ...

docker build \
  --build-arg VITE_API_BASE_URL=https://example.com \
  --build-arg VITE_API_KEY=A12O6f90eCfMFf8 \
  -t your-image-name .

That's it.

Answer 2

I got to work passing env variable when running the container.

In my .env.production file in vite project I put the values in a standard starting with MY_APP_

VITE_API_SMARTGLPI_BACKEND=MY_APP_API_SMARTGLPI_BACKEND
VITE_SAC_NTINF_URL=MY_APP_SAC_NTINF_URL

So, I created a env.sh script with the content below:

#!/bin/sh
for i in $(env | grep 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

This script will be executed when the container get up and will change the values MY_APP_API_SMARTGLPI_BACKEND and MY_APP_SAC_NTINF_URL inside js and css code, replacing this values for the env vars informed on docker-compose.

I created a Dockerfile with the content

FROM node:20.7.0-alpine as BUILD_IMAGE
WORKDIR /app/react-app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx:1.21.6-alpine as PRODUCTION_IMAGE
COPY --from=BUILD_IMAGE /app/react-app/dist/ /usr/share/nginx/html
COPY env.sh /docker-entrypoint.d/env.sh
RUN chmod +x /docker-entrypoint.d/env.sh

As you can see, I copied the env.sh to inside /docker-entrypoint.d directory of nginx container. All script inside this directory will be executed as soon the container get up.

So, I created the docker-compose.yml file with the content below:

version: '3.3'

services:
  app:
    image: app-image:v1.0 
    environment:
      MY_APP_API_SMARTGLPI_BACKEND: "URL_BACKEND"
      MY_APP_SAC_NTINF_URL: "URL_SAC_NTINF"

More datails, you can see in https://dev.to/sanjayttg/dynamic-environment-variables-for-dockerized-react-apps-5bc5