How to use runtime environment variables in Quasar 2 app deployed in AKS without building multiple Docker images?

[jmriyaz84]

📌 Context:
We are developing a web application using the Quasar Framework 2 and before AKS managing environment-specific configurations using (dotenv) .env files (e.g., .env.dev,env.stage, .env.prod,. ) These values are injected at build time via npm build commands.

"build-dev": "cross-env ENVIRONMENT=development quasar build",
"build-stg": "cross-env ENVIRONMENT=stage quasar build",
"build-prod": "cross-env ENVIRONMENT=production quasar build",

We are now transitioning the application deployment to Azure Kubernetes Service (AKS), and we would like to follow the best practice of:

Building a single Docker image for all environments.

Injecting environment variables at runtime using Kubernetes ConfigMaps or Secrets, instead of relying on .env files.

❓ Problem Statement:
Since Quasar is a statically built SPA, it doesn't support runtime environment variables out of the box. We are looking for a clean and secure way to pass environment-specific variables at runtime without rebuilding the app for each environment.

✅ Our Goals:
Build and maintain a single Docker image across environments.

Avoid including .env files inside the Docker image.

Dynamically inject config values such as API_BASE_URL, APP_ENV,API_ENDPOINT,CLIENT_ID , TENENT_ID , REDIRECT_URL (for azure ad) etc., at runtime using Kubernetes-native mechanisms (e.g., ConfigMap, Secret).

Ensure the Quasar app can read these values on initial load (before any API call).

Note : Serving frontend via NGINX in Docker.

Any help, insight are greatly appreciated!

[stefanvanherwijnen]

Use a server and fetch the environment variables from there in your application.

[jmriyaz84]

Thank you @stefanvanherwijnen for your swift response, it would be great if you provide and example script or link (poc)

[stefanvanherwijnen]

For example in Express:

app.get('/', (req, res) => {
  res.send({
    someVar: process.env.someVar
  })
});

[jmriyaz84]

We followed the same approach. The code snippet is provided below — please review and advise if any corrections are needed.

Note: The configuration works correctly in the local environment, but not in dev, stage, or prod when deployed via AKS ConfigMap — we are getting process / process.env as undefined.

🗂️ File: src/boot/env.js

const localConfig = require('../config/local');

// Proxy to prefer process.env values; fallback to localConfig
const env = new Proxy({}, {
get: (_, key) => {
if (typeof process !== 'undefined' && process.env?.[key]) {
return process.env[key];
}
return localConfig[key];
}
});

module.exports = { env };

⚙️ File: quasar.config.js

const { configure } = require("quasar/wrappers");
const { env } = require("./src/boot/env");

//HR Microfrontend configuration through Webpack Module federation
cfg.plugins.push(
new ModuleFederationPlugin({
name: "host-app",
filename: "remoteEntry.js",
exposes: {},
remotes: {
hrAppComponent: hrApp@${env.HR_UI}remoteEntry.js
},
shared: {
...dependencies
}
})
);

🔐 File: AuthService.js
import { env } from "src/boot/env";

export class AuthService {
msalConfig = {
auth: {
clientId: env.CLIENT_ID,
redirectUri: env.REDIRECT_URI,
postLogoutRedirectUri: env.REDIRECT_URI,
authority: https://login.microsoftonline.com/${env.TENANT_ID},
navigateToLoginRequestUrl: false
},
cache: {
cacheLocation: "localStorage"
}
};
}

☸️ AKS ConfigMap (YAML)
apiVersion: v1
kind: ConfigMap
metadata:
name: quasar-env-config
data:
ENVIRONMENT: "stage"
CLIENT_ID: "xyz"
REDIRECT_URI: "xyz"
TENANT_ID: "xyz"
HR_UI: "https://example.com/"

🌐 NGINX Config
server {
listen 80;
server_name localhost;

location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}

location ~* .html$ {
add_header Cache-Control "no-store";
}

location ~* .(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg)$ {
expires 6M;
add_header Cache-Control "public, max-age=15778463, immutable";
access_log off;
}

gzip on;
gzip_types text/plain text/css application/json application/javascript text/javascript;
}

🔍 Request for Help

1. Is there any known issue where process.env doesn’t resolve properly inside AKS-deployed Quasar apps?

2. Is there a better way to inject environment variables in Quasar when using AKS + NGINX?

3. Any best practices for securely mapping ConfigMap values into Quasar builds?

[stefanvanherwijnen]

I can't help you with the specifics as I don't use AKS. What you need to keep in mind is that you are using different environments (development/production, browser/node) which behave differently. E.g., try console.log(process) in your browser and you'll see that it is undefined, as process is a Node.js variable.