Current time: ${new Date().toLocaleTimeString()}
\n\n`);\n});\n\napp.listen(port, () => {\n console.log(`Express app listening at http://localhost:${port}`);\n console.log(`LiveReload server running on port 35729, watching ${path.join(__dirname, 'public')}`);\n});\n\n// Create a 'public' directory and an 'index.html' inside for testing:\n// echo '\\n\\n\\nEdit this file to see live reload.
\\n\\n' > public/index.html","lang":"javascript","description":"This example sets up an Express server with `connect-livereload` and a separate `livereload` server. It demonstrates how to integrate the middleware to inject the LiveReload script into static and dynamic HTML responses, enabling automatic browser reloads upon file changes. It highlights correct middleware placement and the necessity of a separate LiveReload server."},"warnings":[{"fix":"Evaluate modern build tools (e.g., Vite, Webpack Dev Server with HMR) or actively maintained LiveReload server implementations. If you must use it, be aware of potential compatibility issues with newer Node.js or Express versions.","message":"The `connect-livereload` package is effectively abandoned, with the last release (v0.6.1) dating back to December 2018. While it may still function for basic use cases, it is no longer actively maintained, meaning no new features, bug fixes, or security updates are to be expected. Consider alternative, actively maintained solutions for live reloading in modern development workflows.","severity":"deprecated","affected_versions":">=0.6.1"},{"fix":"Ensure a LiveReload server is running and configured to serve `livereload.js` on the port specified in `connect-livereload` options (default 35729). For example, `const lrserver = livereload.createServer(); lrserver.watch(__dirname + '/public');`.","message":"This middleware only injects the client-side LiveReload script. It does NOT serve the `livereload.js` file itself or provide the actual file watching and reload triggering mechanism. You *must* run a separate LiveReload server (e.g., `livereload` npm package, `grunt-contrib-watch`, `webpack-dev-server`) that listens on the specified port (default 35729) and serves the `livereload.js` client script.","severity":"gotcha","affected_versions":"*"},{"fix":"Disable any browser LiveReload extensions when using `connect-livereload` to avoid conflicts.","message":"If you have a browser-based LiveReload extension installed, it can conflict with `connect-livereload`'s server-side injection, leading to unexpected behavior or reloads not functioning correctly.","severity":"gotcha","affected_versions":"*"},{"fix":"For static HTML injection: `app.use(connectLiveReload(...)); app.use(express.static(...));`. For dynamic HTML: `app.use(express.static(...)); app.use(connectLiveReload(...)); app.get('/dynamic', ...);`.","message":"The placement of `connect-livereload` middleware in your Express/Connect application's middleware stack is crucial. If you need it to inject into static HTML files, it must be placed *before* `express.static()` or similar static file serving middleware. If only for dynamic content, it can be placed after static routes but before specific dynamic route handlers.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Start your LiveReload server (e.g., `livereload.createServer().watch(...)`) and ensure it's configured to listen on port 35729 (or the port specified in `connect-livereload` options). Verify no other process is blocking this port.","cause":"The `livereload.js` script requested by the browser could not be fetched. This almost always means that the separate LiveReload server (which is responsible for serving this script) is not running or is not listening on the expected port.","error":"GET http://localhost:35729/livereload.js net::ERR_CONNECTION_REFUSED"},{"fix":"1. Disable browser LiveReload extensions. 2. Verify `connect-livereload` is placed correctly in the middleware stack (before static for HTML). 3. Check `ignore` and `include` options to ensure desired files are not excluded. 4. Ensure your LiveReload server (`livereload` package or similar) is actively watching the correct directories and communicating with the browser.","cause":"This is a general issue with multiple potential causes: a conflicting browser extension, incorrect middleware placement, `connect-livereload` not configured for the correct file types (via `ignore` or `include` options), or the LiveReload server not watching the correct directories.","error":"LiveReload not working / Browser not reloading on file changes."},{"fix":"Ensure `connect-livereload` is only processing text-based HTML responses. Review your middleware stack and `ignore` rules. If you have custom middleware modifying `res.write`/`res.end`, ensure compatibility. You can also customize the `html` option to better suit your content detection if non-standard responses are being processed.","cause":"This error can occur if `connect-livereload` tries to process a response that is not a string (e.g., a buffer, or a response from middleware that doesn't `res.write` or `res.end` with a string), particularly within its `html` detection function.","error":"TypeError: Cannot read properties of undefined (reading 'split')"}],"ecosystem":"npm","meta_description":null}