Refresh a tab on file update

Suppose we have a file: index.html.

We serve it on localhost:3000 and view it through the browser.

In development, changes to the index.html file do not trigger a refresh on the browser.

Only Create React App / Webpack seem to have this functionality. It seems foolish however, if we are just dealing with small static sites to pull in these tools and all their dependencies.

Solution

service --[watches]--> index.html

server ----[serves]---> index.html

server <--[Updates]--- service
|
----------[Updates]--> Browser webpage

Service

  • Watch index.html

    inotify

  • Update server

    Send a request to a server endpoint

Server

  • Handle updates

    Handle incoming request from service

  • How to refresh a page programmatically

    Send update via websocket to client

Client

logo