Skip to content

A lightweight, professional-grade development server with live file watching and hot reload notifications for modern web applications.

License

Notifications You must be signed in to change notification settings

LMLK-seal/Web-Development-Server

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ Professional Web Development Server

A lightweight, feature-rich development server designed for modern web applications with automatic live reload, anti-caching headers, and SPA (Single Page Application) routing support.

✨ Features

  • πŸ”„ Live Reload - Automatic browser refresh when files change
  • 🚫 Anti-Caching - Prevents browser caching during development
  • 🎯 SPA Support - Handles client-side routing for single-page applications
  • ⚑ Fast & Lightweight - Minimal overhead with efficient file watching
  • πŸŽ›οΈ Configurable - Customizable host, port, and directory settings
  • πŸ“ Smart Directory Detection - Automatically detects dist and build folders
  • πŸ”§ Professional Logging - Clean, informative console output

πŸ“‹ Requirements

  • Python 3.6+
  • Required packages (install via pip install -r requirements.txt):
    • watchdog - File system monitoring
    • websockets - WebSocket support for live reload

πŸš€ Quick Start

  1. Install dependencies:

    pip install -r requirements.txt
  2. Run the server:

    python Server.py
  3. Or specify a custom directory:

    python Server.py /path/to/your/project/dist

πŸŽ›οΈ Usage

Basic Usage

# Serve current directory on default port (3000) python Server.py # Serve specific directory python Server.py ./dist # Custom port python Server.py --port 8080 # Custom host python Server.py --host 0.0.0.0 # Combined options python Server.py ./build --port 8080 --host 0.0.0.0

Command Line Options

Option Short Default Description
directory - Current directory Directory to serve
--port -p 3000 HTTP server port
--host -H localhost Server host address

πŸ—οΈ Project Structure

This server is designed to work with modern web application builds:

your-project/ β”œβ”€β”€ dist/ # Built application files β”‚ β”œβ”€β”€ index.html # Main HTML file β”‚ β”œβ”€β”€ assets/ # Static assets β”‚ β”‚ β”œβ”€β”€ main.js # JavaScript bundles β”‚ β”‚ β”œβ”€β”€ style.css # Stylesheets β”‚ β”‚ └── ... β”‚ └── ... β”œβ”€β”€ Server.py # This development server β”œβ”€β”€ requirements.txt # Python dependencies └── ... 

βš™οΈ How It Works

πŸ”„ Live Reload System

  • File Watcher: Monitors your project directory for changes
  • WebSocket Connection: Establishes real-time communication with the browser
  • Debounced Updates: Prevents excessive reloads with 300ms delay
  • Smart Filtering: Ignores Python files and directories

🚫 Anti-Caching Headers

The server automatically adds these headers to prevent browser caching:

Cache-Control: no-store, no-cache, must-revalidate Pragma: no-cache Expires: 0

🎯 SPA Routing Support

  • Serves index.html for all non-existent routes
  • Perfect for React Router, Vue Router, Angular Router, etc.
  • Maintains clean URLs without hash routing

πŸ”§ Configuration

Default Ports

  • HTTP Server: 3000
  • WebSocket Server: 3001

Environment Detection

The server provides helpful warnings if:

  • index.html is not found in the target directory
  • You're not running from a dist or build folder

πŸ“Š Server Output

When running, you'll see a professional dashboard:

================================================== πŸš€ Professional Development Server is Running πŸš€ - HTTP Server: http://localhost:3000 - Live Reload: Enabled - Caching: Disabled Watching for file changes... Press Ctrl+C to stop. ================================================== 

πŸ› οΈ Development

Dependencies

Download the requirements.txt file.

Extending the Server

The server is built with modularity in mind:

  • DebouncedReloadHandler: Custom file system event handler
  • SPAEnabledHandler: HTTP request handler with SPA support
  • WebSocket server for live reload communication

🚨 Troubleshooting

Common Issues

Port already in use:

python Server.py --port 8080

Permission denied:

# Use a port > 1024 for non-root users python Server.py --port 3000

Live reload not working:

  • Check that WebSocket port (3001) is not blocked
  • Ensure your browser supports WebSocket connections
  • Verify that the index.html file contains the </body> tag for script injection
  • When still having cache issues try browser-Side Manual Fix: Forcing your browser to ignore its cache for a single request. On Windows/Linux: Ctrl + Shift + R or Ctrl + F5 On Mac: Cmd + Shift + R

Browser Compatibility

The live reload feature requires WebSocket support:

  • βœ… Chrome 16+
  • βœ… Firefox 11+
  • βœ… Safari 7+
  • βœ… Edge 12+

πŸ“ License

This project is open source and available under the MIT License.

🀝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.


Made with ❀️ for modern web development

Releases

No releases published

Packages

No packages published

Languages