diff --git a/docker-compose.yaml b/docker-compose.yaml
index b90b5a7..cc37ba6 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -6,8 +6,8 @@ services:
context: ./frontend
ports:
- "3000:80"
- env_file:
- - ./frontend/.env
+ environment:
+ - API_URL=${API_URL:-ws://localhost:8000}
backend:
build:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index f7079e9..4f63fef 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -24,8 +24,14 @@ COPY --from=build /app/build /usr/share/nginx/html
# Copy a custom Nginx configuration if needed (optional)
COPY nginx.conf /etc/nginx/conf.d/default.conf
+# Copy the entrypoint script
+COPY entrypoint.sh /entrypoint.sh
+
+# Make the entrypoint script executable
+RUN chmod +x /entrypoint.sh
+
# Expose port 80
EXPOSE 80
-# Start Nginx
-CMD ["nginx", "-g", "daemon off;"]
+# Set the entrypoint
+ENTRYPOINT ["/entrypoint.sh"]
diff --git a/frontend/entrypoint.sh b/frontend/entrypoint.sh
new file mode 100644
index 0000000..fca4ba5
--- /dev/null
+++ b/frontend/entrypoint.sh
@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Create a config.js file with the runtime environment variable
+echo "window.runtimeConfig = { API_URL: '${API_URL}' };" > /usr/share/nginx/html/config.js
+
+# Start the Nginx server
+exec nginx -g 'daemon off;'
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 17b965c..8cae02d 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -10,6 +10,7 @@
/>
+
Unisono
diff --git a/frontend/src/pages/CreateSession.tsx b/frontend/src/pages/CreateSession.tsx
index adb0a16..1a94be9 100644
--- a/frontend/src/pages/CreateSession.tsx
+++ b/frontend/src/pages/CreateSession.tsx
@@ -9,7 +9,9 @@ const CreateSession = () => {
useEffect(() => {
const handleCreate = async () => {
try {
- const response = await axios.post('http://localhost:8000/sessions');
+ const apiUrl = window.runtimeConfig?.API_URL || 'http://localhost:8000';
+ const httpApiUrl = apiUrl.replace(/^ws/, 'http');
+ const response = await axios.post(`${httpApiUrl}/sessions`);
const { sessionId } = response.data;
navigate(`/session/${sessionId}`);
} catch (error) {
diff --git a/frontend/src/services/authService.ts b/frontend/src/services/authService.ts
index 98ea1f0..b961d0a 100644
--- a/frontend/src/services/authService.ts
+++ b/frontend/src/services/authService.ts
@@ -1,8 +1,10 @@
// frontend/src/services/authService.ts
-const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:8000';
-
export const authenticate = async (passphrase: string): Promise => {
- const response = await fetch(`${API_BASE_URL}/api/auth/passphrase`, {
+ // Read the API_URL from the runtime configuration and convert ws to http
+ const apiUrl = window.runtimeConfig?.API_URL || 'http://localhost:8000';
+ const httpApiUrl = apiUrl.replace(/^ws/, 'http');
+
+ const response = await fetch(`${httpApiUrl}/api/auth/passphrase`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/frontend/src/services/websocket.ts b/frontend/src/services/websocket.ts
index a516161..575d441 100644
--- a/frontend/src/services/websocket.ts
+++ b/frontend/src/services/websocket.ts
@@ -1,3 +1,13 @@
+// Define the runtime configuration interface
+interface RuntimeConfig {
+ API_URL: string;
+}
+declare global {
+ interface Window {
+ runtimeConfig?: RuntimeConfig;
+ }
+}
+
class WebSocketService {
private ws: WebSocket | null = null;
private messageHandlers: ((message: any) => void)[] = [];
@@ -14,7 +24,8 @@ class WebSocketService {
this.currentSessionId = sessionId;
this.currentClientId = clientId;
- const apiUrl = process.env.REACT_APP_API_URL || 'ws://localhost:8000';
+ // Read the API_URL from the runtime configuration
+ const apiUrl = window.runtimeConfig?.API_URL || 'ws://localhost:8000';
const wsUrl = `${apiUrl.replace(/^http/, 'ws')}/sessions/${sessionId}`;
this.ws = new WebSocket(wsUrl);