or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli.mdexpress-integration.mdindex.md
tile.json

tessl/npm-reload

Node.js module to refresh and reload your code in your browser when your code changes.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/reload@2.4.x

To install, run

npx @tessl/cli install tessl/npm-reload@2.4.0

index.mddocs/

Reload

Reload provides automatic browser refresh functionality for Node.js applications during development. It works by establishing a WebSocket connection between the browser and server, automatically refreshing the page when the server restarts. No browser plugins are required.

Package Information

  • Package Name: reload
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install reload (local) or npm install -g reload (global)

Core Imports

const reload = require('reload');

For TypeScript with type definitions:

import * as reload from 'reload';

Basic Usage

Express Integration (Recommended)

const express = require('express');
const reload = require('reload');

const app = express();

// Set up your Express routes
app.get('/', (req, res) => {
  res.send(`
    <html>
      <body>
        <h1>Hello World</h1>
        <script src="/reload/reload.js"></script>
      </body>
    </html>
  `);
});

// Initialize reload
const reloadServer = reload(app);

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Command Line Usage

# Basic usage - serves current directory on port 8080
reload

# Open browser automatically and serve specific directory
reload -b -d ./public -p 3000

# Watch specific file types and directories
reload -e "html,js,css,json" -w ./src -d ./public

Architecture

Reload operates in two distinct modes:

  • Express Middleware Mode: Integrates with existing Express applications by adding reload routes and WebSocket server
  • Standalone CLI Mode: Provides its own HTTP server with static file serving and automatic script injection
  • WebSocket Communication: Uses WebSocket protocol for real-time communication between browser and server
  • File Watching: Monitors file changes through process managers (supervisor, nodemon) or CLI file watching

The reload process works by:

  1. Establishing WebSocket connection between browser client and Node.js server
  2. Detecting server restarts (via WebSocket connection closure)
  3. Automatically refreshing the browser page once the server comes back online

Capabilities

Express Integration

Core Express middleware functionality for integrating reload into existing web applications. Provides WebSocket server management and reload script serving.

function reload(app, opts?, server?): ReloadReturn;

interface ReloadOptions {
  port?: number;                    // WebSocket server port (default: 9856)
  webSocketServerWaitStart?: boolean; // Delay WebSocket server start (default: false)
  route?: string;                   // Route for reload script (default: '/reload/reload.js')
  verbose?: boolean;                // Enable verbose logging (default: false)
}

interface ReloadReturn {
  reload(): void;                   // Manually trigger browser reload
  startWebSocketServer(): void;     // Start WebSocket server (when webSocketServerWaitStart is true)
  wss: import('ws').Server | undefined; // WebSocket server instance (undefined until server starts)
}

Express Integration

Command Line Interface

Standalone server with static file serving, file watching, and automatic browser opening. Ideal for static HTML development and simple projects.

Command line options for controlling server behavior, file watching, and browser integration.

reload [options]

Options:
  -b, --browser                  # Open browser automatically
  -n, --hostname [hostname]      # Custom hostname (default: localhost)  
  -d, --dir [dir]               # Directory to serve (default: current dir)
  -w, --watch-dir [watch-dir]   # Directory to watch for changes
  -e, --exts [extensions]       # File extensions to watch (default: html,js,css)
  -p, --port [port]             # Server port (default: 8080)
  -s, --start-page [start-page] # Start page filename (default: index.html)
  -f, --fallback [fallback]     # Fallback to start page for missing routes
  -v, --verbose [verbose]       # Enable verbose logging

Command Line Interface

Types

interface ReloadOptions {
  /** WebSocket server port (default: 9856) */
  port?: number;
  /** Delay WebSocket server start until startWebSocketServer() is called (default: false) */
  webSocketServerWaitStart?: boolean;
  /** Route path for serving reload client script (default: '/reload/reload.js') */
  route?: string;
  /** Enable verbose logging on server and client (default: false) */
  verbose?: boolean;
}

interface ReloadReturn {
  /** Manually trigger reload for all connected browsers */
  reload(): void;
  /** Start the WebSocket server (only when webSocketServerWaitStart is true) */
  startWebSocketServer(): void;
  /** WebSocket server instance for advanced usage (undefined until server starts) */
  wss: import('ws').Server | undefined;
  /** Get reload client script code (only available in CLI/server mode) */
  reloadClientCode?(): string;
}