ServerDash - TypeScript Development Server Manager

A comprehensive web dashboard for managing local development servers, built with TypeScript, React, and Node.js.

Features

🔍 Port Scanning

• Concurrent scanning of localhost ports (3000-9000 default range)
• Process identification for open ports
• Cross-platform support (Windows/macOS/Linux)

🚀 Server Management

• Auto-detect project types (Node.js, Python, Ruby, Go, PHP, Java, Rust, Static)
• Intelligent server spawning based on project type
• Stop and restart servers
• Port management with dynamic port changes

📋 Real-time Logs

• Live log streaming via WebSocket
• Filter by log type (stdout, stderr, system)
• Search functionality
• Log download and clearing
• Auto-scroll with manual override

📁 Directory Browser

• Navigate file system to select project directories
• Auto-detect project configuration
• Custom command support for non-standard projects

🎯 Smart Project Detection

• Node.js: package.json detection with framework identification (Next.js, React, Vue, Angular, Express, etc.)
• Python: requirements.txt, pyproject.toml, setup.py with framework detection (FastAPI, Flask, Django)
• Ruby: Gemfile detection (Rails, Rack)
• Go: go.mod, go.sum
• PHP: composer.json
• Java: pom.xml, build.gradle
• Rust: Cargo.toml
• Static: Fallback for any directory

Architecture

Backend (Port 3001)

• Express.js with TypeScript
• WebSocket for real-time communication
• Process Management with proper cleanup
• Cross-platform compatibility

Frontend (Port 3000)

• React 18 with TypeScript
• Tailwind CSS for styling
• Vite for development and building
• Lucide React for icons

Shared Types

• TypeScript definitions shared between frontend/backend
• Type-safe API communication
• Consistent data structures

Getting Started

Installation

# Install dependencies
npm install

# Build all packages
npm run build

# Start development servers
npm run dev

Usage

1. Open http://localhost:3000 in your browser
2. Use the Start Server tab to launch development servers
3. View running servers in the Dashboard tab
4. Monitor logs in real-time in the Logs tab

API Endpoints

Server Management

• GET /api/servers - List all servers
• POST /api/servers - Start new server
• DELETE /api/servers/:id - Stop server
• PATCH /api/servers/:id/port - Change port

Utilities

• POST /api/scan-ports - Scan for open ports
• POST /api/detect-project - Detect project type
• POST /api/browse-directory - Browse directories
• GET /api/health - Health check

WebSocket Events

Client → Server

• Connection management
• Server control commands

Server → Client

• log - Real-time log messages
• server-status - Server state updates
• port-scan - Port scan results
• error - Error notifications

Security Features

• Localhost-only operations
• Input validation and sanitization
• Process isolation and cleanup
• Rate limiting for port scanning
• Safe file system access

Development

Project Structure

ServerDash/
├── backend/          # Express.js server with WebSocket
├── frontend/         # React + TypeScript + Tailwind
├── shared/           # Shared TypeScript types
└── package.json      # Workspace configuration

Scripts

• npm run dev - Start both backend and frontend
• npm run build - Build all packages
• npm run typecheck - Type checking across workspace

Tech Stack

• Backend: Node.js, Express.js, WebSocket, TypeScript
• Frontend: React 18, TypeScript, Tailwind CSS, Vite
• Build Tools: tsx, tsc, Vite, PostCSS
• Package Management: npm workspaces
• Icons: Lucide React
• HTTP Client: Native fetch API
• Real-time: WebSocket with fallback

License

MIT License - feel free to use and modify for your development needs.