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

DEV Community

Create a Basic Framework with Express (Part 2)

Installing Handlebars

Create Views

Router

Top comments (0)

Read next

opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]

Building a Scalable URL Shortener with Node.js (Part 1/2)

Dockerize PERN-TypeScript App Using Prisma ORM With Docker Compose

Não use Prisma ORM antes de ler isso!