diff --git a/README.md b/README.md index 8228daf..5b780fb 100644 --- a/README.md +++ b/README.md @@ -171,3 +171,9 @@ docker exec -it stamp-frontend /bin/sh curl -v http://backend:8000/ exit ``` + +6. Use the network testing script: +```bash +./scripts/test-network.sh +``` +This script will automatically detect your LAN IP and test both local and network connectivity. diff --git a/docker-compose.yml b/docker-compose.yml index b4675e7..88144fa 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -26,7 +26,6 @@ services: ports: - "4000:4000" environment: - - REACT_APP_API_URL=http://localhost:8000 - CHOKIDAR_USEPOLLING=true - WDS_SOCKET_PORT=0 - CI=true diff --git a/frontend/src/App.js b/frontend/src/App.js index d7bbe7b..b465504 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import Home from './components/Home'; import Quiz from './components/Quiz'; import axios from 'axios'; +import getApiUrl from './utils/apiConfig'; function App() { const [sessionId, setSessionId] = useState(''); @@ -93,7 +94,8 @@ function App() { const handleRetryQuiz = async () => { try { - await axios.post('http://backend:8000/reset-session/', { + const apiUrl = getApiUrl(); + await axios.post(`${apiUrl}/reset-session/`, { session_id: sessionId, }); setIsTransitioning(true); diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js index 0ffb86c..fe1cda3 100644 --- a/frontend/src/components/Home.js +++ b/frontend/src/components/Home.js @@ -1,8 +1,9 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; +import getApiUrl from '../utils/apiConfig'; const Home = ({ setSessionId, setQuizStarted }) => { - const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000'; + const API_URL = getApiUrl(); // File state const [files, setFiles] = useState([]); @@ -31,7 +32,9 @@ const Home = ({ setSessionId, setQuizStarted }) => { formData.append('settings', JSON.stringify(quizSettings)); - console.log('API URL:', API_URL); + console.log('Frontend URL:', window.location.href); + console.log('Frontend Host:', window.location.hostname); + console.log('Detected API URL:', API_URL); console.log('Uploading files:', files.map(f => f.name)); console.log('Quiz settings:', quizSettings); diff --git a/frontend/src/components/Quiz.js b/frontend/src/components/Quiz.js index 2934cfa..a84a21a 100644 --- a/frontend/src/components/Quiz.js +++ b/frontend/src/components/Quiz.js @@ -1,8 +1,9 @@ import React, { useState, useEffect, useCallback } from 'react'; import axios from 'axios'; +import getApiUrl from '../utils/apiConfig'; const Quiz = ({ sessionId, onGoHome, onRetry }) => { - const API_URL = process.env.REACT_APP_API_URL; + const API_URL = getApiUrl(); // Quiz state const [questionData, setQuestionData] = useState(null); diff --git a/frontend/src/utils/apiConfig.js b/frontend/src/utils/apiConfig.js new file mode 100644 index 0000000..9809a83 --- /dev/null +++ b/frontend/src/utils/apiConfig.js @@ -0,0 +1,18 @@ +// Dynamically determine API URL based on how the frontend is accessed +const getApiUrl = () => { + if (process.env.REACT_APP_API_URL) { + return process.env.REACT_APP_API_URL; + } + + const currentHost = window.location.hostname; + const apiPort = '8000'; + + if (currentHost === 'localhost' || currentHost === '127.0.0.1') { + return `http://localhost:${apiPort}`; + } + + // Use same host for LAN/network access + return `http://${currentHost}:${apiPort}`; +}; + +export default getApiUrl; diff --git a/scripts/test-network.sh b/scripts/test-network.sh new file mode 100755 index 0000000..810fd2f --- /dev/null +++ b/scripts/test-network.sh @@ -0,0 +1,39 @@ +#!/bin/bash + +# Get the LAN IP address +LAN_IP=$(ifconfig | grep -E "inet.*broadcast" | awk '{print $2}' | head -1) + +echo "=== Stamp Network Configuration Test ===" +echo "Your MacBook's LAN IP: $LAN_IP" +echo "" +echo "Access URLs:" +echo " Local access: http://localhost:4000" +echo " LAN access: http://$LAN_IP:4000" +echo "" +echo "Backend API URLs (auto-detected by frontend):" +echo " From localhost: http://localhost:8000" +echo " From LAN: http://$LAN_IP:8000" +echo "" +echo "Testing API endpoints..." + +# Test local backend +echo -n "Testing localhost backend... " +if curl -s http://localhost:8000/ > /dev/null; then + echo "✅ OK" +else + echo "❌ Failed" +fi + +# Test LAN backend +echo -n "Testing LAN backend... " +if curl -s http://$LAN_IP:8000/ > /dev/null; then + echo "✅ OK" +else + echo "❌ Failed" +fi + +echo "" +echo "To test from other devices:" +echo "1. Make sure your device is on the same network" +echo "2. Open http://$LAN_IP:4000 in a browser" +echo "3. The frontend will automatically use http://$LAN_IP:8000 for API calls"