Simple automatic page reload

One of the features of JavaScript build tools like Vite that I quite like is the ability to reload the page when a change in a source file is detected. However, I often don't even use such a build tool because they are overkill for my use case and adding one as a dependency for just this one feature hardly seems justified.

Here is a simple solution that provides me with the same feature and only consists of a Python script providing a Websocket server and a small (10 line) JavaScript client.

The server watches some filesystem paths in the current directory for changes using the watchfiles Python library. The Websocket server is provided by the websockets library and listens for connections on localhost:5678. Whenever a change is detected, it sends a reload message to all connected clients. Here is the script:

#!/usr/bin/env python

import asyncio
import watchfiles

from websockets.asyncio.server import broadcast, serve

PATHS = ["./src", "./test", "./assets", "./index.html"]

WS_HOST = "localhost"
WS_PORT = 5678

async def noop(websocket):
    await websocket.wait_closed()

async def broadcast_changes(server):
    print(f"[.] Watching for changes: {', '.join(PATHS)}")
    async for changes in watchfiles.awatch(*PATHS):
        for change, filename in changes:
            print(f"[.] {change.name}: {filename}")
            broadcast(server.connections, "reload")

async def main():
    async with serve(noop, WS_HOST, WS_PORT) as server:
        try:
            await broadcast_changes(server)
        except asyncio.CancelledError:
            server.close()

if __name__ == "__main__":
    asyncio.run(main())

The JavaScript client is even simpler, it only has 10 lines:

const WS_HOST = "localhost";
const WS_PORT = 5678;

const websocket = new WebSocket(`ws://${WS_HOST}:${WS_PORT}/`);

websocket.addEventListener("message", function(event) {
    if (event.data === "reload") {
        window.location.reload();
    }
});

It connects to the server at localhost:5678 and reloads the page when it encounters the reload message.

Obviously this is not a replacement for the many many other features that JavaScript build tools provide. There are also many things that could be improved (e.g. ignore temporary files), but for my specific use case this solution was good enough.

• websockets
• watchfiles