Make environment configurable using environment variables (#52)

OS2iot · Nov 4, 2021 · 2b38568 · 2b38568
1 parent 0f55aae
commit 2b38568
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 20 deletions.
diff --git a/Dockerfile-prod b/Dockerfile-prod
@@ -23,7 +23,7 @@ RUN npm install -g @angular/[email protected]
 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
@@ -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
@@ -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);
diff --git a/src/assets/env.template.js 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);
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
diff --git 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
@@ -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>