Harp.js – the static web server with built-in preprocessing

The title says it all, and it is taken from the official is an open source project from some of the same people who brought us PhoneGap, and it is my tool of choice for any static website project I work on. Why is Harp so great? Here are just a few reasons:

• It includes automatic preprocessing of languages such as EJS, Jade, Markdown, CoffeeScript, Less, Sass, and Stylus
• Harp converts the aforementioned languages into vanilla HTML, CSS, and JavaScript and feeds it to the browser
• It allows powerful templating through the use of common layouts and partials or includes for PHP people
• It includes a lightweight web server that compiles your code in the background for quick and easy testing
• It passes in custom metadata through JSON to save your time
• It compiles all of your code into production-friendly files that you can deploy on your server.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Creating a development environment

Everything that I outlined earlier basically creates a development environment for your Bootstrap websites. The advantage of using a development environment is that you can use tools such as Harp to make your website development faster and easier. It provides you with a working copy on your local computer, and you can use that copy to develop your projects. When you're done, you can compile it into the production version and deploy it on the Internet. It's a good idea to get into the habit of creating a development environment because it's a better coding practice and makes it easier to maintain your project in the future. This is because the production code is totally separate from the source development files. Running a localhost server for testing also allows you to build new features without having to worry about negatively affecting your live production website.

Installing Node.js

The web server that is built into Harp runs on Node.js. Therefore, you will need to install Node on your computer before you can set up Harp. If you don't have Node already installed, head over to the following link to download the version you need:

http://nodejs.org/download/

Once you've downloaded and installed Node, you'll have to open and use the command line to test the installation. If you're on a Mac, I'd recommend that you use the terminal or an app such as iTerm to access the command line. If you're working on Windows, you can use Cygwin. Once you've opened up your command-line app, type in the following line:

$ node -v

If you have installed Node correctly, the number of the version you have installed should be printed on the terminal. You should see something like this:

$ v0.10.33

Great! Now we can move on to installing Harp.

Installing Harp.js

Actually, setting up Harp.js is really easy. If you have closed your terminal, open it again. Insert this command if you're on a Mac:

$ sudo npm install -g harp

If you're on Windows, use the following command:

$ npm install -g harp

After you execute this command, you should see a bunch of packages being installed in the terminal window. Once everything stops loading, Harp is installed. To verify that it has worked, enter the following in the terminal and hit Enter:

$ harp version

This should give you the version number, which means that Harp was successfully installed.

Since Less preprocessing is included with Harp, we don't need to install anything special to use Less. This is great news, because we don't need to rely on less.js or a standalone compiler app. Once we compile our Harp project and run the web server, any changes to Less files will be picked up automatically. For now, just celebrate, and we'll cover compiling Less in more detail a little later.