Description

The dev server panel shows the port that Automaker allocates (via PORT env var), but many dev servers like Vite ignore this environment variable and use their own default port. This causes a mismatch between what's displayed and the actual running server.

Current Behavior

• Header shows: Port 3001 (what Automaker allocated)
• Vite output shows: http://localhost:5173/ (what Vite actually uses)
• Clicking "Open" tries to open http://localhost:3001 which doesn't work

Root Cause

In apps/server/src/services/dev-server-service.ts, the URL is constructed from the allocated port without parsing the actual output:

const url = `http://${hostname}:${port}`;

The service passes PORT=3001 as an environment variable, but:

• Vite ignores PORT env var (uses 5173 by default)
• Next.js / CRA respect PORT env var
• Other frameworks vary

Expected Behavior

The dev server panel should detect and display the actual port/URL the server is running on, regardless of whether the framework respects the PORT environment variable.

Suggested Solutions

Option 1: Parse output for URLs (Recommended)

Detect URL patterns like http://localhost:XXXX or https:// from stdout/stderr and use the first detected URL.

// Example regex patterns to detect
const urlPatterns = [
  /https?:\/\/localhost:\d+/,
  /https?:\/\/127\.0\.0\.1:\d+/,
  /https?:\/\/\[::\]:\d+/,
  /Local:\s+(https?:\/\/[^\s]+)/,  // Vite format
  /ready on (https?:\/\/[^\s]+)/i,  // Next.js format
];

Option 2: Framework-specific commands

Detect the framework and use appropriate flags:

• Vite: vite --port $PORT
• Next.js: Already respects PORT

Option 3: Document requirement

Require users to configure their dev server to use the PORT environment variable.

Environment

• Automaker version: v0.13.0rc
• Framework tested: Vite v5.4.21
• OS: macOS