In this part 2, we will define routes while incorporating Handlebars.

Installing Handlebars

Install express-handlebars with the command
```
 npm install express-handlebars
```

Require express-handlebars in index.js

 ...
 const app = express()
 const handlebars = require('express-handlebars')
 ...

Set the template engine in express

use .hbs file extension instead of .handlebars
default layout name as app

add helper functions for displaying full routes and env variable

  ...
  app.engine(
      '.hbs',
      handlebars.engine({
          // use hbs instead of handlebars extension
          extname: '.hbs',
          // default layout name
          defaultLayout: 'app',
          // simple template functions
          helpers: {
              // return the full route path
              route(path) {
                  return process.env.APP_URL + ':' + process.env.APP_PORT + path
              },
              // returns the env variable value
              config(name) {
                  return process.env[name]
              },
          },
      })
  )
  app.set('view engine', '.hbs')
  // use views folder
  app.set('views', __dirname + '/views')
  // static folder
  app.use(express.static('public'))
  ...

Create Views

Add APP_URL to .env file
```
 APP_URL=http://localhost
```

Create the main layout app.hbs in views/layouts

route helper function is used here to get the full path of the favicon

config helper function is used to get the env variable APP_NAME

  <html lang="en"><head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="icon" type="image/png" href="{{route  '/favicon.png' }}" />
      <title>{{config 'APP_NAME' }}</title>
      <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100">
      {{{ body }}}
  </body>
  </html>

Add a favicon in the public folder named favicon.png

Create the homepage content index.hbs in views folder

 <div class="min-h-screen flex flex-col">
     <div class="min-h-screen flex justify-center flex-wrap content-center">
         <div class="bg-gray-100 rounded-md w-10/12 md:w-1/2 lg:w-4/12 flex flex-col shadow">
             <div class="w-full p-8 flex flex-wrap content-center bg-white">
                 <div class="flex w-full justify-center">
                     <a href="{{route '/' }}">Homepage</a>
                 </div>
             </div>
         </div>
     </div>
 </div>

Router

DELETE the following code since we will be adding controller and router files in index.js

 ...
 const { ServerError } = require('./exceptions/ServerError')
 ...
 app.get('/', async (req, res, next) => {
     // res.send('Hello World!')
     try {
         // res.send('hello')
         throw new ServerError()
     } catch (error) {
         return next(error)
     }
 })

Create index.js in routes folder

 const router = require('express').Router()

 // home page route
 router.get('/', async (req, res) => {
     // this will render the index.hbs with the default app.hbs layout
     return res.render('index')

     // to switch the layout file called main.hbs (make sure it is created in views/layouts)
     /**
     return res.render('index', {
         layout: 'main',
     })
     */
 })

 module.exports = router

Now to make sure the app knows to use the routes/index.js

 ...
 app.use('/', routes)

 app.use(errorHandler.logger)
 ...

Create a Basic Framework with Express (Part 2)

Table of contents

Installing Handlebars

Create Views

Router

Subscribe to my newsletter

Bryan

Bryan