'how to pass secret variable to a Vuejs app?

I have a Vuejs app and I want to pass some Okta authentication secrets such as clientId at runtime. The following is my Auth setup:

Vue.use(Auth, {
  issuer: process.env.VUE_APP_ISSUER,
  clientId: process.env.VUE_APP_CLIENT_ID,  
  redirectUri: process.env.VUE_APP_HOST_URL + '/implicit/callback', // Handle the response from Okta and store the returned tokens.
  scopes: ['openid', 'profile', 'email'],
  pkce: true 
})

Right now I have .env file that contains those variables with their values:

VUE_APP_HOST_URL=http://localhost:8080
VUE_APP_ISSUER=https://dev-12345.okta.com/oauth2/default
VUE_APP_CLIENT_ID=12345

I have been able to dockerize my Vuejs app and run it with that setup. But now I want to externalize those 3 secrets. If I remove those 3 variables from my .env file and inject them from docker run command the VUE_APP_HOST_URL value is undefined based on my console log.

The following is my docker run command:

docker run -e VUE_APP_HOST_URL=http://localhost:8080 
-e VUE_APP_ISSUER=https://dev-12345.okta.com/oauth2/default 
-e VUE_APP_CLIENT_ID=1234
-p 8080:8080 ghcr.io/myapp:latest


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source