New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

reload

Package Overview
Dependencies
Maintainers
3
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reload

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

  • 3.0.0
  • Source
  • npm
  • Socket score
Version published
Weekly downloads
13K
decreased by-21.59%
Maintainers
3
Weekly downloads
 
Created
Source

reload

Build Status Build status js-standard-style NPM version

Automatically refresh and reload your code in your browser when your code changes. No browser plugins required.

Table Of Contents

Why?

Restarting your HTTP server and refreshing your browser is annoying.

How does it work?

Reload works in two different ways depending on if you're using it:

  1. In an existing Express application in which it creates a server side route for reload or,
  2. As a command line tool which starts its own Express application to monitor the file you're editing for changes and to serve reload-client.js to the browser.

Once reload-server and reload-client are connected, the client side code opens a WebSocket to the server and waits for the WebSocket to close, once it closes, reload waits for the server to come back up (waiting for a socket on open event), once the socket opens we reload the page.

Installation

npm install [-g] [--save-dev] reload

Two ways to use reload

There are two different ways to use reload.

  1. In an Express application, allowing your whole project to utilize reload when the code is altered
  2. As a command line application to serve up static HTML files and be able to reload when the code is altered

Using reload in Express

When used with Express reload creates a new Express route for reload. When you restart the server, the client will detect the server being restarted and automatically refresh the page.

Reload can be used in conjunction with tools that allow for automatically restarting the server such as supervisor (recommended), nodemon, forever, etc.

Express Example

server.js:

var express = require('express')
var http = require('http')
var path = require('path')
var reload = require('reload')
var bodyParser = require('body-parser')
var logger = require('morgan')

var app = express()

var publicDir = path.join(__dirname, 'public')

app.set('port', process.env.PORT || 3000)
app.use(logger('dev'))
app.use(bodyParser.json()) // Parses json, multi-part (file), url-encoded

app.get('/', function (req, res) {
  res.sendFile(path.join(publicDir, 'index.html'))
})

var server = http.createServer(app)

// Reload code here
reload(app).then(function () {
  // Reload started, start web server
  server.listen(app.get('port'), function () {
    console.log('Web server listening on port ' + app.get('port'))
  })
}).catch(function (err) {
  console.error('Reload could not start, could not start server/sample app', err)
})

public/index.html:

<!doctype html>
<html>
  <head>
    <title>Reload Express Sample App</title>
  </head>
  <body>
    <h1>Reload Express Sample App</h1>
    <!-- All you have to do is include the reload script and have it be on every page of your project -->
    <!-- You do not create this route, reload creates it for you automatically -->
    <script src="/reload/reload.js"></script>
  </body>
</html>

Refer to the reload express sample app for this working example.

Manually firing server-side reload events

You can manually call a reload event by calling reload() yourself. An example is shown below:

reloadServer = reload(app);
watch.watchTree(__dirname + "/public", function (f, curr, prev) {
    // Fire server-side reload event
    reloadServer.reload();
});

API for Express

Reload returns a promise. The API takes a required express application and an optional options object.

  • To call Reload you should use a then/catch to call reload. 
    • reload(app [,opts]).then(function () {
  // Reload started
}).catch(function (err) {
  // Reload did not start correctly, handle error
})
  • If you are in an asynchronous function you can call Reload with await 
    • async function asyncCall() {
  try {
    var reloadReturned = await reload(app [,opts])
  } catch (err) {
    // Handle error
  }
}

Consult the migration guide for help updating reload across major versions.

Parameters
Table of reload parameters
Parameter NameTypeDescriptionOptional
appobjectThe app. It may work with other frameworks, or even with Connect. At this time, it's only been tested with Express.
optsobjectAn optional object of options for reload. Refer to table below on possible options✓
Table of options for reload opts parameter
Parameter NameTypeDescriptionOptionalDefault
portnumberPort to run reload on.✓9856
webSocketServerWaitStartbooleanWhen enabled will delay starting and opening WebSocket server when requiring reload. After enabling use the startWebSocketServer function returned in the object provided by the API to start the WebSocket. Note: Failing to call the returned function with this option enabled will cause reload not to work. See return API for more information✓FALSE
routestringRoute that reload should use to serve the client side script file. Changing the route will require the script tag URL to change. Reload will always strip any occurrence of reload.js and append reload.js for you. This is to ensure case, order, and use of / is correct. For example specifying newRoutePath as the route will give reload a route of newRoutePath/reload.js. (Recommend not modifying).✓reload
forceWssbooleanForces reload client connections to always use wss (secure websockerts) even when the window location is HTTP✓FALSE
httpsobjectHTTP options object. When defined runs reload in HTTPS mode✓{}
https.certAndKeyobjectObject that holds configuration for HTTPS key and cert configuration✓{}
https.certAndKey.keystringFile path to HTTP key (not optional when defining an HTTPS object)null
https.certAndKey.certstringFile path to HTTP cert (not optional when defining an HTTPS object)null
https.p12objectObject that holds configuration for HTTPS P12 configuration✓{}
https.p12.p12PathstringFile path or file contents as string (Not optional when using P12 configurationnull
https.p12.passphrasestringP12 passphrase✓null
verbosebooleanIf set to true, will show logging on the server and client side.✓FALSE
Returns

An object containing:

NameTypeDescription
reloadfunctionA function that when called reloads all connected clients. For more information see manually firing server-side reload events.
startWebSocketServerfunctionReturns a promise. Starts and opens the WebSocket server required for reload. Only defined when using the optional parameter webSocketServerWaitStart. Read the parameters for more information
closeServerfunctionReturns a promise. Closes Reload WebSocket server
wssobjectWeb socket server

Using reload as a command line application

There are two ways to use the command line application.

  1. In a directory serving blank static HTML files or
  2. In a project with a package.json file

Each will require different modes of installing.

In case one you should install reload globally with npm install reload -g. Also with reload installed globally you can go to any directory with an HTML file and use the command reload to constantly watch it and reload it while you make changes.

In case two you should install locally with npm install --save-dev, since this tool is to aid in development you should install it as a dev dependency.

Navigate to your html directory:

reload -b

This will open your index.html file in the browser. Any changes that you make will now reload in the browser. You don't need to modify your HTML at all.

Usage for Command Line Application

Usage: reload [options]

Options:

  -h, --help                     output usage information
  -V, --version                  output the version number
  -b, --browser                  Open in the browser automatically.
  -n, --hostname [hostname]      If -b flag is being used, this allows for custom hostnames. Defaults to localhost.
  -d, --dir [dir]                The directory to serve up. Defaults to current dir.
  -w, --watch-dir [watch-dir]    The directory to watch. Defaults the serving directory.
  -e, --exts [extensions]        Extensions separated by commas or pipes. Defaults to html,js,css.
  -p, --port [port]              The port to bind to. Can be set with PORT env variable as well. Defaults to 8080
  -s, --start-page [start-page]  Specify a start page. Defaults to index.html
  -f, --fallback [fallback]      Fallback to the start page when route is not found
  -v, --verbose [verbose]        Turning on logging on the server and client side. Defaults to false

License

(MIT License)

Copyright 2019

Orginal Author:

JP Richardson jprichardson@gmail.com

Owned by:

Alexander J. Lallier mralexlallier@gmail.com

Keywords

FAQs

Package last updated on 07 Apr 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Socket Joins TC54 to Help Shape the Future of SBOMs, CycloneDX, and PURL

Security News

Company News

Socket Joins TC54 to Help Shape the Future of SBOMs, CycloneDX, and PURL

Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.

By Sarah Gooding  -  Jan 31, 2025
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc