Read BackendPort from backend.cfg - Maybe works - have fun

Author: Gimleux

webapp_frontend/public/backend.cfg

@@ -0,0 +1 @@
+8080

webapp_frontend/src/api.ts

@@ -1,6 +1,22 @@
-import Axios from "axios";
+import Axios, {AxiosResponse} from "axios";
 
-const uri = "http://localhost:8080";
+let uri:string;
+const localhost:string = "http://localhost:";
+const backendPortFilePath:string = "./backend.cfg";
+
+function setBackendPort():Promise<string>{
+    return new Promise((resolve, reject) => {
+        Axios.get(backendPortFilePath)
+            .then((data:AxiosResponse<string>) => {
+                uri = localhost + data.data;
+                console.log(`[API] ${uri}`)
+                resolve(data.data);
+            })
+            .catch(((error:any) => {
+                reject(error);
+            }));
+    });
+}
 
 interface BackendHealthData {
     uptimeInSeconds: number
@@ -18,4 +34,4 @@ function callBackendHealth():Promise<BackendHealthData>{
     });
 }
 
-export {callBackendHealth}
+export {setBackendPort, callBackendHealth}

webapp_frontend/src/components/App.tsx

@@ -1,15 +1,26 @@
 import React, {ReactElement, useEffect, useState} from 'react';
 import logo from '../logo.svg';
 import './App.css';
-import {callBackendHealth} from "../api";
+import {setBackendPort, callBackendHealth} from "../api";
 
-function App():ReactElement {
+function App(): ReactElement {
     const [backendLiveTime, setBackendLiveTime] = useState<number | string>("Init");
 
     useEffect(() => {
-        updateVariables()
+        Promise.resolve(setBackendPort())
+            .then((backendPort:string) => {
+                console.log("[APP] Backend-Port = " + backendPort)
+                callInitialBackendRequests()
+            })
+            .catch((error:any) => {
+                alert("Error: Problems with backend.cfg - " + error)
+            })
     });
 
+    function callInitialBackendRequests():void {
+        updateVariables()
+    }
+
     function updateVariables(): void {
         Promise.all([callBackendHealth()])
             .then(([backendHealthData]) => {