v1

src/components/CableDetailComponent.js

@@ -6,6 +6,7 @@ import Modal from "react-modal";
 import "../assets/stylesheets/cabledetail.scss";
 
 Modal.setAppElement("#root");
+const hostname = window.location.hostname;  // Get the hostname from the URL bar
 
 class Cable {
   constructor(cableData) {
@@ -14,7 +15,7 @@ class Cable {
     this.brand = cableData.brand;
     this.position = cableData.position;
     this.image = cableData.image
-      ? `http://localhost${cableData.image}`
+      ? `http://${hostname}${cableData.image}`
       : DefaultPartImg;
     this.dynamicProps = {};
     this.horizontal = [];

src/index.js

@@ -12,7 +12,9 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 
 // Socket handler
 console.log("Connecting to WebSocket server.");
-const socket = new WebSocket("ws://localhost:9000");
+const hostname = window.location.hostname;  // Get the hostname from the URL bar
+const wsPort = "9000";
+const socket = new WebSocket(`ws://${hostname}:${wsPort}`);
 socket.addEventListener("open", function (event) {
   console.log("Websocket connected.");
   console.log("Welcome to Belden Jukebox!");