| |
 | Posted by 0xEAB |  Permalink Reply |
|
0xEAB 
| "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
|
