Bryan

Posted on May 1, 2023 • Originally published at devlogbook.com

Create a Basic Framework with Express (Part 2)

#node #handlebars #express

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)
...

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

DEV Community

Create a Basic Framework with Express (Part 2)

Installing Handlebars

Create Views

Router

Speedy emails, satisfied customers

Top comments (0)

A Workflow Copilot. Tailored to You.

Read next

Understanding RabbitMQ and Implementing Real-Time Notifications with Firebase and Socket.IO

What is Node JS?

From Employee to Founder: My Journey to Reinvent the Programming Industry

Tame the Chaos: Introducing Homeostasis JS for Structuring Your JavaScript Projects