From e41d0153859906cc760c7383cac108c54e7050d4 Mon Sep 17 00:00:00 2001
From: Mads Svejstrup <msv@iterator-it.dk>
Date: Fri, 22 Oct 2021 15:07:31 +0200
Subject: [PATCH] Make environment configurable using environment variables

---
 Dockerfile-prod                      | 14 ++++++++++++--
 angular.json                         |  6 ------
 src/assets/env.js                    |  7 +++++++
 src/assets/env.template.js           |  7 +++++++
 src/environments/environment.prod.ts |  5 -----
 src/environments/environment.ts      | 11 ++++-------
 src/index.html                       |  1 +
 7 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/env.js
 create mode 100644 src/assets/env.template.js
 delete mode 100644 src/environments/environment.prod.ts

diff --git a/Dockerfile-prod b/Dockerfile-prod
index 55877833..585d65c8 100644
--- a/Dockerfile-prod
+++ b/Dockerfile-prod
@@ -23,7 +23,7 @@ RUN npm install -g @angular/cli@7.3.9
 COPY . /app
 
 # Build the project and copy the files
-RUN npm run ng build -- --deploy-url=/ --prod
+RUN npm run ng build -- --deploy-url=/ --c production
 
 FROM bitnami/nginx:latest
 
@@ -37,7 +37,17 @@ COPY ./.nginx/nginx.conf /opt/bitnami/nginx/conf/server_blocks/frontend.conf
 # Copy from the stahg 1
 COPY --from=builder /app/dist/OS2IoT-frontend /app
 
+## Change user to perform privileged actions
+USER 0
+# Install envsubst
+RUN apt-get update && apt-get install -y gettext-base
+# Make sure we have write access to the env.js file without using the root user
+RUN chown 1001 /app/assets/env.js
+# Revert to the original non-root user
+USER 1001
+
 EXPOSE 8080
 EXPOSE 8081
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+# Substiture placeholders in env.template.js using environment variables overwrite env.js
+CMD ["/bin/sh",  "-c",  "envsubst < /app/assets/env.template.js > /app/assets/env.js && exec nginx -g 'daemon off;'"]
diff --git a/angular.json b/angular.json
index 99376f87..29cdb90b 100644
--- a/angular.json
+++ b/angular.json
@@ -40,12 +40,6 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
diff --git a/src/assets/env.js b/src/assets/env.js
new file mode 100644
index 00000000..c95e28db
--- /dev/null
+++ b/src/assets/env.js
@@ -0,0 +1,7 @@
+// This file will be overwritten when running in Docker using env.template.js and envsubst
+(function (window) {
+    window["env"] = window["env"] || {};
+    window["env"].PRODUCTION = false;
+    window["env"].BASE_URL = 'http://localhost:3000/api/v1/'; // For local testing
+    window["env"].TABLE_PAGE_SIZE = 20; // For local testing
+  })(this);
\ No newline at end of file
diff --git a/src/assets/env.template.js b/src/assets/env.template.js
new file mode 100644
index 00000000..a49bcf61
--- /dev/null
+++ b/src/assets/env.template.js
@@ -0,0 +1,7 @@
+// Variables in this file will be substituted using envsubst
+(function (window) {
+    window["env"] = window["env"] || {};
+    window["env"].PRODUCTION = "${PRODUCTION}";
+    window["env"].BASE_URL = "${BASE_URL}";
+    window["env"].TABLE_PAGE_SIZE = "${TABLE_PAGE_SIZE}";
+  })(this);
\ No newline at end of file
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
deleted file mode 100644
index 65a621ed..00000000
--- a/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const environment = {
-    production: true,
-    baseUrl: 'http://localhost:3000/api/v1/',
-    tablePageSize: 20,
-};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 380111d7..4747152c 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,11 +1,8 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
+// "env" is defined in env.js and facilitates dynamic configurations using environment variables
 export const environment = {
-    production: false,
-    baseUrl: 'http://localhost:3000/api/v1/',
-    tablePageSize: 20,
+    production: window["env"].PRODUCTION === "true",
+    baseUrl: window["env"].BASE_URL,
+    tablePageSize: parseInt(window["env"].TABLE_PAGE_SIZE) || 20
 };
 
 /*
diff --git a/src/index.html b/src/index.html
index a6529fcb..c984af8c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,6 +15,7 @@
   <meta name="theme-color" content="#ffffff">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="assets/env.js"></script>
 </head>
 
 <body>