Reloaded Vibes: Smart auto-reloading service and server for (web) development.
0xEAB
desisma at heidel.beer
Mon May 13 21:56:11 UTC 2019
"Are you're tired of hitting the refresh button again and again
while developing?" - a rhetorical question, I know. So, let's
start with a short story:
----- Story
(Scroll down to skip)
A year and a few months ago, I was writing my diploma thesis
and finishing my diploma project - a single-page web app. Thanks
to the framework I used, Aurelia, I came in contact with a pretty
handy feature: whenever I saved one file in the source directory,
my browser would automatically refresh and I'd be able to see the
recent version of my app.
How did this work?
There was one special part in the CLI toolchain introduced by
Aurelia: Browsersync[0]. I did not only take care of acting as a
development web server, but it did also call the Babel transpiler
and a bundler in order to transform my code into a single JS file
for the browser to execute. After doing so, it also tell my
browser to refresh. To simplify that, the dev server did simply
"inject" some loader into my HTML page.
Back to the present.
While doing some web development, I realized how tedious it is to
always hit refresh after applying some changes.
What's more? While with simple scripts directly executed by
some interpreter (e.g. PHP) it's just a single click on the
refresh button (or F5), but there might be further preprocessors
involved (e.g. Babel, Webpack). The simple "one-click to refresh"
turns into an "execute that command here, press reload there,
etc." procedure.
Inspired by my diploma project, I installed Browsersync. And
configured it - well, at least, I tried to do so. While there are
(probably) neat presets (so called "recipes") for using it along
with many well-known tools, I did find pretty few information on
how to set this stuff up manually (in order to configure
Browsersync for my setup - instead of the roughly easier route of
basing my setup on Browsersync). While playing around with that,
I realized that I'd prefer some easier and simpler solution.
----- End of Story
This was how I came up with "Reloaded Vibes".
I call it "a smart auto-reloading service and server for web
development."
It watches the specified directories for changes and notifies web
browsers (or other client applications) through its WebSocket
server of them. This way those clients can respond to the change
and e.g. reload the page so that they'll display the recent
changes made by the user.
There are no config files; instead everything is configured by
command line arguments.
Moreover, it features a built-in webserver for serving static
files. Utilizing it's script-injection feature it can
automatically insert the script loader into HTML pages, so one
doesn't have to take care of it manually.
Usage:
./reloaded-vibes --watch=<DIRECTORY TO WATCH>
--action=<COMMANDLINE> --webserver=<WWW SOCKET>
--htdocs=<DOCUMENT ROOT>
Full manual and source code available on GitHub.[1]
It's on DUB, too.[2]
Technical details: powered by vibe.d and FSWatch[3].
License: Boost and MIT (applies to vibe.d, thus also to the RV
binary)
- Elias
[0] https://browsersync.io/
[1] https://github.com/voidblaster/reloaded-vibes
[2] http://reloaded-vibes.dub.pm/
[3] https://github.com/WebFreak001/FSWatch
More information about the Digitalmars-d-announce
mailing list