How to pass environment variables to a frontend web application?

Question

I am trying to containerize a frontend web application and I am having troubles to figure out how to pass environment variables. The application is a Angular application, so

Answer 1

My solution: at run time use docker volumes to mount a specific js config file as the env.js.

I have a docker compose file for dev and prod.

I have dev.env.js and prod.env.js.

My html file references env.js.

In docker-compose.yml I volume mount either env file as env.js.

E.g. my dev compose:

web:
    image: nginx
    ports:
      - 80:80
    volumes:
      - ../frontend:/usr/share/nginx/html
      - ../frontend/dev.env.js:/usr/share/nginx/html/env.js

And my prod compose:

web:
    image: nginx
    ports:
      - 80:80
    volumes:
      - ../frontend:/usr/share/nginx/html
      - ../frontend/prod.env.js:/usr/share/nginx/html/env.js