Enhance WebSocket support and update environment configuration

- Added VITE_SOCKET_URL to docker-compose.yml for WebSocket connection.
- Updated update-docker-env.sh to handle SSL options for WebSocket URLs.
- Modified Dockerfile to include VITE_SOCKET_URL in env-config.js.
- Implemented getSocketUrl function in frontend to retrieve WebSocket URL.
- Refactored socket configuration to use centralized socket URL from environment settings.

README.md

@@ -395,7 +395,11 @@ For MinIO in production, consider:
 
 1. Set up the environment variables:
    ```bash
+   # For HTTP/WS
    ./update-docker-env.sh
+   
+   # For HTTPS/WSS
+   ./update-docker-env.sh localhost true
    ```
    
    This will create a `.env` file with default settings for local development.
@@ -407,7 +411,7 @@ For MinIO in production, consider:
 
 3. Access the application:
    - Frontend: http://localhost:5000
-   - Backend API: http://localhost:3000
+   - Backend API: http://localhost:3000 (or https://localhost:3000 with SSL)
 
 ### Remote Server Deployment
 
@@ -415,7 +419,11 @@ When deploying to a remote server:
 
 1. Set up the environment variables with your server's hostname:
    ```bash
+   # For HTTP/WS
    ./update-docker-env.sh your-server-hostname
+   
+   # For HTTPS/WSS
+   ./update-docker-env.sh your-server-hostname true
    ```
    
    This ensures that the frontend correctly connects to the backend API.
@@ -436,6 +444,7 @@ The Docker setup uses environment variables to configure the services:
 
 - Frontend:
   - `VITE_API_URL`: URL of the backend API (default: http://backend:3000 for container networking)
+  - `VITE_SOCKET_URL`: WebSocket URL for real-time communication (default: ws://backend:3000)
 
 - Backend:
   - Database connection parameters

docker-compose.yml

@@ -9,6 +9,7 @@ services:
         condition: service_started
     environment:
       - VITE_API_URL=${VITE_API_URL:-http://backend:3000}
+      - VITE_SOCKET_URL=${VITE_SOCKET_URL:-ws://backend:3000}
     networks:
       - worklenz
 

update-docker-env.sh

@@ -1,16 +1,29 @@
 #!/bin/bash
 
 # Script to set environment variables for Docker deployment
-# Usage: ./update-docker-env.sh [hostname]
+# Usage: ./update-docker-env.sh [hostname] [use_ssl]
 
 # Default hostname if not provided
 DEFAULT_HOSTNAME="localhost"
 HOSTNAME=${1:-$DEFAULT_HOSTNAME}
 
+# Check if SSL should be used
+USE_SSL=${2:-false}
+
+# Set protocol prefixes based on SSL flag
+if [ "$USE_SSL" = "true" ]; then
+  HTTP_PREFIX="https://"
+  WS_PREFIX="wss://"
+else
+  HTTP_PREFIX="http://"
+  WS_PREFIX="ws://"
+fi
+
 # Create or update root .env file
 cat > .env << EOL
 # Frontend Configuration
-VITE_API_URL=http://${HOSTNAME}:3000
+VITE_API_URL=${HTTP_PREFIX}${HOSTNAME}:3000
+VITE_SOCKET_URL=${WS_PREFIX}${HOSTNAME}:3000
 
 # Backend Configuration
 DB_HOST=db
@@ -30,5 +43,8 @@ S3_SECRET_ACCESS_KEY=minioadmin
 S3_URL=http://minio:9000
 EOL
 
-echo "Environment configuration updated for ${HOSTNAME}"
-echo "To run with Docker Compose, use: docker-compose up -d" 
+echo "Environment configuration updated for ${HOSTNAME} with" $([ "$USE_SSL" = "true" ] && echo "HTTPS/WSS" || echo "HTTP/WS")
+echo "To run with Docker Compose, use: docker-compose up -d"
+echo
+echo "API URL: ${VITE_API_URL:-${HTTP_PREFIX}${HOSTNAME}:3000}"
+echo "Socket URL: ${VITE_SOCKET_URL:-${WS_PREFIX}${HOSTNAME}:3000}" 

worklenz-frontend/Dockerfile

@@ -9,7 +9,8 @@ RUN npm ci
 COPY . .
 
 # Create env-config.js dynamically during build
-RUN echo "window.VITE_API_URL='${VITE_API_URL:-http://backend:3000}';" > ./public/env-config.js
+RUN echo "window.VITE_API_URL='${VITE_API_URL:-http://backend:3000}';" > ./public/env-config.js && \
+    echo "window.VITE_SOCKET_URL='${VITE_SOCKET_URL:-ws://backend:3000}';" >> ./public/env-config.js
 
 RUN npm run build
 
@@ -27,6 +28,7 @@ RUN echo '#!/bin/sh\n\
 # Update env-config.js with runtime environment variables\n\
 cat > /app/build/env-config.js << EOL\n\
 window.VITE_API_URL="${VITE_API_URL:-http://backend:3000}";\n\
+window.VITE_SOCKET_URL="${VITE_SOCKET_URL:-ws://backend:3000}";\n\
 EOL\n\
 exec serve -s build -l 5000' > /app/start.sh && \
 chmod +x /app/start.sh

worklenz-frontend/src/config/env.ts

@@ -1,13 +1,14 @@
 /**
  * Environment configuration
- * Reads from window.VITE_API_URL (set by env-config.js)
- * Falls back to import.meta.env.VITE_API_URL (set during build time)
- * Falls back to a development default
+ * Reads from window environment variables (set by env-config.js)
+ * Falls back to import.meta.env variables (set during build time)
+ * Falls back to development defaults
  */
 
 declare global {
   interface Window {
     VITE_API_URL?: string;
+    VITE_SOCKET_URL?: string;
   }
 }
 
@@ -26,6 +27,30 @@ export const getApiUrl = (): string => {
   return 'http://localhost:3000';
 };
 
+export const getSocketUrl = (): string => {
+  // First check runtime-injected environment variables
+  if (window.VITE_SOCKET_URL) {
+    return window.VITE_SOCKET_URL;
+  }
+  
+  // Then check build-time environment variables
+  if (import.meta.env.VITE_SOCKET_URL) {
+    return import.meta.env.VITE_SOCKET_URL;
+  }
+  
+  // Default based on API URL (convert http->ws or https->wss)
+  const apiUrl = getApiUrl();
+  if (apiUrl.startsWith('https://')) {
+    return apiUrl.replace('https://', 'wss://');
+  } else if (apiUrl.startsWith('http://')) {
+    return apiUrl.replace('http://', 'ws://');
+  }
+  
+  // Final fallback
+  return 'ws://localhost:3000';
+};
+
 export default {
   apiUrl: getApiUrl(),
+  socketUrl: getSocketUrl(),
 }; 

worklenz-frontend/src/socket/config.ts

@@ -1,5 +1,7 @@
+import config from '@/config/env';
+
 export const SOCKET_CONFIG = {
-  url: import.meta.env.VITE_SOCKET_URL || 'ws://localhost:3000',
+  url: config.socketUrl,
   options: {
     transports: ['websocket'],
     path: '/socket',