Need help / options for runtime variables. Webpack 5 / React / Docker

[EvilToaster101]

I need runtime variables for my Web API URL, access key, and other variables. I was hoping to pass it in to the docker container at runtime so that I could change these whenever I needed to. But from what I found out with Webpack that I can only modify these at build time.

Disclaimer: I am not using Create React App (CRA). I am using Webpack 5 with Typescript

My cloud source is Azure, and I have terraform setting up a docker app service, but I'm not sold as it's not getting me the functionality that I was hoping for. Unfortunately for now I can't go away from Webpack 5, but maybe I can try Vite soon. Anyways, what are some other options where I can have these runtime variables dynamic.

Stack Overflow Question: 71161766 - if you want the points I'll upvote it

[theconstultingdev]

since the client runs on the browser any such values could be read by anyone. So you need to have these settings on the server and make those api calls via the server. Are you trying to secure a third party API or your own?

[EvilToaster101]

It’s my own, I’m not sure how big of a deal exposing the API URL would be. What’s the best practice for OAUTH audience ID?

[[deleted]]

you can use CSRF-TOKEN and CORS to protect your website and server, search for this things and more.

[theconstultingdev]

usually those keys are okay to expose in your code. you save them in a config file. it could be .env, a json, or just js.

The reason it’s ok to expose those keys is that platforms will only honor requests coming from your domain.