Chapter 4. Building a static site with Node and Express

In chapter 3 you should have had an Express application running, set up in an MVC way, with Bootstrap included to help with building page layouts. Our next step is to build on this base, creating a static site that you can click through. This is a critical step in putting together any site or application. Even if you’ve been given a design or some wireframes to work from, there’s no substitute for rapidly creating a realistic prototype that you can use in the browser. Something always comes to light in terms of layout or usability that hadn’t been noticed before. From this static prototype, we’ll take the data out from the views and put it into the controllers. By the end of this chapter we’ll have intelligent views that can display data passed to them, and controllers passing hard-coded data to the views.

4.1. Defining the routes in Express

4.1.1. Different controller files for different collections

4.2. Building basic controllers

4.2.1. Setting up controllers

4.2.2. Testing the controllers and routes

4.3. Creating some views

4.3.1. A look at Bootstrap

4.3.2. Setting up the HTML framework with Jade templates and Bootstrap

4.3.3. Building a template

4.4. Adding the rest of the views

4.4.1. Details page

4.4.2. Adding Review page

4.4.3. The About page

4.5. Take the data out of the views and make them smarter

4.5.1. How to move data from the view to the controller

4.5.2. Dealing with complex, repeating data

4.5.3. Manipulating the data and view with code

4.5.4. Using includes and mixins to create reusable layout components

4.5.5. The finished homepage