Using Harp for Web Development

While meandering around the web and perusing for JavaScript and AngularJS guides and tutorials, I stumbled upon a brilliant tool that has served as my local development web server and more. It’s called Harp, and per the instructions on its webpage, it’s installed through npm.

Harp describes itself as a “new kind of static web server that has built-in preprocessing”. At the most basic level, it enables me to quickly start a web server locally on my laptop (on any port) and have it serve the files from any directory structure of my choosing. By simply entering “harp server” from the command line while in directory I wish to be served, I can then point my browser to http://localhost:9000 to render the site using the HTML, CSS, and JavaScript in that directory tree. This means if you’re developing a basic webpage in HTML and CSS, or building a more complicated web app using JavaScript and AngularJS, Harp serves it all cleanly.

If you’re a fan of Bootstrap like me, you know that Bootstrap is actually developed using LESS, and is then compiled down to CSS. If you want to make changes to Bootstrap, it’s easiest to tweak the pre-compiled LESS files so your changes are propagated correctly into the resulting CSS. Harp is quite intelligent, and will automatically render LESS files into CSS on the fly. This means that while running Harp as a web server, your HTML pages can link in Bootstrap’s LESS files as CSS without having to manually compile the LESS files; Harp handles it. Check out the video tutorial (especially around 6:53) to see how Harp works with Bootstrap. Again, it’s absolutely brilliant, and a big timesaver when you want to customize the LESS variables for Bootstrap for your particular site.