2. Tutorials
  3. hapi — How to Create Jade-Like Layout Blocks in Handlebars

hapi — How to Create Jade-Like Layout Blocks in Handlebars

Handlebars is a great templating language with partial view support. It’s highly extensible and adjustable with custom helper functions to add individual features if required.

If you’ve ever worked with the Jade templating engine, you probably know and used the block feature which adds a placeholder into your layout which can be replaced with custom content from child views. Handlebars lacks support for this feature, even though it’s a nice and easy way to add stylesheets and scripts within subviews if necessary.

This guide shows you how to add the Jade-like block functionality to handlebars and how to use it within your layouts.

hapi Series Overview

  1. Get Your Server Up and Running
  2. v17 Upgrade Guide (Your Move to async/await)
  3. Become a Better Developer in 2018
  4. Become a Better Developer in 2017
  1. What You’ll Build
  2. Prepare Your Project: Stack & Structure
  3. Environment Variables and Storing Secrets
  4. Set Up MongoDB and Connect With Mongoose
  5. Sending Emails in Node.js
  6. Load the User’s Profile Picture From Gravatar Using Virtuals in Mongoose
  7. Implement a User Profile Editing Screen
  8. Generate a Username in Mongoose Middleware
  9. Displaying Seasons and Episodes for TV Shows with Mongoose Relationship Population
  10. Implementing Pagination for Movies
  11. Implement a Watchlist
  12. Create a Full Text Search with MongoDB
  1. Create a REST API with JSON Endpoints
  2. Update Mongoose Models for JSON Responses
  3. API Pagination for TV Shows
  4. Customize API Endpoints with Query Parameters
  5. Always Throw and Handle API Validation Errors
  6. Advanced API Validation With Custom Errors
  7. Create an API Documentation with Swagger
  8. Customize Your Swagger API Documentation URL
  9. Describe Endpoint Details in Your Swagger API Documentation
  10. 10 Tips on API Testing With Postman
  11. JWT Authentication in Swagger API Documentation
  12. API Versioning with Request Headers
  1. IP-Based Rate Limits (Part 1 of 7)
  2. Rate Limits for Routes (Part 2 of 7)
  3. Dynamic Rate Limits (Part 3 of 7)
  4. Render a “Rate Limit Exceeded” View (Part 4 of 7)
  5. Show “Rate Limit Exceeded” Error on Login (Part 5 of 7)
  6. Disable Rate Limiting (Part 6 of 7)
  7. Rate Limiter Refactoring & Cleanup (Part 7 of 7)
  1. API Login With Username and Password to Generate a JWT
  2. JWT Authentication and Private API Endpoints
  3. Refresh Tokens With JWT Authentication
  4. Create a JWT Utility
  5. JWT Refresh Token for Multiple Devices
  6. Check Refresh Token in Authentication Strategy
  7. Rate Limit Your Refresh Token API Endpoint
  8. How to Revoke a JWT
  9. Invalidate JWTs With Blacklists
  10. JWT Logout (Part 1/2)
  11. JWT “Immediate” Logout (Part 2/2)
  12. A Better Place to Invalidate Tokens
  13. How to Switch the JWT Signing Algorithm
  14. Roll Your Own Refresh Token Authentication Scheme
  15. JWT Claims 101
  16. Use JWT With Asymmetric Signatures (RS256 & Co.)
  17. Encrypt the JWT Payload (The Simple Way)
  18. Increase JWT Security Beyond the Signature
  19. Unsigned JSON Web Tokens (Unsecured JWS)
  20. JWK and JWKS Overview
  21. Provide a JWKS API Endpoint
  22. Create a JWK from a Shared Secret
  23. JWT Verification via JWKS API Endpoint
  24. What is JOSE in JWT
  25. Encrypt a JWT (the JWE Way)
  26. Authenticate Encrypted JWTs (JWE)
  27. Encrypted and Signed JWT (Nested JWT)
  28. Bringing Back JWT Decoding and Authentication
  29. Bringing Back JWT Claims in the JWT Payload
  1. How to Run Separate Frontend and Backend Servers Within a Single Project
  2. How to Use Server Labels
  3. How to Correctly Stop Your Server and Close Existing Connections
  1. Basic Authentication With Username and Password
  2. Authentication and Remember Me Using Cookies
  3. How to Set a Default Authentication Strategy
  4. Define Multiple Authentication Strategies for a Route
  5. Restrict User Access With Scopes
  6. Show „Insufficient Scope“ View for Routes With Restricted Access
  7. Access Restriction With Dynamic and Advanced Scopes
  8. hapi - How to Fix „unknown authentication strategy“
  9. Authenticate with GitHub And Remember the Login
  10. Authenticate with GitLab And Remember the User
  11. How to Combine Bell With Another Authentication Strategy
  12. Custom OAuth Bell Strategy to Connect With any Server
  13. Redirect to Previous Page After Login
  14. How to Implement a Complete Sign Up Flow With Email and Password
  15. How to Implement a Complete Login Flow
  16. Implement a Password-Reset Flow
  1. Extend Your Server Functionality With Plugins
  2. Create Your Own Custom Plugin
  3. How to Register Plugins for a Selected Server Instance
  4. hapi Plugin for Client Geo Location (by Future Studio 🚀)
  5. Increase Development Speed With Errors in the Browser or as JSON Response
  1. Route Handling and Drive Traffic to Your Server
  2. How to Serve Static Files (Images, JS, CSS, etc.)
  3. How to Use Query Parameters
  4. Optional Path Parameters
  5. Multi-Segment/Wildcard Path Parameters
  6. Ignore Trailing Slashes on Route Paths
  7. How to Fix “Unsupported Media Type”
  1. How to Access and Handle Request Payload
  2. Access Request Headers
  3. How to Manage Cookies and HTTP States Across Requests
  4. Detect and Get the Client IP Address
  5. How to Upload Files
  6. Quick Access to Logged In User in Route Handlers
  7. How to Fix “handler method did not return a value, a promise, or throw an error”
  8. How to Fix “X must return an error, a takeover response, or a continue signal”
  1. How to Reply a JSON Response
  2. How to Set Response Status Code
  3. How to Handle 404 Responses for Missing Routes
  1. Query Parameter Validation With Joi
  2. Path Parameter Validation With Joi
  3. Request Payload Validation With Joi
  4. Validate Query and Path Parameters, Payload and Headers All at Once on Your Routes
  5. Validate Request Headers With Joi
  6. Reply Custom View for Failed Validations
  7. Handle Failed Validations and Show Errors Details at Inputs
  8. How to Fix AssertionError, Cannot validate HEAD or GET requests
  1. Add CSRF Protection on Forms and API Endpoints
  1. Report Errors to Sentry
  2. Don’t Report Errors to Sentry in Development Mode
  3. Logging Fundamentals
  4. Log to Console With Good
  5. Log to File With Good
  1. Getting Started With Testing Using Lab and Code
  2. Run Tests with Assertions using Code
  3. Test Route Handlers by Injecting Requests
  4. Inject Request Payload, Headers and Parameters While Testing Route Handlers
  1. Zero-Downtime Deployments Using PM2

