connect-livereload
Advanced tools
The `connect-livereload` npm package is a middleware for Connect and Express that injects a script into your HTML to enable live reloading. This is particularly useful during development as it allows for automatic reloading of the web page when changes are detected, improving the development workflow.
Automatic Script Injection
This feature automatically injects the livereload script into your HTML, enabling live reloading of the page when changes are detected. The code sample demonstrates how to set up an Express server with the `connect-livereload` middleware.
const connectLivereload = require('connect-livereload');
const express = require('express');
const app = express();
app.use(connectLivereload());
app.get('/', (req, res) => {
res.send('<html><body><h1>Hello World</h1></body></html>');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});Custom Script Injection
This feature allows you to specify a custom URL for the livereload script. The code sample shows how to configure the middleware to use a custom script URL.
const connectLivereload = require('connect-livereload');
const express = require('express');
const app = express();
app.use(connectLivereload({
src: 'http://localhost:35729/livereload.js?snipver=1'
}));
app.get('/', (req, res) => {
res.send('<html><body><h1>Hello World</h1></body></html>');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});The `livereload` package provides a standalone server that watches for file changes and notifies the browser to reload. Unlike `connect-livereload`, it is not a middleware but a separate server that can be used in conjunction with any web server.
The `browser-sync` package offers a more comprehensive solution for live reloading, including features like synchronized browser testing, form replication, and more. It is more feature-rich compared to `connect-livereload` and can be used as a standalone server or middleware.
The `webpack-dev-server` package is specifically designed for use with Webpack. It provides live reloading, hot module replacement, and other development features. It is more tightly integrated with Webpack compared to `connect-livereload`.
connect middleware for adding the livereload script to the response. no browser plugin is needed. if you are happy with a browser plugin, then you don't need this middleware.
npm install connect-livereload --save-dev
this middleware can be used with a LiveReload server e.g. grunt-reload.
In your connect or express application add this after the static and before the dynamic routes:
var liveReloadPort = 35729;
var excludeList = ['.woff', '.flv'];
app.use(require('connect-livereload')({
port: liveReloadPort,
excludeList: excludeList
}));
please see the examples for the app and Grunt configuration.
An alternative would be to install the LiveReload browser plugin.
FAQs
connect middleware for adding the livereload script to the response
The npm package connect-livereload receives a total of 231,236 weekly downloads. As such, connect-livereload popularity was classified as popular.
We found that connect-livereload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.