I'm a back-end developer. I've done things with client side js frameworks but not too many.

I am configuring the CI/CD pipeline for a VueJs application that uses Vite, building a docker image with an nginx base image and serving the VueJs within it.

For example, assuming that I can create a dist folder out of the VueJs with

npm run build

then I could run the web app with a simple http web server such as

npm install -g http-server
cd dist
http-server

or copy the contents of dist into nginx when building a Docker image:

FROM nginx:stable-alpine
COPY dist/ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

In other words, the js web app does not require node as it's a bunch of html+css+js served by a web server that does not understand javascript.

I want to have the same approach as in the back-end: a build once, deploy anywhere therefore I want to be able to have the JS code rely on environment variables, and then decide at launch time which environment variable values to inject (i.e: when I spin up a container like docker run -e MySetting=foo repo/front-end-app).

I keep struggling to find a solution to that. If I try to access environment variables in OS from the VueJs app with process.env I get undefined, so I guess that's not the right approach when the javascript runs in the browser.

So I need a way to provide settings or secrets at server side, but that does not seem possible in my opinion, because the nginx server does not execute code, it simply serves static files.

How does people deal with this? Am I forced to have some process running in the server side under NodeJs and deploy the application as a NodeJs app so that I can protect secrets?

Otherwise, even if I was able to generate an env file on the fly when spinning up the docker container, that file would have to be served to the browser also, and the secrets (e.g: basic auth credentials, third party api key, etc.) would be exposed.

Hopefully someone can refer me to a good link to read about or clarify things, because I keep hitting a wall when googling. Thanks!

UDPDATE 1 2022-04-01: I had a look at this https://create-react-app.dev/docs/adding-custom-environment-variables/ and I'm still confused.

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

I understand why is dangerous to include secrets in the app itself. But does that mean that there is no safe solution at all when using client side?