CORS implemented in a static manner: unable to configure on another machine

frontend/src/hooks/useSession.ts

@@ -92,6 +92,11 @@ export const useSession = (sessionId: string): [Session | null, Dispatch<SetStat
 
         webSocketService.onMessage(handleMessage);
 
+        const handleError = () => {
+            setError('Connection to the session server failed. Please check your connection and try again.');
+        };
+        webSocketService.onError(handleError);
+
         const handleSessionTerminated = () => {
             setSession(prevSession => {
                 if (prevSession) {

frontend/src/pages/SessionPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Container, Typography, Box, CircularProgress, Alert, TextField, Button } from '@mui/material';
+import { Container, Typography, Box, CircularProgress, Alert, TextField, Button, Snackbar } from '@mui/material';
 import { useSession, DesireSet, SessionState } from '../hooks/useSession';
 import DesireForm from '../components/DesireForm';
 import ResultsDisplay from '../components/ResultsDisplay';
@@ -14,6 +14,20 @@ const SessionPage = () => {
     const [topic, setTopic] = useState('');
     const [topicError, setTopicError] = useState(false);
     const [description, setDescription] = useState('');
+    const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+    React.useEffect(() => {
+        if (wsError) {
+            setSnackbarOpen(true);
+        }
+    }, [wsError]);
+
+    const handleSnackbarClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setSnackbarOpen(false);
+    };
 
     const handleSetupSession = () => {
         if (!topic.trim()) {
@@ -186,6 +200,11 @@ const SessionPage = () => {
                     </Alert>
                 )}
             </Box>
+            <Snackbar open={snackbarOpen} autoHideDuration={6000} onClose={handleSnackbarClose}>
+                <Alert onClose={handleSnackbarClose} severity="error" sx={{ width: '100%' }}>
+                    {wsError}
+                </Alert>
+            </Snackbar>
         </Container>
     );
 };

frontend/src/services/websocket.ts

@@ -14,7 +14,8 @@ class WebSocketService {
 
         this.currentSessionId = sessionId;
         this.currentClientId = clientId;
-        const wsUrl = `ws://localhost:8000/sessions/${sessionId}`;
+        const apiUrl = process.env.REACT_APP_API_URL || 'ws://localhost:8000';
+        const wsUrl = `${apiUrl.replace(/^http/, 'ws')}/sessions/${sessionId}`;
         this.ws = new WebSocket(wsUrl);
 
         this.ws.onopen = () => {