By admin on December 16th, 2015 in Updates
We’re getting closer to the launch of my new book Bootstrap Site Blueprints 2! In the coming weeks the book will be available in print and eBook format in a number of locations. To tide you over, I’m releasing a portion of the first chapter today on my blog. This chapter explains how to setup a development environment for Bootstrap website projects. If you have any questions, feel free to leave a comment at the bottom. Please keep in mind the book is still in final edits so the content may still change a little bit.
I won’t lie. Bootstrap theming can be really challenging. There is a large library of components that take some time to understand, and learning the best ways to customize them also takes time. But what if there was an easier way? I’m happy to say that I’ve designed a workflow using some modern frontend development tools that make it much easier to work with Bootstrap. The problem with frontend languages such as HTML and CSS is that they lack some core programming features, such as variables and includes. Thanks to tools such as Less for CSS and Harp.js for templating, these missing features are now available for building static websites.
The title says it all, and it is taken from the official harpjs.com website. Harp 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:
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.
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:
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:
Great! Now we can move on to installing Harp.
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.
For the rest of this chapter, I’m going to teach you how to set up a Bootstrap boilerplate project in Harp. Moving forward, this boilerplate will be the basis for all the projects in the book. One of the great things about Harp is that you can simply copy and paste a project to create a new instance of it on your local machine. There are also some other commands that you can run to generate project scaffolding, and I welcome you to check them out at harpjs.com/docs/. However, for this book, we aren’t going to take any shortcuts, and I’m going to show you how to manually set up a project. The best practice is to do it the hard way first so that you learn how it works. This will save you a headache down the road if you are troubleshooting a problem. The first thing you should do is navigate to a directory on your computer where you want to store your project. In the directory you created the following files and sub directories. For the time being, just leave the .json and .ejs files blank. We’ll fill them in a little later. Take a look at the following image to see how your project directory should look.
This is the root of our project, and here we’ll find everything at a high level:
/css: This directory will contain all our custom CSS and the Bootstrap framework CSS files.
/fonts: This directory will be for holding any web fonts or icon web fonts. The directory isn’t totally necessary, but I always include Font Awesome with all my projects so that I have an icon library to pull from.
/img: This directory will hold all the images for the project. For the boilerplate, we won’t actually need any images, but we’re setting this up for future projects too.
/partial: This directory will hold the pieces of code that we want to reuse in our templates, such as our header and footer.
_data.json: This is the file in which we will define any metadata that we want to use in our template. An example of this could be the page title for each web page.
_harp.json: This is a file for setting global properties, such as the title of the website, which is used on all pages.
_layout.ejs: This file is the scaffolding for our page. It includes the
index.ejs: This file holds the actual code for our boilerplate home page. This is the body or content of the page minus the wrapping template pieces that are held in _layout.ejs.