diff --git a/README.md b/README.md index 2fe34797..db71d6f9 100644 --- a/README.md +++ b/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 diff --git a/docker-compose.yml b/docker-compose.yml index 30e9c058..8c6a831e 100644 --- a/docker-compose.yml +++ b/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 diff --git a/update-docker-env.sh b/update-docker-env.sh index 5a7fc614..1ba25997 100755 --- a/update-docker-env.sh +++ b/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" \ No newline at end of file +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}" \ No newline at end of file diff --git a/worklenz-frontend/Dockerfile b/worklenz-frontend/Dockerfile index 512ec923..f1e98751 100644 --- a/worklenz-frontend/Dockerfile +++ b/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 diff --git a/worklenz-frontend/src/config/env.ts b/worklenz-frontend/src/config/env.ts index 10433940..948a0c70 100644 --- a/worklenz-frontend/src/config/env.ts +++ b/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(), }; \ No newline at end of file diff --git a/worklenz-frontend/src/socket/config.ts b/worklenz-frontend/src/socket/config.ts index 867330c7..56049e85 100644 --- a/worklenz-frontend/src/socket/config.ts +++ b/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',