DEV Community

Cover image for Ability to change configuration after build. For containerized Angular and more
mixth for Zarewoft

Posted on • Updated on

Ability to change configuration after build. For containerized Angular and more

It is pretty normal to encounter an application that requires multiple environment configurations. But when it comes to web, we tend to build a whole new app once again when we change just the environment configurations. And the process takes minutes.

In the world of containerization, this strategy of building everything makes it difficult to achieve one image, deploy everywhere, which I am such a fan of. And when someone tries to do so, it always makes a BIG image with building tools and so on. Plus, a long starting time for the containers too.

So my goals here are:

  • We can build once and deploy everywhere.
  • We can have a small final product image.
  • We can have the ability to change those environment configuration just at the deployment time.

With a simple web concept, we can achieve that.


Yep... you heard it right.

  1. I plan to put <script> in the <body>. Inside this <script>, I want to declare a global variable which is a simple object contains configuration of the environment. But, I am not going to put it in the index.html yet. Let's put a placeholder, say <!-- CONFIG -->, instead.
  2. In configuration file (such as what we have in typical Angular projects), I implement it to read global variable first, or else, assign a default configuration.
  3. Add a new sed command for docker image. Which basically do just replace the placeholder with a config from environment variables.

Just that. We are good to go! Here are gists just for an idea.


The config is plainly exposed.

This might let some users making weird things to your web. But I guess, it gonna have just a minimal impact since if they look hard enough, they might find it in any scenarios. Anyway, please proceed with caution.

That's it! Thanks for reading 😁
If you have any questions or some kind of improvement, please let me know in the comment below.

Top comments (0)