{"id":414,"date":"2021-09-23T08:25:00","date_gmt":"2021-09-23T06:25:00","guid":{"rendered":"https:\/\/www.kehrwasser.com\/blog\/?p=414"},"modified":"2021-09-27T12:14:18","modified_gmt":"2021-09-27T10:14:18","slug":"low-level-configure-angular-apps-on-different-environemt-how-to","status":"publish","type":"post","link":"https:\/\/www.kehrwasser.com\/blog\/2021\/09\/23\/low-level-configure-angular-apps-on-different-environemt-how-to\/","title":{"rendered":"Low-Level: Configure Angular-Apps on different environments [How-To]"},"content":{"rendered":"

Disclaimer for german readers:<\/strong> Dieser Artikel besch\u00e4ftigt sich mit technischen Details. Falls sie auf der Suche nach Heigh-Level-Erkl\u00e4rungen sind, werden Sie in andern Artikeln eher f\u00fcndig.<\/p><\/blockquote>\n

It shouldn’t take a rebuild to reconfigure an app for a certain environment. It should be build once and in each deployed state (test, nightly, demo, pre-prod, staging, prod, etc) have the configuration that applies on the server, respectivly environment.<\/p>\n

The most common way to configure an app in a certain environment is by using environment variables. You can easily set them through .env files in Docker, Vagrant, AWS and other service providers.<\/p>\n

To archive that, let’s start at the server side: A JavaScript-application runs on a webserver. It consists out of plain text files. While running on a client’s browser, there is now way for the JavaScript to access server values such as environment variables during runtime.<\/p>\n

We need to inject the values, that life inside our server into the text files of our JavaScript application.<\/p>\n

First, prepare a file called env.template.js<\/code> with the environment variables you expect.<\/p>\n

(function (window<\/em>) {\n    window[\"env\"] = window[\"env\"] || {};\n\n    \/\/ Environment variables TEMPLATE<\/em>\n    window[\"env\"][\"title\"] = \"${TITLE}\"; \n})(this<\/em>);<\/pre>\n
And again, there is no pre-existing mechanism. Here we can see, we prepare that file with placeholders ${XYZ}<\/code> as strings. To inject the environment variables, that live on the server and thus can be differ from one environment to another.<\/p>\n
To create a mechanism we need to run the following command on the server (this can be done during the deployment process to a certain environment, e.g. in an CI\/CD-pipeline.<\/p>\n
envsubst < \/home\/nonroot\/htdocs\/assets\/env.template.js > \/home\/nonroot\/htdocs\/assets\/env.js<\/pre>\n
What this does is, it takes all the environment variables, set to a certain value currently on the machine, and replaces all the placeholders ${XYZ}<\/code> that match.<\/p>\n
For example if there was an environment variable TITLE<\/code> set to "This is a title"<\/code>, then any occurance of ${TITLE}<\/code> inside the file would be replaced by „This is a title“ (without the quotes). After that the new resulting file is written into a new file, here <\/p>\n
\/home\/nonroot\/htdocs\/assets\/env.js<\/pre>\n
The contents of the new file would look like the following snippet shows.<\/p>\n
(function (window<\/em>) {\n    window[\"env\"] = window[\"env\"] || {};\n\n    \/\/ Environment variables TEMPLATE<\/em>\n    window[\"env\"][\"title\"] = \"This is a title\"; \n})(this<\/em>);<\/pre>\n
That is what we wanted to have. We had no pre-existing mechanism, that lets us access the environment variables on the server inside a certain environment. Now we have injected them very clean into our application.<\/p>\n
We have them available, how to process them in our application?<\/h4>\n
There is nothing wrong with simply including the env.js<\/code> file in our index.html<\/code>, right into the header (of course you can export and import it, which would be slightly cleaner).<\/p>\n
<\/em>\n