gawp
Node module to monitor the filesystem and reload the browser on a per-project basis, without browser plugins or additional javascript.
Install and run
npm install -g gawp
Installing the package runs the monitor server as a background process,
using the forever package. In future updates I plan on writing a script which creates
a scheduled task (on Windows) or a cronjob (on Linux) which initialises the server on startup - until then, initialising the server
has to be done manually after each restart, by running gawp.
Why?
To provide a super simple way for web developers to add live reloading to their projects, on a per-project basis, without having to modify any of the server code.
Other packages annoyed me because I didn't like:
- Unnecessary dependencies incurring overhead (I have plans to prune the dependencies even further)
- Learning esoteric syntax
- Having to manipulate the server code for trivialities like changing monitor target directories
I just wanted a simple, centralised way to monitor and reload multiple projects concurrently, with possiblities to extend functionality later on.
Useage
Useage is simple - all you have to do is navigate to http://localhost:3000, which will open the gawp monitor panel:
http://localhost:3000 (gawp monitor)
For each gawper you specify its name, and the directory that you want to watch for changes on (generally the root directory for the static assets of a project).
The admin panel should be pretty straightforward, but here are a few tips just in case:
- There will always be at least one gawper generated by the server, the "default" gawper (whose monitored path is the
publicfolder in thegawppackage's root directory). It can in essence never be deleted; but it can be overridden by one of your own. - "Deleting" gawpers from the admin panel only prepares them for deletion - you have to hit the commit button in the left pane to commit and save the changes to the
gawp.jsonconfig file. - Referring to the above, hitting the revert all button will reenable all gawpers scheduled for deletion, essentially aborting the process.
- Additionally any gawpers that have an empty "name" field will be scheduled for deletion automatically - so name them if you don't want to lose them!
- Duplicate gawpers (gawpers with the same name) will be deleted top to bottom, meaning the last duplicate gawper in the list will remain.
Then you just have to reference one of your gawpers in the HTML you want to reload, using a <script> tag with the following signature (making sure the data-gawper attribute matches one of your gawper's names):
index.html (excerpt from <head>)
<script src="http://localhost:3000/gawp" data-gawper="default"></script>
Notes
If you're that way inclined, feel free to add/remove gawpers manually by editing the gawp.json file in the root of the package directory - JUST BE SURE TO ESCAPE BACKSLASHES, OR REPLACE THEM WITH FORWARD SLASHES, OR IT'LL GO BANG.
gawp.json (example setup)
{
"gawpers": {
"default": "C:\\Users\\jonathan.brooks\\Documents\\node\\gawp\\public",
"project 1": "path/to/project1/files"
}
}