CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-livereload

LiveReload server for monitoring files and automatically reloading web browsers

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/livereload@0.10.x
Publish Source
CLI
Badge
tessl/npm-livereload badge