Merge pull request #113 from UST-QuAntiL/feature/load-envs-after-build

set environment variables dynamically

add dockerignore

.dockerignore

@@ -0,0 +1,5 @@
+dist
+node_modules
+docs
+.idea
+.github

Dockerfile

@@ -1,24 +1,25 @@
-FROM node:14.9.0-alpine
-
+FROM node:alpine AS builder
 RUN apk add --no-cache git gettext
 
-ENV ALTAS_URL localhost
-ENV ATLAS_PORT 8080
-ENV PATTERNPEDIA_URL localhost
-ENV PATTERNPEDIA_PORT 8081
-ENV NISQ_ANALYZER_URL localhost
+ENV QC_ATLAS_HOST_NAME localhost
+ENV QC_ATLAS_PORT 8080
+ENV PATTERN_ATLAS_HOST_NAME localhost
+ENV PATTERN_ATLAS_PORT 8081
+ENV NISQ_ANALYZER_HOST_NAME localhost
 ENV NISQ_ANALYZER_PORT 8082
-ENV PATTERN_ATLAS_UI_URL localhost
+ENV PATTERN_ATLAS_UI_HOST_NAME localhost
 ENV PATTERN_ATLAS_UI_PORT 4201
+ENV LATEX_RENDERER_HOST_NAME localhost
+ENV LATEX_RENDERER_PORT 8083
 
-WORKDIR /usr/src/app
+WORKDIR /app
 
-COPY package*.json ./
 COPY . .
 
-RUN npm install -g @angular/cli @angular-devkit/build-angular && npm install
-RUN chmod +x docker-entrypoint.sh
+RUN npm install && npm run build --prod
 
-EXPOSE 4200
+FROM nginx:alpine
+COPY --from=builder app/dist/* /usr/share/nginx/html
 
-CMD ["sh", "docker-entrypoint.sh"]
+# When the container starts, replace the env.js with values from environment variables
+CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/env.js.template > /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'"]

README.md

@@ -4,7 +4,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:80/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 

src/assets/env.js

@@ -0,0 +1,17 @@
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+(function (window) {
+  window['env'] = window['env'] || {};
+
+  // Environment variables
+
+  window['env']['production'] = false;
+  window['env']['nisqAnalyzer'] = true;
+  window['env']['QC_ATLAS_HOST_NAME'] = 'localhost';
+  window['env']['NISQ_ANALYZER_HOST_NAME'] = 'localhost';
+  window['env']['PATTERN_ATLAS_HOST_NAME'] = 'localhost';
+  window['env']['LATEX_RENDERER_HOST_NAME'] = 'localhost';
+  window['env']['QC_ATLAS_PORT'] = 8080;
+  window['env']['NISQ_ANALYZER_PORT'] = 8081;
+  window['env']['PATTERN_ATLAS_PORT'] = 8082;
+  window['env']['LATEX_RENDERER_PORT'] = 8083;
+})(this);

src/assets/env.js.template

@@ -0,0 +1,17 @@
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+(function (window) {
+  window['env'] = window['env'] || {};
+
+  // Environment variables
+  window['env']['production'] = true;
+  window['env']['nisqAnalyzer'] = "${NISQ_ANALYZER_HOST_NAME}" ? true : false;
+  window['env']['QC_ATLAS_HOST_NAME'] = "${QC_ATLAS_HOST_NAME}";
+  window['env']['NISQ_ANALYZER_HOST_NAME'] = "${NISQ_ANALYZER_HOST_NAME}";
+  window['env']['PATTERN_ATLAS_HOST_NAME'] = "${PATTERN_ATLAS_HOST_NAME}";
+  window['env']['LATEX_RENDERER_HOST_NAME'] ="${LATEX_RENDERER_HOST_NAME}";
+  window['env']['QC_ATLAS_PORT'] = "${QC_ATLAS_PORT}";
+  window['env']['NISQ_ANALYZER_PORT'] = "${NISQ_ANALYZER_PORT}";
+  window['env']['PATTERN_ATLAS_PORT'] = "${PATTERN_ATLAS_PORT}";
+  window['env']['LATEX_RENDERER_PORT'] ="${LATEX_RENDERER_PORT}";
+})(this);
+

src/environments/environment.ts

@@ -3,13 +3,32 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  nisqAnalyzer: true,
-  API_URL: 'http://localhost:8080/atlas',
-  NISQ_API_URL: 'http://localhost:8081/nisq-analyzer',
-  PATTERN_ATLAS_API_URL: 'http://localhost:8082/patternpedia',
-  PATTERN_ATLAS_UI_URL: 'http://localhost:4201',
-  LATEX_RENDERER_API_URL: 'http://localhost:8083',
+  production: window['env']['production'] || false,
+  nisqAnalyzer: window['env']['nisqAnalyzer'] || true,
+  API_URL:
+    window['env']['QC_ATLAS_HOST_NAME'] && window['env']['QC_ATLAS_PORT']
+      ? `http://${window['env']['QC_ATLAS_HOST_NAME']}:${window['env']['QC_ATLAS_PORT']}/atlas`
+      : 'http://localhost:8080/atlas',
+  NISQ_API_URL:
+    window['env']['NISQ_ANALYZER_HOST_NAME'] &&
+    window['env']['NISQ_ANALYZER_PORT']
+      ? `http://${window['env']['NISQ_ANALYZER_HOST_NAME']}:${window['env']['NISQ_ANALYZER_PORT']}/nisq-analyzer`
+      : 'http://localhost:8081/nisq-analyzer',
+  PATTERN_ATLAS_API_URL:
+    window['env']['PATTERN_ATLAS_HOST_NAME'] &&
+    window['env']['PATTERN_ATLAS_PORT']
+      ? `http://${window['env']['PATTERN_ATLAS_HOST_NAME']}:${window['env']['PATTERN_ATLAS_PORT']}/patternpedia`
+      : 'http://localhost:8082/patternpedia',
+  PATTERN_ATLAS_UI_URL:
+    window['env']['PATTERN_ATLAS_HOST_NAME'] &&
+    window['env']['PATTERN_ATLAS_PORT']
+      ? `http://${window['env']['PATTERN_ATLAS_HOST_NAME']}:${window['env']['PATTERN_ATLAS_UI_PORT']}/patternpedia`
+      : 'http://localhost:4201',
+  LATEX_RENDERER_API_URL:
+    window['env']['LATEX_RENDERER_HOST_NAME'] &&
+    window['env']['LATEX_RENDERER_PORT']
+      ? `http://${window['env']['LATEX_RENDERER_HOST_NAME']}:${window['env']['LATEX_RENDERER_PORT']}`
+      : 'http://localhost:8083',
 };
 
 /*

src/index.html

@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="assets/favicon.png">
+  <!-- Load environment variables -->
+  <script src="assets/env.js"></script>
 </head>
 <body>
   <app-root></app-root>