Fix preview scripts to automatically find available ports instead of requiring manual intervention

PREVIEW_GUIDE.md

@@ -6,7 +6,8 @@ This guide explains how to use the new preview scripts to quickly launch and vie
 
 The preview scripts provide a one-click solution to:
 - ✅ Check and install dependencies automatically
-- ✅ Start the frontend development server on port 3000
+- ✅ Automatically find an available port (starting from 3000)
+- ✅ Start the frontend development server on the selected port
 - ✅ Automatically open the application in your default browser
 
 ## 📋 Prerequisites
@@ -39,15 +40,19 @@ preview.bat
 
 1. **Dependency Check**: Verifies Node.js and npm are installed
 2. **Auto-Install**: Checks if `node_modules` exists and installs dependencies if needed
-3. **Port Check**: Detects if port 3000 is already in use and offers to free it
-4. **Server Start**: Launches the React development server on port 3000
-5. **Browser Launch**: Automatically opens http://localhost:3000 in your default browser
+3. **Port Detection**: Automatically finds an available port starting from 3000 (uses 3001, 3002, etc. if 3000 is busy)
+4. **Server Start**: Launches the React development server on the detected port
+5. **Browser Launch**: Automatically opens the application in your default browser at the correct port
 
 ## 🛠️ Troubleshooting
 
-### Port 3000 Already in Use
+### Port Selection
 
-If you see a message that port 3000 is already in use, the script will ask if you want to kill the existing process. Type `y` to proceed or `n` to exit and manually free the port.
+The scripts automatically find an available port starting from 3000:
+- If port 3000 is free, it will use port 3000
+- If port 3000 is busy, it will automatically use the next available port (3001, 3002, etc.)
+- The script searches up to port 3100 for an available port
+- The selected port will be displayed in the startup message
 
 ### Dependencies Not Installing
 
@@ -60,12 +65,20 @@ If dependency installation fails:
 ### Browser Not Opening
 
 If the browser doesn't open automatically:
-- Manually open http://localhost:3000 in your browser
+- Check the terminal output for the port number being used
+- Manually open `http://localhost:PORT` in your browser (replace PORT with the number shown)
 - The server will still be running in the terminal
 
+### No Available Ports
+
+If you see "Could not find an available port between 3000-3100":
+- Close some applications that might be using ports in this range
+- Or manually free specific ports (see [TROUBLESHOOTING.md](./TROUBLESHOOTING.md))
+
 ## 📝 Notes
 
-- The preview scripts only start the **frontend** server on port 3000
+- The preview scripts only start the **frontend** server (on an automatically selected port)
+- The scripts will use port 3000 by default, but will automatically find the next available port if needed
 - For full functionality (authentication, bookings, etc.), you'll need to:
   1. Set up the database (see [QUICKSTART.md](./QUICKSTART.md))
   2. Configure environment variables (`.env` file)

TROUBLESHOOTING.md

@@ -144,19 +144,20 @@ curl http://localhost:3000
 ### 4. Port Already in Use
 
 **Symptoms:**
-- Error: "Port 3000 is already in use"
-- Error: "Port 5000 is already in use"
+- Error: "Port 5000 is already in use" (backend only)
 
-**Solution:**
+**Note for Frontend:**
+The preview scripts (`preview.sh`, `preview.bat`, `preview.ps1`) now automatically find an available port starting from 3000. If port 3000 is in use, they will automatically use the next available port (3001, 3002, etc.) without requiring manual intervention.
+
+**Solution for Backend:**
 
 1. **Find and kill process using the port:**
    ```bash
    # macOS/Linux
-   lsof -ti:3000 | xargs kill -9   # For frontend
    lsof -ti:5000 | xargs kill -9   # For backend
 
    # Windows
-   netstat -ano | findstr :3000
+   netstat -ano | findstr :5000
    taskkill /PID <PID> /F
    ```
 
@@ -165,8 +166,14 @@ curl http://localhost:3000
    # Backend
    PORT=5001 npm run server
 