What’s the Problem?

When using templates within handlebars, you can’t define custom content placeholders which can be replaced with content defined within subviews. This functionality makes sense if you want to add individual stylesheets or scripts from within child views. Specifically, we only need the script to load Disqus comments within the post detail view. We don’t need the script to be loaded on every page and only want it to be added to the rendered HTML when necessary (when reading a specific post).

Solution

To be honest, we were looking for a solution for quite some time. Some days ago, when we finally understood the actual problem, we indeed found a solution. We wanted to implement and started a last research if there is something out there to be reused. And finally, we found the functionality already created by Roman Shtylman within his repository: handlebars-extend-block.

What this small script of 22 lines does: it adds two helper functions to handlebars which extend the template language by two functions block and extend. The block function is an array which can be extended by the extend function.

Hapi View Configuration

The hapi framework isn’t required to add the block functionality to handlebars. We use hapi as our framework of choice and that’s why we use the following code snippet to illustrate the addition of the handlebars-extend-block plugin to the default handlebars package.

const Hapi = require('hapi')  
const Handlebars = require('handlebars');  
const ExtendedHbs = require('handlebars-extend-block');

// Create hapi server instance
const server = new Hapi.Server({  
    host: 'localhost',
    port: 3000
})

async function liftOff() {  
  await server.register({
    plugin: require('vision')  // add template rendering support in hapi
  })

  server.views({
    engines: {
      html: ExtendedHbs(Handlebars)
    },
    path: 'views',
    layoutPath: 'views/layout',
    layout: 'default',
    partialsPath: 'views/partials'
  })
}

