Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Oct 5, 2025

Problem

When launching the preview scripts (preview.sh, preview.bat, preview.ps1), if port 3000 was already in use, users were prompted to manually kill the existing process or the script would exit with an error. This created a poor developer experience and interrupted workflows.

Solution

All three preview scripts now automatically search for and use the first available port starting from 3000. If port 3000 is busy, the scripts seamlessly fall back to port 3001, 3002, and so on (up to port 3100).

Changes

Core Functionality

  • preview.sh (Linux/macOS): Added find_available_port() function using lsof to detect port availability
  • preview.bat (Windows Command Prompt): Implemented port scanning loop using netstat with label/goto pattern
  • preview.ps1 (Windows PowerShell): Created Find-AvailablePort function using Get-NetTCPConnection

User Experience

  • Removed manual port conflict prompts
  • Added clear feedback messages showing which port is being used
  • Browser URLs now dynamically update to use the detected port
  • Graceful error handling when no ports are available in the range

Documentation

  • Updated PREVIEW_GUIDE.md to explain automatic port detection behavior
  • Revised TROUBLESHOOTING.md to reflect new workflow and remove outdated manual intervention steps

Example

Before:

⚠️  Port 3000 is already in use
Would you like to kill the existing process? (y/n)
> _  [Waits for user input]

After:

🔍 Searching for an available port...
⚠️  Port 3000 is in use, using port 3001 instead
🌐 Starting ChairShare preview on http://localhost:3001

Benefits

✅ Zero manual intervention required
✅ Works seamlessly when port 3000 is busy
✅ Developers can run multiple instances or work alongside other applications
✅ Cross-platform support maintained (Linux, macOS, Windows)
✅ Professional, polished user experience
✅ Still prefers port 3000 when available (backward compatible)

Testing

Verified behavior across multiple scenarios:

  • Port 3000 available → Uses port 3000 as expected
  • Port 3000 occupied → Automatically uses next available port (3001, 3002, etc.)
  • PORT environment variable correctly set for React development server
  • Browser launches with correct URL for detected port

Closes #[issue_number]

Original prompt

when i click live preview it opens port 3000 but port 3000 is already in use. it needs to start by searching for a empty port and then using it


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] when i click live preview it opens port 3000 but port 3000 is already in use. it needs to start by searching for a empty port and then using it Fix preview scripts to automatically find available ports instead of requiring manual intervention Oct 5, 2025
Copilot AI requested a review from Islamhassana3 October 5, 2025 18:22
@Islamhassana3 Islamhassana3 marked this pull request as ready for review October 5, 2025 18:23
@Islamhassana3 Islamhassana3 merged commit 086c256 into main Oct 5, 2025
1 check failed
@Islamhassana3 Islamhassana3 deleted the copilot/fix-c09885c6-b22d-4c8c-9bbb-d4d3309cce27 branch October 5, 2025 18:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants