Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/1wheel/hot-server
live-server with hot reloading
https://github.com/1wheel/hot-server
Last synced: 19 days ago
JSON representation
live-server with hot reloading
- Host: GitHub
- URL: https://github.com/1wheel/hot-server
- Owner: 1wheel
- License: mit
- Created: 2016-07-16T21:51:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-16T13:24:28.000Z (8 months ago)
- Last Synced: 2024-11-07T12:36:02.844Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 313 KB
- Stars: 100
- Watchers: 3
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-live-reloading - **Hot-Server**
README
# 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.