Modified retrival of backend url (#4)

- migrated url to use configuration file
- started changing Dockerfile to make sure the config exists

public/assets/config/config.json

@@ -0,0 +1,3 @@
+{
+  "serverEndpoint": "http://localhost:5200"
+}

src/app/overlay/overlay.component.ts

@@ -1,34 +1,39 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { TrackerComponent } from '../tracker/tracker.component';
-import { ActivatedRoute } from '@angular/router';
-import { SocketService } from '../services/SocketService';
-
+import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
+import { TrackerComponent } from "../tracker/tracker.component";
+import { ActivatedRoute } from "@angular/router";
+import { SocketService } from "../services/SocketService";
+import { Config } from "../shared/config";
 
 @Component({
-  selector: 'app-overlay',
-  templateUrl: './overlay.component.html',
-  styleUrls: ['./overlay.component.scss']
+  selector: "app-overlay",
+  templateUrl: "./overlay.component.html",
+  styleUrls: ["./overlay.component.scss"],
 })
 export class OverlayComponent implements OnInit, AfterViewInit {
-
   @ViewChild(TrackerComponent) trackerComponent!: TrackerComponent;
   groupCode: string = "UNKNOWN";
   socketService!: SocketService;
 
-  constructor(private route: ActivatedRoute) {
-    this.route.queryParams.subscribe(params => {
-      this.groupCode = params['groupCode']?.toUpperCase() || "UNKNOWN";
+  constructor(
+    private route: ActivatedRoute,
+    private config: Config,
+  ) {
+    this.route.queryParams.subscribe((params) => {
+      this.groupCode = params["groupCode"]?.toUpperCase() || "UNKNOWN";
       console.log(`Requested group code is ${this.groupCode}`);
     });
   }
 
   ngOnInit(): void {
-    const siteUrl = window.location.hostname;
-    this.socketService = new SocketService(`https://${siteUrl}:5200`, this.groupCode);
+    this.socketService = new SocketService(
+      this.config.serverEndpoint,
+      this.groupCode,
+    );
   }
 
   ngAfterViewInit(): void {
-    this.socketService.subscribe((data: any) => {this.trackerComponent.updateMatch(data)});
+    this.socketService.subscribe((data: any) => {
+      this.trackerComponent.updateMatch(data);
+    });
   }
-
 }

src/app/services/SocketService.ts

@@ -10,18 +10,25 @@ export class SocketService {
     this.groupCode = groupCode;
     this.socketEndpoint = socketEndpoint;
 
-    this.socket = io.connect(this.socketEndpoint, { autoConnect: true, reconnection: true });
+    this.socket = io.connect(this.socketEndpoint, {
+      autoConnect: true,
+      reconnection: true,
+    });
 
-    this.socket.once("logon_success", () => { console.log("Logged on successfully") });
+    this.socket.once("logon_success", () => {
+      console.log("Logged on successfully");
+    });
 
     //registering main data handler
     this.socket.on("match_data", (data: string) => {
-      this.subscribers.forEach(e => e(JSON.parse(data)));
+      this.subscribers.forEach((e) => e(JSON.parse(data)));
     });
 
     //setting up reconnection attempt handler
     this.socket.io.on("reconnect_attempt", (attempt: number) => {
-      console.log(`Connection lost, attempting to reconnect to server (Attempt: ${attempt})`);
+      console.log(
+        `Connection lost, attempting to reconnect to server (Attempt: ${attempt})`,
+      );
     });
 
     //setting up reconnection handler
@@ -37,5 +44,4 @@ export class SocketService {
   subscribe(handler: Function) {
     this.subscribers.push(handler);
   }
-
-}
+}

src/app/shared/config.ts

@@ -0,0 +1,3 @@
+export class Config {
+  serverEndpoint!: string;
+}

src/main.ts

@@ -1,12 +1,18 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from "./app/app.module";
+import { environment } from "./environments/environment";
+import { Config } from "./app/shared/config";
 
-if (environment.production) {
-  enableProdMode();
-}
+fetch("/assets/config/config.json").then(async (res) => {
+  const configuration: Config = await res.json();
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+  if (environment.production) {
+    enableProdMode();
+  }
+
+  platformBrowserDynamic([{ provide: Config, useValue: configuration }])
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err));
+});