liftOff()

As you can see in the snippet above, we pass the handlebars object into the extend() function. The extend() function returns the decorated handlebars object which can be passed into hapi as the view rendering language.

Layout Templates

Let’s look at some precise template layouts and illustrate the new functionality with the help of an example. We’re using a default layout with two defined blocks: css and js. The {{{content}}} placeholder is used within the default layout to put the rendered HTML at its place.

The following snippet shows the default layout:

Default Layout

<!DOCTYPE html>  
<html>  
<head>  
    {{! Document Settings }}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Extend Handlebars Layouts</title>

    <link rel="stylesheet" href="/assets/css/screen.css" />
    {{{block "css"}}}
</head>  
<body>

    {{! Everything else gets inserted here }}
    {{{content}}}

    <script src="/assets/js/jquery.min.js"></script>
    {{{block "js"}}}

</body>  
</html>

The css and js blocks will be automatically replaced with the defined content from within subviews. Handlebars will render the block contents if you specified one.

Partial Layout The partial layout below extends the css as well as the js block. We’re adding our custom CSS stylesheet and an additionally javascript file. You already guessed it, this partial view is just used for illustration purposes …

{{!< layout/default}}
{{! The tag above means - insert everything within this file into the {{{content}}} of the default.html template }}

{{#extend "css"}}
<link rel="stylesheet" href="/assets/css/my-additional.css" />  
{{/extend}}

<h1>This is the title</h1>  
<p>Hello from partial view</p>

{{#extend "js"}}
<script src="/assets/js/my-personal-javascript.js"></script>  
{{/extend}}

Result

The rendered HTML will look like this. The defined blocks within the default layout will be replaced with the content from child views. If you don’t extend the blocks within the child views, handlebars will omit the specific block and leave it empty.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Extend Handlebars Layouts</title>

    <link rel="stylesheet" href="/assets/css/screen.css" />
    <link rel="stylesheet" href="/assets/css/my-additional.css" />
</head>  
<body>

    <h1>This is the title</h1>
    <p>Hello from partial view</p>

    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/my-personal-javascript.js"></script>

</body>  
</html>

Conclusion

As you saw within the examples above, the block helpers to manipulate the default layout from within subviews benefits when used correctly. You should add stylesheets and javascript files which is required on every page within the default layout. Extending specific views with additional functionality like comments is a great use case to use layout blocks and add required scripts or styling.

We hope this helps and if you run into issues when applying this guide to your project, please don’t hesitate to tweet us @futurestud_io or leave a comment.

Additional Resources

Marcus Pöhls

Marcus is a fullstack JS developer. He’s passionate about the hapi framework for Node.js and loves to build web apps and APIs. Creator of Futureflix and the “learn hapi” learning path.

Explore the Library

Find interesting tutorials and solutions for your problems.

Android

Node.js

Server

Miscellaneous