Node.js module to refresh and reload your code in your browser when your code changes. No browser plugins required.
Automatically refresh and reload your code in your browser when your code changes. No browser plugins required.
Restarting your HTTP server and refreshing your browser is annoying.
Reload works in two different ways depending on if you're using it:
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.
Looking for a quick guide to updating reload to version 2? Please refer to our update section below.
npm install [-g] [--save-dev] reload
There are two different ways to use reload.
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.
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);
server.listen(app.get('port'), function () {
console.log('Web server listening on port ' + app.get('port'))
})
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 -->
<script src="/reload/reload.js"></script>
</body>
</html>
Refer to the reload express sample app for this working example.
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();
});
reload(app, opts)
| Parameter Name | Type | Description | Optional |
|---|---|---|---|
| app | object | The app. It may work with other frameworks, or even with Connect. At this time, it's only been tested with Express. | |
| opts | object | An optional object of options for reload. Refer to table below on possible options | ✓ |
| Parameter Name | Type | Description | Optional | Default |
|---|---|---|---|---|
| port | number | Port to run reload on. | ✓ | 9856 |
| route | string | Route 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 |
| verbose | boolean | If set to true, will show logging on the server and client side. | ✓ | false |
Reload dropped support for server. The only required parameter for reload is app.
Upgrade with required arguments: reload(server, app) becomes reload(app)
Upgrade with required arguments and the one optional argument: reload(server, app, true) becomes reload(app, {verbose: true})
To read more about the API breaking changes please refer to the changelog.
An object containing:
| Name | Type | Description |
|---|---|---|
| reload | function | A function that when called reloads all connected clients. For more information see manually firing server-side reload events. |
There are two ways to use the command line application.
package.json fileEach 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: 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.
-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
-v, --verbose [verbose] Turning on logging on the server and client side. Defaults to false
Copyright 2017
JP Richardson jprichardson@gmail.com
Alexander J. Lallier mralexlallier@gmail.com
FAQs
Node.js module to refresh and reload your code in your browser when your code changes. No browser plugins required.
The npm package reload receives a total of 11,950 weekly downloads. As such, reload popularity was classified as popular.
We found that reload demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.