Express.js + Bootstrap : Web Application Development Tutorial

In the last few posts we saw about created REST API, Authenticating with Twitter using Express.js. In this post lets see how we can create Web Applications by making use of Bootstrap CSS Framework with Express.js. If you are interested in learning Bootstrap framework, please read our extensive tutorials on bootstrap CSS framework. Also read this tutorial to setup the bootstrap environment in your local system.

Express is a leading web application framework for developing web application using the Node.js packages. It is easy to install using npm and get started with simple applications.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

This tutorial is a simple step-by-step guide for developing a web application using the Express.js and Bootstrap as the UI framework.

Bootstrap vs Foundation

Web Application Development with Express.js + Bootstrap

Serving Static files from Express.js

Book Reference : Web Development with Node and Express

Lets look at how we can serve static files i.e your CSS, Javascript and Image files from Express.js server. Express provides a special middleware express.static for this. We pass the root directory containing the static files to the express.static middleware. We can also bind an URL to this root directory (Also Read : Serving static files in Express). The below code shows this integrations:

var express = require('express');

//NPM Module to integrate Handlerbars UI template engine with Express
var exphbs  = require('express-handlebars');

var app = express();

//Declaring Express to use Handlerbars template engine with main.handlebars as
//the default layout
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

//Defining middleware to serve static files
app.use('/static', express.static('public'));

The static files i.e CSS, Javascript and Image files would be placed under the public folder.

Lets look at creating some view templates.

Layout Template using Bootstrap

Generally there will be a layout template or a base template that defines the headers, footers, CSS linking, Javascript linking and this layout/base template is reused by all other view templates OR in other words the base template includes the output from all other view templates.

As we would be using Bootstrap, you would have to download Bootstrap related CSS, Javascript, Images and other static files. You can download it from here.

The below is our directory structure for this example:

|--express_bootstrap.js
|--public
  |--css
  |--fonts
  |--js
|--views
  |--home.handlebars
  |--layouts
    |--main.handlebars

The contents of the public folder above are the contents from the downloaded bootstrap files.

The code for main.handlebars is given below. Please read our previous article about twitter login which explains how to use the handlebars template engine.:

<!-- Filename: main.handlebars -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/static/css/bootstrap.css" media="screen" charset="utf-8">
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>
    <div class="container">
      {{{body}}}
    </div>
    <script src="/static/js/jquery.js" charset="utf-8"></script>
    <script src="/static/js/bootstrap.js" charset="utf-8"></script>
</body>
</html>

You can see above how the CSS and Javascript files from the Bootstrap are configured above. Also observe the URL of the static files is starting with /static, this is how we have defined in our express.js middleware.

Creating one of the view templates using Bootstrap

Now we need to create one view template which will be used by our Node.js application. The template name is home.handlebars and below is the code for it:

<div class="row">
  <div class="col-md-12">
    <h1>Home</h1>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <p>This is Column 1</p>
  </div>
  <div class="col-md-4">
    <p>
      This is Column 2
    </p>
  </div>
  <div class="col-md-4">
    <p>
      This is Column 3
    </p>
  </div>
</div>

You can see above that I am making use of CSS Classes from Bootstrap.

Express.js Server

Now let us see how we can write the express.js code to render the above created template home.handlebars, then configure express.js middleware to serve static files in our public folder.

//Filename: express_bootstrap.js
var express = require('express');

//NPM Module to integrate Handlerbars UI template engine with Express
var exphbs  = require('express-handlebars');

var app = express();

//Declaring Express to use Handlerbars template engine with main.handlebars as
//the default layout
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

//Defining middleware to serve static files
app.use('/static', express.static('public'));

app.get("/home", function(req, res){
  res.render("home")
});

app.listen(3000, function(){
  console.log('Server up: http://localhost:3000');
});

Running the above server using the command node express_bootstrap.js spawns server on port 3000. Navigating to http://localhost:3000/home shows up a web page something like below:

Summary

This tutorial helps you to understand the basic concepts on building a simple web application using Express.js and Bootstrap frameworks. Note that this may not help you to build a large scale projects, but this is the fundamental building blocks to learn about ExpressJS framework and Bootstrap integration. If you are looking for how to integrate Express.js (ExpressJS) and Bootstrap, then this tutorial would help you. If you have any questions, please write it in the comments section.

Book Reference : Web Development with Node and Express