or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli.mdfile-watching.mdindex.mdserver-operations.md
tile.json

tessl/npm-livereload

LiveReload server for monitoring files and automatically reloading web browsers

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/livereload@0.10.x

To install, run

npx @tessl/cli install tessl/npm-livereload@0.10.0

index.mddocs/

LiveReload

LiveReload is a Node.js implementation of the LiveReload server that monitors files for changes and automatically reloads web browsers. It serves as a command-line alternative to the graphical LiveReload application, offering both CLI and programmatic API interfaces for integration into development workflows.

Package Information

  • Package Name: livereload
  • Package Type: npm
  • Language: JavaScript (compiled from CoffeeScript)
  • Installation: npm install livereload or npm install -g livereload for CLI usage

Core Imports

const livereload = require('livereload');

ES Module:

import { createServer } from 'livereload';

For CLI usage:

const { run, createServerFromArgs } = require('livereload/lib/command');

Basic Usage

const livereload = require('livereload');

// Create and start a LiveReload server
const server = livereload.createServer();
server.watch(__dirname + "/public");

// Server will monitor files and reload browsers automatically

Architecture

LiveReload is built around several key components:

  • Server Class: Core WebSocket server that handles browser connections and file change notifications
  • File Watcher: Uses chokidar for efficient file system monitoring with configurable patterns
  • WebSocket Protocol: Implements LiveReload protocol v7 for browser communication
  • HTTP Server: Serves the client-side livereload.js script and handles CORS/CORP headers
  • CLI Interface: Command-line wrapper with extensive configuration options

Capabilities

Server Creation and Configuration

Creates a LiveReload server instance with extensive configuration options for ports, file watching patterns, CORS settings, and browser behavior.

function createServer(config?: ServerConfig, callback?: () => void): Server;

interface ServerConfig {
  // Network configuration
  port?: number;              // Default: 35729
  host?: string;              // Default: 'localhost'
  https?: object;             // HTTPS server options
  server?: object;            // Custom HTTP/HTTPS server

  // File watching configuration
  exts?: string[];            // File extensions to watch (replaces defaults)
  extraExts?: string[];       // Additional extensions (appends to defaults)
  exclusions?: RegExp[];      // Regex patterns to exclude
  filesToReload?: string[];   // Specific filenames that trigger reload
  usePolling?: boolean;       // Use polling instead of file events

  // Browser behavior
  applyCSSLive?: boolean;     // Reload CSS without page refresh (default: true)
  applyImgLive?: boolean;     // Reload images without page refresh (default: true)
  originalPath?: string;      // URL to proxy for development
  overrideURL?: string;       // Different host for CSS files
  delay?: number;             // Delay in milliseconds before notifying browser

  // CORS/Security
  cors?: boolean | string;    // Enable CORS support
  corp?: boolean;             // Enable Cross-Origin Resource Policy

  // Control options
  debug?: boolean;            // Show debug messages
  noListen?: boolean;         // Don't start WebSocket server automatically
  version?: string;           // Protocol version (default: '7')
}

Server Operations

File System Monitoring

File watching capabilities with configurable extensions, exclusion patterns, and polling options for network file systems.

// Default extensions watched
const DEFAULT_EXTENSIONS = [
  'html', 'css', 'js', 'png', 'gif', 'jpg', 
  'php', 'php5', 'py', 'rb', 'erb', 'coffee'
];

// Default exclusion patterns
const DEFAULT_EXCLUSIONS = [/\.git\//, /\.svn\//, /\.hg\//];

File Watching

Command Line Interface

Complete CLI with option parsing for all server configuration options plus path specification and help text.

function run(): void; // Main CLI entry point

function createServerFromArgs(testArgv: string[]): {
  server: Server;
  path: string | string[];
}; // Parse CLI args and create server (for testing)

Command Line Interface

Types

interface Server extends EventEmitter {
  config: ServerConfig;
  
  listen(callback?: () => void): void;
  watch(paths: string | string[]): void;
  refresh(filepath: string): void;
  alert(message: string): void;
  close(): void;
  debug(str: string): void;  // Internal debug logging method
}

// Protocol version and default constants
const PROTOCOL_VERSION = '7';
const DEFAULT_PORT = 35729;
const DEFAULT_HOST = 'localhost';

interface ServerConfig {
  port: number;
  host: string;
  version: string;
  exts: string[];
  extraExts: string[];
  exclusions: RegExp[];
  filesToReload: string[];
  applyCSSLive: boolean;
  applyImgLive: boolean;
  originalPath: string;
  overrideURL: string;
  usePolling: boolean;
  delay?: number;
  debug?: boolean;
  cors?: boolean | string;
  corp?: boolean;
  https?: object;
  server?: object;
  noListen?: boolean;
}