rldr

Reloader, watches files for changes, reloads webpages in response

step 1 add a script tag for rldr to your html

<script src="/rldr"></script>

Option A: rldr in express

To use add this to your html someplace

Then in your express server add rldr to the app

automatic watching

  const path = require("path")
  const pathsToWatch = [path.join(__pathname, "../src")] 
  require("rldr")(app, pathsToWatch)

manual watching

  const path = require("path")
  reloadDirs = [path.join(__pathname, "../src")] 

  function addRldr(app) {
    const rldr = require("rldr")(app)
    const watch = require("watch")
  
    reloadDirs.forEach(dir => {
      watch.watchTree(dir, {interval: .2}, function (f, curr, prev) {
          console.log("Server Change Detected, reloading client")
          // Fire server-side reload event
          rldr.reload();
      });
    })
  }

Option B: rldr as a command

this had been moved to a separate module named rldr-cli rldr-cli

Adding a custom origin for RLDR requests

If rldr is used in addition to another webserver, you may need to set the RLDR_ORIGIN. So if you are loading rldr as http://localhost:8045 you can preset the variable with an inline script tag

<script>var RLDR_ORIGIN="http://localhost:8045"</script>
<script src="http://localhost:8045/rldr"></script>

or by settings RLDR_ORIGIN in localStorage

you will also probaby need to call the rldr-cli with --alow-origin http://localhost:YOUR_OTHER_PORT

Additional Notes

it uses express-longpoll to send reload events back to the client

Questions

why not websockets? simplicity. longpoll just works in more environments.