Dynamically Set Asset URLs in HTML Based on Environment in a React Vite App AZURE AD B2C

Question

I'm working with a React Vite app and have stored my custom page layout for the sign-in user flow inside the public directory of my repo. The folder structure looks like this: public/loginFlow/

Is there a way to dynamically change the url's of my hosted files depending on the environment my app is on?

Like for example I have this:

<link href="https://mystorage.blob.core.windows.net/root/loginFlow/css/login.css" rel="stylesheet" type="text/css" data-preload="true"/>

But since I have those files hosted in my public folder, on my repo, I wanted something like:

<link href="https://localhost:6000/loginFlow/css/login.css" rel="stylesheet" type="text/css" data-preload="true"/>

Which works fine, but I want to dynamically set that url, so for example the app on prod environment, should have this url:

<link href="https://myapp.azurewebsites.net/loginFlow/css/login.css" rel="stylesheet" type="text/css" data-preload="true"/>

Not sure if this can be achieved, or if the only way is uploading those files to azure storage, but I would like to know if it's possible the way I explained. Thanks!