Command Line Interface

The reload CLI provides a standalone development server with automatic browser refresh capabilities. It serves static files, watches for changes, and automatically injects reload functionality into HTML pages without requiring code modifications.

Capabilities

Basic Server Command

Start a development server with reload functionality.

reload [options]

Usage Examples:

# Basic usage - serves current directory on port 8080
reload

# Serve specific directory
reload -d ./public

# Custom port
reload -p 3000

# Open browser automatically
reload -b

Browser Integration

Automatically open the application in the default browser.

-b, --browser

Usage Examples:

# Open browser automatically
reload -b

# Open browser with custom hostname
reload -b -n myapp.local

# Open browser with specific port
reload -b -p 3000

Hostname Configuration

Configure the hostname for browser opening and server binding.

-n, --hostname [hostname]

Default: localhost Usage: Customize the hostname used when opening the browser automatically.

Usage Examples:

# Use custom hostname
reload -b -n myapp.local

# Use IP address
reload -b -n 192.168.1.100

Directory Serving

Configure which directory to serve as the web root.

-d, --dir [dir]

Default: Current working directory Usage: Specify the directory containing your HTML, CSS, and JavaScript files.

Usage Examples:

# Serve public directory
reload -d ./public

# Serve build output
reload -d ./dist

# Serve nested directory
reload -d ./src/web

File Watching

Configure which directory to monitor for file changes.

-w, --watch-dir [watch-dir]

Default: Same as serving directory Usage: Watch a different directory than the one being served (useful for compiled assets).

Usage Examples:

# Watch source directory while serving build directory
reload -d ./dist -w ./src

# Watch multiple levels
reload -w ./src/scss

File Extensions

Configure which file types trigger server restart and browser reload.

-e, --exts [extensions]

Default: html,js,css Format: Comma-separated or pipe-separated list Usage: Specify which file extensions should be monitored for changes.

Usage Examples:

# Watch additional file types
reload -e "html,js,css,json,md"

# Watch only specific types
reload -e "html,css"

# Use pipe separator
reload -e "html|js|css|ts"

Port Configuration

Configure the server port.

-p, --port [port]

Default: 8080 Environment Variable: Can also be set via PORT environment variable Usage: Set the port for the HTTP server.

Usage Examples:

# Custom port
reload -p 3000

# Use environment variable
PORT=4000 reload

# High port number
reload -p 8888

Start Page

Configure the default page to serve and open in the browser.

-s, --start-page [start-page]

Default: index.html Usage: Specify the filename to use as the default page.

Usage Examples:

# Use different start page
reload -s main.html

# Use nested start page
reload -s pages/home.html

Fallback Routing

Enable fallback to the start page for single-page applications.

-f, --fallback [fallback]

Default: false Usage: Enable fallback routing for SPAs where all routes should serve the start page.

Usage Examples:

# Enable fallback routing
reload -f

# Combine with custom start page
reload -f -s app.html

Verbose Logging

Enable detailed logging for debugging.

-v, --verbose [verbose]

Default: false Usage: Enable verbose logging on both server and client sides.

Usage Examples:

# Enable verbose logging
reload -v

# Combine with other options
reload -v -b -p 3000

Version Information

Display the current version of reload.

-V, --version

Usage Example:

reload --version

Help Information

Display usage information and available options.

-h, --help

Usage Example:

reload --help

Complete Usage Examples

Basic Static Site Development

# Serve current directory with browser auto-open
reload -b

# Serve specific directory with custom port
reload -b -d ./public -p 3000

# Watch source files while serving build output
reload -b -d ./dist -w ./src -e "html,js,css,scss"

Single Page Application Development

# Enable fallback routing for SPA
reload -b -f -s index.html

# SPA with custom configuration
reload -b -f -s app.html -p 4000 -d ./build

Advanced Development Setup

# Comprehensive development server
reload -b -v -d ./public -w ./src -e "html,js,css,json,md" -p 3000 -n localhost

Server Behavior

Static File Serving

The CLI server provides static file serving with the following features:

• Index files: Automatically serves index.html and index.htm from directories
• MIME types: Proper Content-Type headers for common file types
• File extensions: Automatic .html extension resolution for extensionless URLs
• Fallback routing: Optional SPA-style fallback to start page

HTML Injection

The server automatically injects the reload client script into HTML files:

<!-- Automatically injected by reload -->
<script src="/reload/reload.js"></script>
<!-- End Reload -->

This injection happens for:

• .html files
• Root path requests (/)
• Extensionless URLs that resolve to .html files
• Fallback routing responses

File Watching

File watching is handled by the supervisor package with the following behavior:

• Change detection: Monitors specified file extensions in the watch directory
• Server restart: Automatically restarts the server when files change
• Client notification: WebSocket connection closure triggers browser reload
• Recursive watching: Watches all subdirectories of the specified watch directory

WebSocket Integration

The CLI server uses the same WebSocket system as the Express integration:

• Port: Uses the same port as the HTTP server
• Protocol: WebSocket communication for reload signaling
• Reconnection: Automatic client reconnection after server restart
• Browser compatibility: Requires WebSocket support in the browser

Process Management

The CLI server is managed by the supervisor package:

# The CLI internally runs something equivalent to:
supervisor -e "html,js,css" -w ./src -q -- reload-server.js [args...]

This provides:

• Automatic restart: Server restarts when watched files change
• Quiet mode: Reduces supervisor output noise
• Extension filtering: Only watches specified file extensions
• Directory watching: Monitors specified directories recursively