Using K8s Secrets for Quasar Vue3 App Values - environment-variables

Question

I am BRAND new to Quasar Vue3 apps(DevOps helping dev team). We use GitLab for our CICD pipelines and our apps run on OpenShift containers. We also use OpenShift secrets for populating the environment variables for each environment(envFrom) when the container starts. However, we are having a hard time figuring out how to do this with a new Quasar Vue3 app. We've gone through various iterations found on "Google University" and Quasar's documentation, but nothing has helped. We've tried the method of using process.env in the quasar.config.js file:
env: {
myVar: process.env.VUE_APP_VARIABLE
}
However, that seems to be a build-time method and only uses a dummy value we've put into a GitLab CICD variable for testing.
I've also tried the method of using a .js script file defining a function:
export default function getEnv(name) {
return process.env[name];
}
And then importing and calling that function in the MainLayout.vue file:
import getEnv from '../service/env.js'
return {
.
.
myVar: getEnv("VUE_APP_VARIABLE")
}
That works if I return hard-coded string from the script(eg: return "ValueFromScript";), but if I try to return using process.env at all with varied syntaxes, I get blank/null values
return process.env[name];
return process.env."name";
return process.env.VUE_APP_VARIABLE;
return process.env["VUE_APP_VARIABLE"];
etc.
Lastly, we've experemented with the "dotenv" method described here, but that only reads from a .env file.
Can anyone tell me what I'm missing or if this is even possible? I really want to avoid using .env files, it's really not the best practice for production applications.
Thanks.

Answer 1

This is a web application that runs in a browser, you can't access runtime env variables. If you configure FOO: 'test' in quasar.config.js > build > env, then reference it in your app as console.log(process.env.FOO), on build time it will get replaced and turned into console.log('test'). You can check the final code in dist/* to confirm.
You wouldn't need to use a secret management tool here because all the env variables you want to pass to the client application will be seen by users someplace. If you are passing a secret key or similar, then you are probably doing it wrong. You should handle it in the server where it can stay secret instead.
If you are sure the values that will be accessed in the browser are not secret, and all you just want is just them to change on runtime, then you can implement a runtime variable system. It can be done by:
Making an API request on runtime and getting them.
Storing a JSON file somewhere and reading it.
Doing SSR and assigning the variables into ssrContext on the server side. As an example, on the server side, in an SSR middleware, do ssrContext.someVar = process.env.SOME_VAR(env variables are runtime in server-side because they are Node apps that run on a server), then access ssrContext.someVar in the Vue app when the app is rendering on the server side.
If you have some secret things to do, you can do it inside the SSR middleware and return the non-secret result of it to your app using this method as well. So, if this is the case, you can use a secret manager to keep things only available to the Node application which uses the secrets.

Answer 2

Working with our Devs, we came up with a way to setup and use values from OpenShift secrets as environment variables at RUNTIME(should work for K8s in general). I've seen bits and pieces of this in my searches, hopefully I can lay it out in a cohesive format for others that might have the same application requirement.
PreSetup
Create a .sh script file somewhere in your src directory that defines a "getEnv" function as follows. We created a folder for this at src/service:
env.js
export default function getEnv(name) {
return window?.configs?.[name] || process.env[name];
}
Create another .sh script file that writes a json string to another script file to be used later in your code.
This will create another script file dynamically when the container starts up as you will see in later steps.
get-env-vars.sh
JSON_STRING='window.configs = {
"ENV_VAR1": "'"${SECRET_VAR1}"'",
"ENV_VAR2": "'"${SECRET_VAR2}"'"
}'
echo $JSON_STRING >> src/service/config_vars.js
Implementation
In your Dockerfile, add a COPY layer to copy the get-env-vars.sh script to the /docker-entrypoint.d folder.
If you aren't familiar with the docker-entrypoint.d folder; basically, as the container starts up, it will run any .sh file that is located in this folder.
COPY ./get-config-vars.sh /docker-entrypoint.d
Then, in our main index.html file, add the following in the main <head> section to reference/call the script file created by the get-env-vars.sh script at startup:
<script src="/service/config_vars.js"></script>
At this point, we now have a "windows.config" JSON object variable ready for the getEnv() function to pull values from when called.
Wherever you need to be utilizing any of these variables, import the env.js file created earlier to import getEnv() function.
import getEnv from "../service/env.js"
Then simply use the function like you would a variable anywhere else. getEnv("VAR1")
Summary
As an overview here is the workflow the container executes when it is scheduled/started in your K8s environment
Container is scheduled and executes the get-env-vars.sh script, which creates the config_vars.js file
Application starts up. The index.html file executes the config_vars.js file, creating the window.configs JSON object variable
Where needed, the code imports the getEnv() function by importing the env.js file
Calling the getEnv(<variable_name>) function retrieves the value for the specified environment variable from the JSON object variable
When you need to add/update the key-value pairs in your K8s/OpenShift secret, you can delete/restart your POD, which will start the process over, loading in the updated information.
Hopefully this all makes sense.