Injecting runtime environment variables in a Vite SPA (Docker "build once, deploy anywhere")

[ghost]

Hey folks. I'm moving a Vite SPA to a strict "build once, deploy anywhere" Docker pipeline.

The problem is import.meta.env is statically replaced during vite build. If I build the Docker image in my CI pipeline, the staging variables get baked into the minified bundle. I need to swap API URLs at runtime based on the container environment.

Since this is a pure SPA being served by Nginx (no Node SSR to inject them dynamically), how are you guys cleanly handling runtime configuration in Vite without triggering rebuilds?

[barry166]

Vite cannot make import.meta.env runtime-configurable because those values are statically replaced during the build. Generate a separate file when the container starts, for example /config.js containing window.__APP_CONFIG__ = { API_URL: "..." }, load it before the app bundle, and have the SPA read from that object (or fetch a non-cached /config.json before mounting). An Nginx entrypoint can create the file with envsubst, so the image stays identical across environments; only put public configuration there, never secrets.

[paramjeetn]

The standard and most reliable pattern for "build once, deploy anywhere" with a Vite SPA on Nginx without rebuilding is using an injected runtime config file generated at container startup (docker-entrypoint.sh).

Recommended Pattern:

1. In your index.html head:

<script src="/env-config.js"></script>

2. In your Docker entrypoint (entrypoint.sh):
   Before starting Nginx, dump environment variables matching a prefix (e.g., VITE_ or APP_) into window.__ENV__:

#!/bin/sh
cat <<EOF > /usr/share/nginx/html/env-config.js
window.__ENV__ = {
  API_URL: "${API_URL:-http://localhost:8000}",
  ENVIRONMENT: "${ENVIRONMENT:-production}"
};
EOF

exec nginx -g 'daemon off;'

3. In your Vite app code (src/config.ts):
   Create a config helper that falls back to import.meta.env during local vite dev and uses window.__ENV__ in production:

declare global {
  interface Window {
    __ENV__?: Record<string, string>;
  }
}

export const config = {
  apiUrl: window.__ENV__?.API_URL || import.meta.env.VITE_API_URL || "http://localhost:8000",
  environment: window.__ENV__?.ENVIRONMENT || import.meta.env.MODE,
};

This keeps your Vite production artifacts completely immutable across Dev/Staging/Prod Docker deployments.