2. Tutorials
  3. hapi — Create and Use Handlebars Partial Views

hapi — Create and Use Handlebars Partial Views

Within the previous post about hapi and handlebars, we show you how to create a dynamic layout template. Actually, this was just the surface of the functionality hapi provides with its handlebars integration. The view configuration for handlebars with hapi allows multiple options. This article shows you how to use the partialsPath option to add partial layouts into your app.

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

File Structure

We use the same code structure as we did within the previous post about the dynamic handlebars layout. This keeps us within the same context and allows references between the posts. The views folder contains any view files ending on .html even though the files are located within a subdirectory. Besides the views, we have a single file server.js which describes the minimum functionality required to make this example work properly.

The following overview outlines the the file structure:

views/  
    helpers/
    partials/
        header.html
        footer.html
    layout/
        default.html
    index.html
server.js

The default layout is located within the layout folder. Our partial views have their own directory called partials. The index.html is a normal view showing the user some funky text :)

Hapi Server View Configuration

As with dynamic layouts, we use the same server code for this example about partial views with hapi. The interesting part is the view configuration for the server. This time, we define the partialsPath property to let hapi know where to find partial views.

const Hapi = require('hapi')

// 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: require('handlebars')
    },
    path: 'views',
    layoutPath: 'views/layout',
    layout: 'default',
    partialsPath: 'views/partials'
    //helpersPath: 'views/helpers',
  });

  // create your routes
  server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
      // Render the view with the custom greeting
      const data = {
        title: 'This is Index!',
        message: 'Hello, World. You crazy handlebars layout'
      }

      return h.view('index', data);
    }
  })

  try {
    await server.start()
    // Log to the console the host and port info
    console.log('Server started at: ' + server.info.uri);
  } catch (err) {
    console.log(err)
    process.exit(1)
  }
}

liftOff()

The partialsPath property expects the root path to your partial layout files. Keep an eye on your path definition. Within this example, we use relative paths. It’s better to use the absolute path. Node provides different options like __dirname or the path module. Just make sure the server is able to find the directories, even though it’s not started from within the directory.

View Templates

To provide a comprehensive overview, we show the code for every layout template from the file structure. Additionally, we combine the default and partial layout files to “import” the contents from partial views into the defaut layout.

Default Layout Template

We defined this default layout template as the way to go for every view when rendering a web view with hapi. Hapi automatically uses this layout and includes the defined subview into it. The most important parts for this guide are the {{> header}} and {{> footer}} blocks. Both blocks are used to include the contents from each partial view into the default layout.

views/layout/default.html

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Your Title</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- import CSS or other 3rd pary libs -->
</head>  
<body>

    <div class="container">

        {{! Import the contents of header.html from partials}}
        {{> header}}

        {{! Every view gets inserted here }}
        {{{content}}}

    </div>

    {{! Import the contents of footer.html from partials}}
    {{> footer}}

</body>  
</html>

We’ll provide more information about the partial view import within the Partial Views section.

Index View Template

The index.html template is just a simple view and comprises placeholders for {{title}} and {{message}}. Our previous post explains the index view in more detail.

<h1>{{title}}</h1>  
<p>{{message}}</p>

Partial Views

Handlebars allows the definition of reusable views as shared templates. You can import partials into your view with handlebars {{> partialPath}} arrow bracket operator. The arrow bracket defines an import of a partial view and expects the path to the view file as parameter.

The default layout above imports two partial views: header and footer. You don’t need to specify the file ending when importing views into your layout. The following snippets show exemplary code for each template which gets imported while rendering the default layout.

views/partials/header.html

<header class="main-header">  
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/home">Home</a></li>
                    <li><a href="/blog">Blog</a></li>
                    <li><a href="/about">About</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

The header layout is just for illustration purposes. We took a basic Bootstrap navigation to include into the default view.

views/partials/footer.html

{{! The main JavaScript files }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
</script>

{{! Whatever you want to put into the footer :)}}

The footer template is the single jquery import. Expand the template as you wish and use more complex separation of layout and additional importS of javascript files.

Result

The resulting HTML template of the index page will look like this:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Your Title</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>  
<body>

    <div class="container">

        <header class="main-header">
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="/home">Home</a></li>
                            <li><a href="/blog">Blog</a></li>
                            <li><a href="/about">About</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <h1>This is Index!</h1>
        <p>Hello, World. You crazy handlebars layout</p>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

</body>  
</html>

The contents of header.html and footer.html partial views are imported into the default layout file. Additionally, the placeholders within the index.html are replaced with passed data from hapi route definition. Further, the rendered layout from index.html file replaces the {{{content}}} placeholder within the default layout template.

Things don’t work out? Please don’t hesitate to leave a comment below or shoot us a tweet @futurestud_io.

Additional Ressources

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