<p>Having read the Quasar framework's description for <a href="https://quasar.dev/quasar-cli-webpack/handling-process-env" rel="nofollow noreferrer">Handling process.env</a>, I understand that it is possible to add environment variables <strong>when building the application</strong> for development or production.</p>
<blockquote>
<p>You can even go one step further. Supply it with values taken from the
quasar dev/build env variables:</p>
</blockquote>
<pre class="lang-js prettyprint-override"><code>// quasar.config.js
build: {
  env: {
    FOO: process.env.FOO,
  }
}
</code></pre>
<p>Then, I can use that variable by using <code>process.env.FOO</code>.</p>
<p>For staging and production, however, I'm building a Docker image which runs an NGINX serving the final <code>dist/spa</code> folder. I'd like to pass an environment variable when deploying the application, so that I can configure the <code>FOO</code> variable depending on its value in the <code>docker-compose.yml</code>:</p>
<pre class="lang-yaml prettyprint-override"><code>// staging
services:
  image: my-quasar-image
  environment:
    FOO: &quot;STAGING&quot;

// production
services:
  image: my-quasar-image
  environment:
    FOO: &quot;PROD&quot;
</code></pre>
<p>I have found some blog post which mentions that you could create a custom <code>entrypoint.sh</code> for the Docker image which reads env variables and adds them to the <code>window</code> object but I wonder if there might be a more &quot;elegant&quot; solution.</p>
<p>The primary question is: Is it possible to pass in (Docker) environment variables before the application starts and which are then available on <code>process.env</code>?</p>

<p>This is how I sorted my requirement that works perfectly for my use case.
A quick review of what I wanted to do: Be able to pass in environment variables via a docker-compose file to a Vue.js application to allow different team members to test different development APIs depending on their assignment(localhost if running the server locally, api-dev, api-staging, api-prod).</p>
<p><strong>Update public/index.html</strong> to contain following at the head:</p>
<pre><code>&lt;script&gt;
   // CONFIGURATIONS_PLACEHOLDER
&lt;/script&gt;
</code></pre>
<p>There is no need to update vue.config.js as we are using the public folder for configuration.</p>
<p><strong>Create new file</strong> env.js to consume runtime variables (keep it inside src folder)</p>
<pre><code>export default function getEnv(name) {
    return window?.configs?.[name] || process.env[name];
}
</code></pre>
<p><strong>Create new bash file</strong> set-env-variable.sh in the root folder of the app.</p>
<pre><code>#!/bin/sh
JSON_STRING='window.configs = { \
  &quot;VUE_APP_VAR1&quot;:&quot;'&quot;${VUE_APP_VAR1}&quot;'&quot;, \
  &quot;VUE_APP_VAR2&quot;:&quot;'&quot;${VUE_APP_VAR2}&quot;'&quot; \
}'
sed -i &quot;s@// CONFIGURATIONS_PLACEHOLDER@${JSON_STRING}@&quot; /usr/share/nginx/html/index.html
exec &quot;$@&quot;
</code></pre>
<p><strong>Update docker file</strong> (assuming it's in the root folder of your vue app)</p>
<pre><code># build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html

COPY ./set-env-variable.sh /docker-entrypoint.d
RUN chmod +x /docker-entrypoint.d/set-env-variable.sh
RUN dos2unix /docker-entrypoint.d/set-env-variable.sh

EXPOSE 80
CMD [&quot;nginx&quot;, &quot;-g&quot;, &quot;daemon off;&quot;]
</code></pre>
<p><strong>Deployment</strong></p>
<pre><code>vue-app:
    ....
    volumes:
      - &quot;./nginx/templates/:/etc/nginx/templates/&quot;
    environment:
      VUE_APP_VAR1: my-app
      VUE_APP_VAR2: 8080
</code></pre>
<p><strong>Consuming variables</strong> in vue app</p>
<pre><code>import getEnv from &quot;./service/env.js&quot;;
var myVar = getEnv(&quot;VUE_APP_VAR1&quot;);
</code></pre>
