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