-   # Update client/package.json proxy or .env
-   CLIENT_URL=http://localhost:3001
+   # Update .env
+   PORT=5001
+   ```
+
+3. **For frontend manual port selection (without preview scripts):**
+   ```bash
+   # Set PORT environment variable before starting
+   PORT=3001 npm start  # Will use port 3001
    ```
 
 ### 5. Dependencies Installation Issues

preview.bat

@@ -64,29 +64,36 @@ if not exist "node_modules\" (
 echo [OK] All dependencies are ready
 echo.
 
-REM Check if port 3000 is already in use
-netstat -ano | findstr :3000 | findstr LISTENING >nul 2>&1
+REM Find an available port starting from 3000
+echo [INFO] Searching for an available port...
+set PORT=3000
+set MAX_PORT=3100
+
+:FIND_PORT
+if %PORT% gtr %MAX_PORT% (
+    echo [ERROR] Could not find an available port between 3000-3100
+    echo Please free some ports and try again.
+    pause
+    exit /b 1
+)
+
+netstat -ano | findstr :%PORT% | findstr LISTENING >nul 2>&1
 if %errorlevel% equ 0 (
-    echo [WARNING] Port 3000 is already in use
-    set /p response="Would you like to kill the existing process? (y/n): "
-    if /i "!response!"=="y" (
-        echo Killing process on port 3000...
-        for /f "tokens=5" %%a in ('netstat -ano ^| findstr :3000 ^| findstr LISTENING') do (
-            taskkill /F /PID %%a >nul 2>&1
-        )
-        echo [OK] Port 3000 is now free
-        echo.
-    ) else (
-        echo Please free port 3000 and try again.
-        pause
-        exit /b 1
-    )
+    set /a PORT+=1
+    goto FIND_PORT
 )
 
+if %PORT% neq 3000 (
+    echo [WARNING] Port 3000 is in use, using port %PORT% instead
+) else (
+    echo [OK] Port 3000 is available
+)
+echo.
+
 echo.
 echo ============================================
 echo    Starting ChairShare preview
-echo    http://localhost:3000
+echo    http://localhost:%PORT%
 echo ============================================
 echo.
 echo    The application will open in your browser shortly...
@@ -99,7 +106,7 @@ REM Wait a moment before starting
 timeout /t 2 /nobreak >nul
 
 REM Start browser in background after a delay
-start "" cmd /c "timeout /t 5 /nobreak >nul && start http://localhost:3000"
+start "" cmd /c "timeout /t 5 /nobreak >nul && start http://localhost:%PORT%"
 
-REM Start the development server
+REM Start the development server with PORT environment variable
 call npm start

preview.ps1

@@ -70,30 +70,44 @@ if (-not (Test-Path "node_modules")) {
 Write-Host "[OK] All dependencies are ready" -ForegroundColor Green
 Write-Host ""
 
-# Check if port 3000 is already in use
-$port3000InUse = Get-NetTCPConnection -LocalPort 3000 -State Listen -ErrorAction SilentlyContinue
-if ($port3000InUse) {
-    Write-Host "[WARNING] Port 3000 is already in use" -ForegroundColor Yellow
-    $response = Read-Host "Would you like to kill the existing process? (y/n)"
-    if ($response -eq "y" -or $response -eq "Y") {
-        Write-Host "Killing process on port 3000..." -ForegroundColor Blue
-        $processIds = $port3000InUse | Select-Object -ExpandProperty OwningProcess -Unique
-        foreach ($pid in $processIds) {
-            Stop-Process -Id $pid -Force -ErrorAction SilentlyContinue
+# Function to find an available port
+function Find-AvailablePort {
+    param($startPort)
+
+    $maxPort = $startPort + 100
+
+    for ($port = $startPort; $port -le $maxPort; $port++) {
+        $portInUse = Get-NetTCPConnection -LocalPort $port -State Listen -ErrorAction SilentlyContinue
+        if (-not $portInUse) {
+            return $port
         }
-        Write-Host "[OK] Port 3000 is now free" -ForegroundColor Green
-        Write-Host ""
-    } else {
-        Write-Host "Please free port 3000 and try again." -ForegroundColor Yellow
-        Read-Host "Press Enter to exit"
-        exit 1
     }
+
+    return $null
+}
+
+# Find an available port starting from 3000
+Write-Host "[INFO] Searching for an available port..." -ForegroundColor Blue
+$PORT = Find-AvailablePort -startPort 3000
+
+if ($null -eq $PORT) {
+    Write-Host "[ERROR] Could not find an available port between 3000-3100" -ForegroundColor Red
+    Write-Host "Please free some ports and try again." -ForegroundColor Yellow
+    Read-Host "Press Enter to exit"
+    exit 1
+}
+
+if ($PORT -ne 3000) {
+    Write-Host "[WARNING] Port 3000 is in use, using port $PORT instead" -ForegroundColor Yellow
+} else {
+    Write-Host "[OK] Port 3000 is available" -ForegroundColor Green
 }
+Write-Host ""
 
 Write-Host ""
 Write-Host "============================================" -ForegroundColor Cyan
 Write-Host "   Starting ChairShare preview" -ForegroundColor Cyan
-Write-Host "   http://localhost:3000" -ForegroundColor Green
+Write-Host "   http://localhost:$PORT" -ForegroundColor Green
 Write-Host "============================================" -ForegroundColor Cyan
 Write-Host ""
 Write-Host "   The application will open in your browser shortly..." -ForegroundColor Yellow
@@ -107,9 +121,13 @@ Start-Sleep -Seconds 2
 
 # Start browser in background after a delay
 $job = Start-Job -ScriptBlock {
+    param($port)
     Start-Sleep -Seconds 5
-    Start-Process "http://localhost:3000"
-}
+    Start-Process "http://localhost:$port"
+} -ArgumentList $PORT
+
+# Set PORT environment variable for npm start
+$env:PORT = $PORT
 
 # Start the development server
 npm start

preview.sh

@@ -50,23 +50,44 @@ fi
 echo -e "${GREEN}✓${NC} All dependencies are ready"
 echo ""
 
-# Check if port 3000 is already in use
-if lsof -Pi :3000 -sTCP:LISTEN -t >/dev/null 2>&1 ; then
-    echo -e "${YELLOW}⚠️  Port 3000 is already in use${NC}"
-    echo "Would you like to kill the existing process? (y/n)"
-    read -r response
-    if [[ "$response" =~ ^([yY][eE][sS]|[yY])$ ]]; then
-        echo "Killing process on port 3000..."
-        lsof -ti:3000 | xargs kill -9 2>/dev/null || true
-        echo -e "${GREEN}✓${NC} Port 3000 is now free"
-        echo ""
-    else
-        echo "Please free port 3000 and try again."
-        exit 1
-    fi
+# Function to find an available port starting from a given port
+find_available_port() {
+    local port=$1
+    local max_port=$((port + 100))  # Try up to 100 ports
+
+    while [ $port -le $max_port ]; do
+        if ! lsof -Pi :$port -sTCP:LISTEN -t >/dev/null 2>&1; then
+            echo $port
+            return 0
+        fi
+        port=$((port + 1))
+    done
+
+    echo ""
+    return 1
+}
+
+# Find an available port starting from 3000
+echo "🔍 Searching for an available port..."
+PORT=$(find_available_port 3000)
+
+if [ -z "$PORT" ]; then
+    echo -e "${YELLOW}⚠️  Could not find an available port between 3000-3100${NC}"
+    echo "Please free some ports and try again."
+    exit 1
+fi
+
+if [ "$PORT" != "3000" ]; then
+    echo -e "${YELLOW}⚠️  Port 3000 is in use, using port $PORT instead${NC}"
+else
+    echo -e "${GREEN}✓${NC} Port 3000 is available"
 fi
+echo ""
+
+# Export PORT for npm start
+export PORT
 
-echo -e "${BLUE}🌐 Starting ChairShare preview on http://localhost:3000${NC}"
+echo -e "${BLUE}🌐 Starting ChairShare preview on http://localhost:$PORT${NC}"
 echo ""
 echo -e "${GREEN}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
 echo -e "${GREEN}   The application will open in your browser shortly...${NC}"
@@ -79,7 +100,8 @@ sleep 2
 
 # Open browser based on OS
 open_browser() {
-    local url="http://localhost:3000"
+    local port=$1
+    local url="http://localhost:$port"
 
     # Wait for the server to start
     echo "⏳ Waiting for server to start..."
@@ -102,7 +124,7 @@ open_browser() {
 }
 
 # Start browser opener in background
-open_browser &
+open_browser $PORT &
 
 # Start the development server
 npm start