Simple Live reload server

Simple live reload server using shell script, violent monkey (browser extension) and websocket.

TLDR, File changes are detected using shell script(inotify) and sent a websocket message to violent monkey extension script to reload the site

Shell script which uses inotify to monitor the file changes, well we can use something simple like entr

#!/bin/bash

if [ -z "$(which inotifywait)" ]; then
    echo "inotifywait not installed."
    echo "In most distros, it is available in the inotify-tools package."
    exit 1
fi

inotifywait --recursive --monitor --format "%e %w%f" \
--event modify,move,create,delete ./ \
| while read changed; do
    echo "reload"
done

violent monkey script

// ==UserScript==
// @name        New script 127.0.0.1:7878
// @namespace   Violentmonkey Scripts
// @match       http://127.0.0.1:7878/*
// @grant       none
// @version     1.0
// @author      -
// @description 20/2/2025, 10:25:19 pm
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1
// ==/UserScript==

console.log("hello world")

let toggle = false;
const socket = new WebSocket('ws://localhost:7070');

socket.onopen = function(event) {
  console.log("Websocket is created");
};

socket.onmessage = function(event) {
  console.log(event.data);
  if(event.data==="reload") {
    window.location.reload(); //reload the window (simple reload not hard reload)
  }
};

socket.onclose = function(event) {
  console.log("Websocket is terminated");
};

function sendMessage(message) {
  socket.send(message);
}

// Keybindings

const { register } = VM.shortcut;

register('c-i', () => {
  toogle = !toggle;
  sendMessage(toggle);
});

final piece of the puzzle is the websocket server websocketd

download the websocketd binary from the github, https://github.com/joewalnes/websocketd

./websocketd --port=7070 ./sample.sh

Drawback, This does a soft reload not hard reload. Still exploring how to do hard reload from javascript.