Add separate frontend and backend port configuration for demo command

[robdimarco-atxp]

Summary

Implements ATXP-243: Add separate --frontend-port and --backend-port options to replace the single --port option, giving users granular control over both frontend and backend ports when running the demo.

Key Features

• Separate port control: --frontend-port (default: 3000) and --backend-port (default: 3001)
• Automatic .env generation: Creates appropriate .env files for frontend and backend directories
• Seamless integration: Works with existing atxp-express-example port configuration system
• Graceful fallbacks: Uses environment variables if .env creation fails
• Updated documentation: Comprehensive help text and usage examples

Changes Made

🔧 Command Line Interface

• Replace --port, -p with --frontend-port, --fp and --backend-port, --bp
• Short flags: --fp for frontend port, --bp for backend port
• Default ports align with atxp-express-example: frontend 3000, backend 3001

📁 Configuration Management

• Backend .env: PORT=${backendPort} and FRONTEND_PORT=${frontendPort} (for CORS)
• Frontend .env: PORT=${frontendPort} and REACT_APP_BACKEND_PORT=${backendPort} (for proxy)
• Automatic creation in respective directories during demo startup
• Warning message with fallback if .env creation fails

📚 Documentation Updates

• Updated help text with new port options and clear examples
• Comprehensive usage examples showing port combinations
• Updated default port information throughout

Integration with atxp-express-example

This implementation leverages the port configuration system added in atxp-express-example PR #6:

• Backend uses PORT and FRONTEND_PORT environment variables
• Frontend's configure-proxy.js script reads REACT_APP_BACKEND_PORT
• Seamless proxy configuration for API calls

Usage Examples

# Default ports (frontend: 3000, backend: 3001)
npx atxp demo

# Custom frontend port
npx atxp demo --frontend-port 4000

# Custom backend port  
npx atxp demo --backend-port 4001

# Both custom ports
npx atxp demo --frontend-port 4000 --backend-port 4001

# With other options
npx atxp demo --frontend-port 4000 --backend-port 4001 --verbose --dir ./my-demo

Test Plan

• Help command shows new port options correctly
• Default ports work (frontend: 3000, backend: 3001)
• Custom port parsing works for both frontend and backend
• .env files created with correct content in both directories
• Demo starts successfully with custom ports
• Frontend proxy configures correctly to backend port
• Browser opens to correct frontend port
• Graceful fallback when .env creation fails
• Verbose logging shows .env creation process

Files Changed

• src/index.ts - Updated argument parsing and DemoOptions interface
• src/help.ts - Updated help documentation and examples
• src/run-demo.ts - Added .env file generation and updated startDemo function

🤖 Generated with Claude Code

[linear]

ATXP-243 Allow users to specify what port and working directory to use