Undesired Behavior: Environment variables are baked into the Docker image

[prokorpio]

Description

In the current setup, the environment variables used by the react app (REACT_APP_BACKEND, etc) from the .env file are only accessible during build time, and is hard coded into the docker image file during build process. This doesn't work well with dockerization as we prefer to be able to change these variables when spinning up containers from the image file. That is, we want to have the docker-compose file be able to set the environment variables at runtime.

This is a known issue in react apps, and at the time of posting is yet to be resolved. There is this docu about a workaround to this on the server side.

Currently, the (imperfect) solution I can suggest is to use two different images for dev and prod.

1. For the prod image BACKEND url, we can hard set the actual https address to be used in production.
2. For the dev image, we can set an IP address that is uniform across all developers such as localhost. This will work when the frontend and the backend containers all run from the same computer, but will fail once we test across the LAN, ie PC-backend via mobile-frontend.