Merge pull request #22 from millenr/A2-2147

A2-2147 : Runs UI on /ui for docker container

Dockerfile

@@ -14,7 +14,7 @@ RUN npm install -g @angular/cli && npm install
 COPY . .
 
 # Build the application
-RUN ng build --configuration=production
+RUN ng build --configuration=production --base-href /ui/
 
 # Stage 2: Setup NGINX
 FROM nginx:alpine
@@ -23,13 +23,15 @@ FROM nginx:alpine
 COPY nginx-custom.conf /etc/nginx/conf.d/default.conf
 
 # Copy the build output from Stage 1 to the NGINX html directory
-COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/app
+RUN chmod og+r -R /usr/share/nginx/app
 
 # Copy the entrypoint script
 COPY ./entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 
-# Expose port 4200
+# Expose port 80 & 4200
+EXPOSE 80
 EXPOSE 4200
 
 # Use the entrypoint script

README.md

@@ -42,6 +42,8 @@ To build this container you can either build the docker compose file with `docke
 
 The container can than be run with either `docker compose -f docker-compose.yml up` or `docker run -p 4200:4200 smartgraph-ui`
 
+When running the container the application runs at `http://localhost:4200/ui/`
+
 ## Configuring at Runtime
 
 The application reads settings from `/assets/config.json`. While using the docker run option this file can be generated at runtime by setting the following environment variables:

docker-compose.yml

@@ -10,5 +10,5 @@ services:
     environment:
       - WRITE_CONFIG=true
       - ENVIRONMENT=local
-      - DATA_URL=ws://localhost:1338/socket.io
-      - API_SWAGGER_URL=http://localhost:1337/docs/
+      - DATA_URL=ws://localhost:1338/ws/
+      - API_SWAGGER_URL=http://localhost:1337/api/docs/

entrypoint.sh

@@ -12,14 +12,14 @@ else
   API_SWAGGER_URL="${API_SWAGGER_URL:?Error: API_SWAGGER_URL environment variable not set}"
 
   # Write to config.json file
-  cat > /usr/share/nginx/html/assets/config.json <<EOF
+  cat > /usr/share/nginx/app/assets/config.json <<EOF
 {
   "ENVIRONMENT": "$ENVIRONMENT",
   "DATA_URL": "$DATA_URL",
   "API_SWAGGER_URL": "$API_SWAGGER_URL"
 }
 EOF
-  chmod og+r /usr/share/nginx/html/assets/config.json
+  chmod og+r /usr/share/nginx/app/assets/config.json
 fi
 
 # Start NGINX

nginx-custom.conf

@@ -2,14 +2,14 @@ server {
     listen 4200;
     server_name localhost;
 
-    location / {
-        root   /usr/share/nginx/html;
+    location /ui/ {
+        root /usr/share/nginx/app; 
         index  index.html index.htm;
-        try_files $uri $uri/ /index.html;
+        try_files $uri $uri/ /ui/index.html;
     }
 
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   /usr/share/nginx/html;
     }
-}
+}

src/app/services/config.service.ts

@@ -1,17 +1,24 @@
 // src/app/config.service.ts
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { DOCUMENT, Location } from '@angular/common';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ConfigService {
   private config: any;
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient,
+    @Inject(DOCUMENT) private document: Document,
+    private location: Location
+  ) {}
 
   loadConfig(): Promise<any> {
-    return this.http.get('/assets/config.json').toPromise().then((config) => {
+    const baseUrl = this.document.location.origin + this.location.prepareExternalUrl('/');
+    const configUrl = `${baseUrl}assets/config.json`;
+
+    return this.http.get(configUrl).toPromise().then((config) => {
       this.config = config;
     });
   }

src/assets/config.json

@@ -1,6 +1,6 @@
 {
     "ENV": "local",
-    "DATA_URL": "ws://localhost:1338/socket.io",
+    "DATA_URL": "ws://localhost:1338/ws",
     "API_SWAGGER_URL": "http://localhost:5070/docs"
 }