From 49d7ea30ef12a1f11fd507a4768cd70bd5caa687 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 2 Aug 2023 12:06:20 +0200
Subject: [PATCH] frontend: getting correct hostname and port

---
 frontend/package.json  |  2 +-
 frontend/src/App.tsx   | 10 ++++++----
 frontend/src/socket.ts |  8 ++++++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2533e87..3875806 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,7 +19,7 @@
     "web-vitals": "^3.4.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "NODE_ENV=development react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c0bbcc5..3015e41 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useReducer } from 'react';
-import { socket } from './socket';
-import { DataServiceComponent } from './components/DataServiceComponent';
-import { DataServiceJSON } from './components/GenericComponent';
+import { hostname, port, socket } from './socket';
+import {
+  DataServiceComponent,
+  DataServiceJSON
+} from './components/DataServiceComponent';
 
 type ValueType = boolean | string | number | object;
 
@@ -107,7 +109,7 @@ const App = () => {
 
   useEffect(() => {
     // Fetch data from the API when the component mounts
-    fetch('http://localhost:8001/service-properties')
+    fetch(`http://${hostname}:${port}/service-properties`)
       .then((response) => response.json())
       .then((data: DataServiceJSON) => dispatch({ type: 'SET_DATA', data }));
 
diff --git a/frontend/src/socket.ts b/frontend/src/socket.ts
index fda4753..f47f996 100644
--- a/frontend/src/socket.ts
+++ b/frontend/src/socket.ts
@@ -1,6 +1,10 @@
 import { io } from 'socket.io-client';
 
-const URL = 'ws://localhost:8001/';
-// process.env.NODE_ENV === 'production' ? undefined : 'ws://localhost:8001/ws';
+export const hostname =
+  process.env.NODE_ENV === 'development' ? `localhost` : window.location.hostname;
+export const port =
+  process.env.NODE_ENV === 'development' ? 8001 : window.location.port;
+const URL = `ws://${hostname}:${port}/`;
+console.debug('Websocket: ', URL);
 
 export const socket = io(URL, { path: '/ws/socket.io', transports: ['websocket'] });