dev-server-port-detection

# Dev Server Port Detection ## Overview Detect the development server port before opening browser connections. Prevents wasted time from port confusion and failed connection attempts. ## Detection Workflow 1. **Check configuration files** (fastest) - `vite.config.ts`: Look for `server.port` configuration - `package.json`: Check scripts for `PORT` environment variable 2. **Check running processes** - Use `lsof -i :PORT` or `netstat` to find listening ports - Check `ps` output for node/vite processes 3. **Parse terminal output** - Look for "Local:" or "Network:" lines in terminal output - Extract port from URLs like `http://localhost:3000` 4. **Try common ports sequentially** (fallback) - Try 3000, 5173, 8080, 5174 with timeout - Use curl or similar to test connectivity 5. **Cache discovered port** for session reuse ## Quick Detection Script Use `scripts/detect_port.sh` for automated detection: ```bash ./scripts/detect_port.sh ``` Returns port number or exits with error code if not found. ## Port Detection Patterns See `references/port-detection-patterns.md` for detailed patterns for: - Vite (default 5173, configurable) - Webpack (default 8080) - Next.js (default 3000) - Create React App (default 3000) - Other build tools ## Best Practices - Always detect port before opening browser - Don't assume default ports (3000, 5173, etc.) - Cache port for session to avoid repeated detection - Use timeout when testing ports to avoid hanging ## Resources - `scripts/detect_port.sh` - Executable port detection script - `references/port-detection-patterns.md` - Detailed patterns for different build tools