0

I have a dockerized Vue.js/Vite application that needs to talk to a backend API server. I'm currently using axios to perform these requests and depending on whether I'm currently developing locally or deploying onto a production server.

Locally, everything works perfectly – I have a .env file that just contains a API_URL=https://localhost:57100 entry that I then use as axios's base url with import.meta.env.API_URL.

However, when building for production and especially using Docker, things are much more hazy to me. As far as my understanding goes, Vite statically replaces import.meta.env statements, so I can't just do stuff like this:

environment:
    - API_URL=https://my_production_server.com:57100/

because the Vite application is already built and changing the container's environment variables won't do anything anymore.

I've seen approaches like this but they seem kinda odd and not very "pretty" to me. I wondered if there's anything else that I can do or if I'm just looking at the problem from a wrong perspective and there's a better way to do all of this.

If you need the context of the project I'm trying to achieve this for, it can be found on GitHub.

Bas von Bassadin
  • 90
  • 1
  • 11
  • Just for documentation, if anyone ever stumbles upon this, I also found this: https://medium.com/@spei/dynamic-runtime-environment-variables-for-dockerized-reactjs-angular-apps-8a78420ec82 It's not much prettier either, though... – Bas von Bassadin Jun 15 '23 at 09:14

0 Answers0