2. Tutorials
  3. hapi — Specify a Different Handlebars Layout for a Specific View

hapi — Specify a Different Handlebars Layout for a Specific View

At the time of publishing this blog post, we recently pushed our new startpage and design enhancements for navigation and footer into production. With the release of these design changes, we added more complexity to our layout files. Before, we just had the default layout including navigation, footer and a placeholder for the changing content.

Now, we need to distinct between the startpage and other pages, because the startpage received a hero unit decorated by a purple gradient and a navigation with transparent background. On every other page, the navigation bar uses the purple gradient to provide a consistent layout.

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

The Idea Behind Different Layouts for Specific Views

Natan asked us how to define different layouts for specific views and by the time of his comment, we couldn’t provide a good solution. When working on our design updates for the homepage and blog, we ran into the same issue. We wanted to add a hero unit only on our startpage and keep a consistent layout throughout the rest of the website.

We approach this issue by passing a context property when rendering the views. We evaluate the context and include either the hero unit including the navigation or only the navigation into our template.

File Structure

We place all template files (ending on .html) into the views folder. The default layout gets its own layout folder and all other views are placed directly into the views directory or into partials. Since Handlebars helpers are closely related and used within the view templates, we place them into the helpers folder inside the views directory.

The server.js file contains the required code to bootstrap a basic hapi server to render the views.

The following overview outlines the the file structure:

views/  
    helpers/
        isContext.js
    partials/    
        default-navigation.html
        hero-navigation.html
        footer.html
    layout/
        default.html
    index.html
server.js

This guide defines a single helper called isContext to check whether the rendered view corresponds to a given context.

Hapi Server View Configuration

The code below starts a basic hapi server on port 3000. The view configuration sets a default layout, the path to partial views and helper files as well as the rendering engine.

Further, within the routes section, we define two routes: the index route available at / and a second route available at /anotherpage. The second one is just for illustration purposes to show the idea behind different layouts for specific views.

var hapi = require('hapi');

// Create hapi server instance
var server = new hapi.Server();

// add connection parameters
server.connection({  
    host: 'localhost',
    port: 3000
});

server.views({  
    engines: {
        html: require('handlebars')
    },
    path: 'views',
    layoutPath: 'views/layout',
    layout: 'default',
    partialsPath: 'views/partials'
    helpersPath: 'views/helpers',
});

// here is the perfect place to add routes :)
var routes = [  
    {
        method: 'GET',
        path: '/',
        handler: function(request, reply) {
            // Render the view with the custom greeting
            var data = {
                title: 'This is Index!',
                message: 'Hello, World. You crazy handlebars layout',
                context: 'index'
            };

            return reply.view('index', data);
        }
    },
    {
        method: 'GET',
        path: '/other-page',
        handler: function(request, reply) {
            // Render another page than index
            var data = {
                title: 'Another page',
                context: 'anotherpage'
            };

            return reply.view('anotherpage', data);
        }
    }
];

// tell your server about the defined routes
server.route(routes);

// Start the server
server.start(function() {  
    // Log to the console the host and port info
    console.log('Server started at: ' + server.info.uri);
});

Note: keep an eye on the path definition. The example above uses a relative path to the helper folder instead of absolute an path. Starting the node server from another location than the root folder of this example project will result in wrong paths. Node offers options like __dirname and the path module to create more robust paths.

Context Helper

The basic idea to render a different layout for specific views with handlebars is to provide a context for your routes and check whether you’re in a given context. We’re going to create and use the isContext helper to verify the provided context. We define isContext as a block helper, which has the advantage to provide a fallback option in case the context doesn’t match the desired one.

Let’s look at the code for the isContext helper:

// Verify the given with desired context
// You need to pass data including the 'context' to the view
var _ = require('lodash')  
var isContext

isContext = function(option, viewdata) {  
  var currentContext = viewdata.data.root.context;

  if (!_.isString(currentContext)) {
    return viewdata.inverse(this);
  }

  if (_.isEqual(currentContext, option)) {
    return viewdata.fn(this);
  }

  return viewdata.inverse(this);
};

module.exports = isContext;

Within our server’s view definition, we pass a data object to the view for further evaluation within the helper. We need to extract the currentContext from the passed data object and verify it’s a string value.

If it’s string value, we check if the given context data is equal to the option value passed while calling the helper. If both values match, the helper returns successfully. If not, it will return to the fallback part.

Combine Helper and Default Layout

That’s the point to assemble the default layout from all the pieces. Our intention is to render a different layout for the startpage and also provide a consistent layout for every other view.

Use the isContext helper and pass the context name as an option value to the helper. The helper extracts the context value from the server’s view definition and checks whether it equals with the passed option value. In case they do, we include the partial hero-navigation view.

If the given context and option value don’t match, the block helper falls back into the else part and renders the included default-navigation.

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

    {{#isContext "index"}}
        {{> hero-navigation}}
    {{else}}
        {{> default-navigation}}
    {{/isContext}}

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

    {{> footer}}

</body>  
</html>

That’s the solution. We decide whether the context is index or not and include the hero-navigation or the default-navigation. Afterwards, the actual view content will replace the {{{content}}} keyword. Finally, we include the footer’s partial view, because it’s the identical view on every page.

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