Introduction to Livereload

Livereload is an essential tool for web developers that allows for real-time reloading of web pages during the development process. It improves productivity and efficiency by automatically refreshing the browser whenever changes are detected in the code.

How Livereload Works

Livereload works by watching your file system for changes to HTML, CSS, and JavaScript files. When a change is detected, it reloads the web page or injects the changes directly without the need for a full page reload.

Installation and Setup

  npm install -g livereload

  livereload [path] [options]

API Examples

Starting the Livereload Server

   const livereload = require('livereload');
   const server = livereload.createServer();
   server.watch(__dirname + "/public");

Watching Specific Files

   const server = livereload.createServer();
   server.watch(__dirname + "/public/css");
   server.watch(__dirname + "/public/js");

Using with Connect or Express

   const express = require('express');
   const livereload = require('livereload');
   const connectLivereload = require('connect-livereload');

   const app = express();
   const liveReloadServer = livereload.createServer();
   liveReloadServer.watch(__dirname + "/public");

   app.use(connectLivereload());

   app.get('/', function (req, res) {
   res.send('Hello World!')
   });

   app.listen(3000, function () {
   console.log('Example app listening on port 3000!')
   });

App Example

Below is an example of a basic Node.js application using Livereload:

  const express = require('express');
  const livereload = require('livereload');
  const connectLivereload = require('connect-livereload');

  const app = express();
  const liveReloadServer = livereload.createServer();
  liveReloadServer.watch(__dirname + "/public");

  app.use(connectLivereload());
  app.use(express.static('public'));

  app.get('/', (req, res) => {
    res.send('
Welcome to Livereload Example!
Make changes to see live updates.
');
  });

  app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
  });

Using the above setup, any changes made to HTML/CSS/JavaScript files within the public directory will automatically trigger a Livereload, making the development process smoother and more efficient.

Hash: b916012df34283789ca24ffdd47621dc3e24bbe71590b9a9c61bc7ea8d62ed14