Node.js module to refresh and reload your code in your browser when your code changes. No browser plugins required.
Refresh and reload your code in your browser when your code changes. No browser plugins required. Use with Node.js if you like.
Restarting your Http server and refreshing your browser is annoying.
To use reload with Express 4 support, use reload version ^0.2.0.
To use reload with Express 3 support, use reload version ~0.1.0.
npm install [-g] [--save-dev] reload
Use in conjunction with supervisor, nodemon, or forever.
I recommend supervisor, since nodedemon time to poll for file changes is too slow and not configurable. Supervisor will feel fast. forever tries to do too much. Whenever I look at the docs, I get frustrated and give up.
Reload version ^0.2.0.
server.js:
var express = require('express')
, http = require('http')
, path = require('path')
, reload = require('reload')
, bodyParser = require('body-parser')
, logger = require('morgan')
var app = express()
var publicDir = path.join(__dirname, '')
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
//optional reload delay and wait argument can be given to reload, refer to [API](https://github.com/jprichardson/reload#api) below
reload(server, app, [reloadDelay], [wait])
server.listen(app.get('port'), function(){
console.log("Web server listening on port " + app.get('port'));
});
Reload version ~0.1.0.
server.js:
var express = require('express')
, http = require('http')
, path = require('path')
, reload = require('reload')
var app = express()
var publicDir = path.join(__dirname, 'public')
app.configure(function() {
app.set('port', process.env.PORT || 3000)
app.use(express.logger('dev'))
app.use(express.bodyParser()) //parses json, multi-part (file), url-encoded
app.use(app.router) //need to be explicit, (automatically adds it if you forget)
app.use(express.static(publicDir)) //should cache static assets
})
app.get('/', function(req, res) {
res.sendfile(path.join(publicDir, 'index.html'))
})
var server = http.createServer(app)
//reload code here
//optional reload delay and wait argument can be given to reload, refer to [API](https://github.com/jprichardson/reload#api) below
reload(server, app, [reloadDelay], [wait])
server.listen(app.get('port'), function(){
console.log("Web server listening on port " + app.get('port'));
});
public/index.html: (very valid HTML5, watch the YouTube video)
<!--
watch this: http://www.youtube.com/watch?v=WxmcDoAxdoY
-->
<!doctype html>
<meta charset="utf-8">
<title>My sweet app!</title>
<!-- all you have to do is include the reload script -->
<script src="/reload/reload.js"></script>
<h1>Hello!</h1>
install supervisor:
npm install -g supervisor
reload on any html or js file change:
supervisor -e 'html|js' node server.js
You should install reload globally like npm install -g reload. Then you can use the reload command in your directory without modifying any of your HTML.
Usage:
Usage: reload [options]
Options:
-h, --help Output usage information
-V, --version Output the version number
-b, --browser Open in the browser automatically.
-n, --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
-r, --reload-delay [reload-delay] The client side refresh time in milliseconds. Default is `300`. If wait is specified as true (which is by default, see below) this delay becomes the delay of how long the pages waits to reload after the socket is reopened.
-w, --wait [wait] Specify true, if you would like reload to wait until the server comes back up before reloading the page. Defaults to true
-s, --start-page [start-page] Specify a start page. Defaults to index.html.
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.
It's actually stupidly simple. We leverage supervisor to restart the server if any file changes. The client side keeps a websocket open, once the websocket closes, the client sets a timeout to reload in approximately 300 ms (or any other time you'd like, refer to API below). Simple huh?
If you would like to fire the reload event on your own terms you can use fire a reload event by calling reload() yourself. An example is shown below:
reloadServer = reload(server, app, 1000);
watch.watchTree(__dirname + "/public", function (f, curr, prev) {
console.log("Trying to reload...");
reloadServer.reload();
});
httpServer: The Node.js http server from the module http.expressApp: The express app. It may work with other frameworks, or even with Connect. At this time, it's only been tested with Express.reloadDelay: The client side refresh time in milliseconds. Default is 300. If wait is specified as true (which it is be default, see below) this delay becomes the delay of how long the pages waits to reload after the socket is reopened.wait: If wait is specified as true reload will wait until the server comes back up before reloading the page. Defaults to true.(MIT License)
Copyright 2013, JP Richardson jprichardson@gmail.com
FAQs
Node.js module to refresh and reload your code in your browser when your code changes. No browser plugins required.
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.