hot-server

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #llm #deep-learning #windows #cli #kubernetes #awesome-list #pytorch #ios #mcp #open-source

(★ 103)

live-server with hot reloading

File Explorer

Download Latest Version (.zip)

.gitignore
index.js
LICENSE
package.json
README.md
ws-inject.html
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# hot-server

No config [hot reloading](https://roadtolarissa.com/hot-reload/) for sketching with code.

## Instructions

### Install:

`npm install -g hot-server`

### Serve directory statically:

`hot-server`

Save changes to `*.js` or `*.css` and they'll be injected via a websocket without a full refresh.

Since your whole script file reruns, you'll probably want to clean up anything it adds to the page with something like `var svg = d3.select('#graph').html('').append('svg')`. Stopping any timers and clearing any listeners that don't reset is also a good idea:

if (window.timer) timer.stop()
    window.timer = d3.timer(function(t){
      // cool animation code
    })

To persist data between refreshes, declare and initialize your data in a separate file from the rest of your code. Only the changed file will rerun. Or only initialize your data on the first run:

window.points = window.points || d3.range(50)
        .map(d => [Math.random()*width, Math.random()*height])

Default port is 3989; `hot-server --port=4444` sets the port.

`hot-server --dir=build` sets the directory to serve.

`hot-server --ignore=data-raw` skips watching a folder.

`hot-server --consoleclear` runs `console.clear()` after js files are changed.

`hot-server --cert=../../cert/localhost.pem` passes in a [certificate](https://web.dev/how-to-use-local-https/) and enables https.

## Is this the right tool for me?

If you're building an actual webapp, maybe not! This is a naive approach to hot reloading that will not work with more complicated code. [Webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/hmr.html) might be a better option:

- [Webpack Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement.html)
- [Live React: Hot Reloading with Time Travel](https://www.youtube.com/watch?v=xsSnOQynTHs)
- [Live Editing JavaScript with Webpack (Part III)](http://jlongster.com/Backend-Apps-with-Webpack--Part-III)

Or a even a different language:

- [Arcadia for Clojure and Unity](http://arcadia-unity.github.io/)
- [Figwheel for ClojureScript](https://github.com/bhauman/lein-figwheel)

But! If you're mostly working on [short, simple pieces](http://roadtolarissa.com/) and dislike yak shaving config files this might be a good fit. It is as simple to use as `python -m http.server` with the added benefit of seemly magically updating pages without a refresh.

The implementation is also simple—just 60 lines of code for the server and 10 for the client—and you might be able to re-purpose it. I incorporated a modified version into a slow `make/requirejs/grunt` build system and reduced the time it took to see the result of changing my code from ~6 seconds to 0.

hot-server

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

hot-server

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README