Clean up environment and websocket code

client/.env

@@ -1,2 +1,4 @@
 VITE_BACKEND_URL=http://localhost:4400
+VITE_BACKEND_SOCKET_URL=
+
 VITE_AZURE_BACKEND_URL=http://localhost:4400

client/jest.setup.cjs

@@ -1,2 +1,2 @@
-process.env.VITE_BACKEND_URL = 'http://localhost:4000/';
-process.env.VITE_BACKEND_SOCKET_URL = 'https://ets-glitch-backend.glitch.me/';
+process.env.VITE_BACKEND_URL = 'http://localhost:4000';
+process.env.VITE_BACKEND_SOCKET_URL = 'https://ets-glitch-backend.glitch.me';

client/package-lock.json

@@ -50,6 +50,7 @@
                 "@typescript-eslint/eslint-plugin": "^8.5.0",
                 "@typescript-eslint/parser": "^8.5.0",
                 "@vitejs/plugin-react-swc": "^3.3.2",
+                "dotenv": "^16.4.5",
                 "eslint": "^9.10.0",
                 "eslint-plugin-react-hooks": "^5.1.0-rc-206df66e-20240912",
                 "eslint-plugin-react-refresh": "^0.4.12",
@@ -5918,6 +5919,19 @@
                 "node": ">=12"
             }
         },
+        "node_modules/dotenv": {
+            "version": "16.4.5",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+            "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://dotenvx.com"
+            }
+        },
         "node_modules/ejs": {
             "version": "3.1.10",
             "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",

client/package.json

@@ -54,6 +54,7 @@
         "@typescript-eslint/eslint-plugin": "^8.5.0",
         "@typescript-eslint/parser": "^8.5.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
+        "dotenv": "^16.4.5",
         "eslint": "^9.10.0",
         "eslint-plugin-react-hooks": "^5.1.0-rc-206df66e-20240912",
         "eslint-plugin-react-refresh": "^0.4.12",

client/src/constants.tsx

@@ -1,6 +1,6 @@
 // constants.tsx
 const ENV_VARIABLES = {
-    MODE: 'production',
+    MODE: process.env.MODE || 'production',
     VITE_BACKEND_URL: process.env.VITE_BACKEND_URL || "",
     VITE_BACKEND_SOCKET_URL: process.env.VITE_BACKEND_SOCKET_URL || "",
 };

client/src/main.tsx

@@ -1,6 +1,8 @@
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 
+import { config } from 'dotenv';
+
 import { BrowserRouter } from 'react-router-dom';
 
 import { ThemeProvider, createTheme } from '@mui/material';
@@ -9,6 +11,11 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 import './cssReset.css';
 import './index.css';
 
+// load environment variables once
+config();
+// Log environment variables to verify they are loaded
+console.log('Environment Variables:', process.env);
+
 const theme = createTheme({
     palette: {
         primary: {

client/src/services/WebsocketService.tsx

@@ -22,23 +22,18 @@ class WebSocketService {
 
     connect(backendUrl: string): Socket {
         console.log(`WebSocketService.connect('${backendUrl}')`);
-
-        // // Ensure the URL uses wss: if the URL starts with https:
-        // const protocol = backendUrl.startsWith('https:') ? 'wss:' : 'ws:';
-        // console.log(`WebSocketService.connect: protocol=${protocol}`);
-        // const url = backendUrl.replace(/^http(s):/, protocol);
-        // console.log(`WebSocketService.connect: changed url=${url}`);
         const url = backendUrl || window.location.host;
+        console.log(`WebSocketService.connect: url=${url}`);
 
         this.socket = io(url, {
             transports: ['websocket'],
-            reconnectionAttempts: 1
+            reconnectionAttempts: 1,
+            secure: url.startsWith('https'),
         });
 
         return this.socket;
     }
 
-
     disconnect() {
         if (this.socket) {
             this.socket.disconnect();

client/tsconfig.json

@@ -1,9 +1,9 @@
 {
     "compilerOptions": {
-        "target": "ESNext",
+        "target": "esnext",
+        "module": "esnext",
         "useDefineForClassFields": true,
         "lib": ["ES2020", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
         "skipLibCheck": true,
 
         /* Bundler mode */