Build a simple blog with Node.js, Express, MongoDB (Part 2)

On home page, I want to display the basic html page as the screenshot bellow

from the HTML:
<!DOCTYPE html>
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item" href="#">Home</a>
          <a class="blog-nav-item" href="#">About</a>
          <a class="blog-nav-item" href="#">Contact</a>
    <div class="container">
      <div class="blog-header">
        <h1 class="blog-title">Home</h1>
        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
      <div class="row">
        <div class="col-sm-8 blog-main">
          <div class="blog-post">
            <h2 class="blog-post-title"><a href="">Lorem ipsum dolor sit amet</a></h2>
            <p>Praesent scelerisque nibh mattis dui consectetur elementum. Sed porttitor mi sed fringilla commodo. Aliquam erat volutpat. Quisque nec mauris odio.</p>
          <div class="blog-post">
            <h2 class="blog-post-title"><a href="">Aenean feugiat id dui nec sagittis</a></h2>
            <p>Praesent ut neque sed lorem suscipit bibendum. Curabitur at scelerisque augue. Integer sagittis, lacus sit amet semper euismod, turpis lectus mattis magna, sit amet scelerisque orci turpis in tellus</p>
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module">
            <ol class="list-unstyled">
              <li><a href="#">March 2017</a></li>
              <li><a href="#">February 2017</a></li>
              <li><a href="#">January 2017</a></li>
              <li><a href="#">December 2016</a></li>
              <li><a href="#">November 2016</a></li>
              <li><a href="#">October 2016</a></li>
              <li><a href="#">September 2016</a></li>
              <li><a href="#">August 2016</a></li>
              <li><a href="#">July 2016</a></li>
              <li><a href="#">June 2016</a></li>
              <li><a href="#">May 2016</a></li>
              <li><a href="#">April 2016</a></li>
    <footer class="blog-footer">
      <p>Copyright &copy; 2017.</p>

How we do?
Copy all and paste as string inside "res.send()"? It's terrible!
Let's use Handlebars.


Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates.
Read more is the Express.js view engine for handlebars.js

To install hbs, open the terminal, then run the following command:
$ npm install hbs --save

Add two lines to your code:
const hbs = require('hbs');
app.set('view engine', 'hbs');

Then create "views/home.hbs" file, put all HTML code above to this.
Change res.send() to:

Navigate to http://localhost:3000, it works as expected.


Partials allow you to easily organize and reuse your view code in an application (some blocks appear in more than one page).
  1. Header
  2. Archives
  3. Footer

Create "views/partials/header.hbs", "views/partials/archives.hbs", and "views/partials/footer.hbs" then cut the corresponding lines of code to these.

hbs.registerPartials(__dirname + '/views/partials');
to server.js

Update home.hbs, use {{> partialfilename}} to include.

Navigate to http://localhost:3000, it works as expected.

Rendering templates with data

Inside home.hbs, we will loop:
<div class="blog-post">
  <h2 class="blog-post-title"><a href="[URL]">[TITLE]</a></h2>

with the data from server.js

We will get items from the database later, now we get from dummy array.

Modify home.hbs, loop the items variable:

Navigate to http://localhost:3000, it works as expected.

Note: instead of
res.render('home.hbs', {
  items: items

you should write:
res.render('home.hbs', {

Part 3:
See you then!

1 comment:

  1. Really cool post, highly informative and professionally written and I am glad to be a visitor of this perfect blog, thank you for this rare info!

    web designing course in chennai