Using a Handlebars CDN Combination

Updated on December 9, 2022

What is Handlebars.js?

Handlebars is an open source, JavaScript-based templating engine. It allows you to separate the generation of HTML from the rest of your JS, giving you the ability to write cleaner code. Handlebars is largely based on Mustache, and in most cases, it's possible to swap out Mustache with Handlebars and continue working on your existing templates. A Handlebars template is HTML combined with Handlebars expressions, e.g. {{some content}} such as:

<div class="title">
    <h1>{{title}}</h1>
    <div class="content">
        {{content}}
    </div>
</div>

Handlebars.js can be downloaded and hosted on your origin server; however, it can also be referenced using a Handlebars CDN combination for faster and more reliable delivery. The following section outlines both methods for referencing Handlebars.js in your web project.

How to use a Handlebars CDN combination

If you already have an existing CDN account, you can quickly reference the Handlebars.js file using your CDN URL. Alternatively, for those who do not currently have a CDN account, there is the option to reference the file from a third-party CDN service which will deliver and cache the file on their network of POPs.

Option 1 - Using your own CDN account

For those who already have a CDN account, you can use it to help improve the delivery of the Handlebars.js file. KeyCDN provides you with two options to achieve this, either by using a Pull Zone or a Push Zone.

A Pull Zone automatically pulls the static content from your origin server and caches it at the visitor's nearest Point of Presence (POP) upon the first request. Therefore, upon subsequent requests, the static assets are delivered from the CDN edge server instead of the origin server. With this method, no URL configuration is necessary within your HTML. Simply integrate your site with one of the CDN integration options.

If you're using a Push Zone, simply upload the latest version of Handlebars.js via FTP(S) or rsync and reference it in your project using either your Zone URL (e.g. example-hexid.kxcdn.com/js/handlebars.min.js) or Zone Alias (e.g. cdn.example.com/js/handlebars.min.js)

Option 2 - Using an open source CDN

If you do not have a CDN account but would still like to use a Handlebars CDN combination, an open source CDN service such as cdnjs.com can be used. To reference cdnjs Handlebars use the following snippet (ensure that you first check for the latest version x.y.z).

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/x.y.z/handlebars.min.js"></script>

Benefits of a Handlebars CDN combination

A Handlebars CDN combination will help deliver your Handlebars.js file faster as there will be less distance to travel between the client and server. A CDN also helps improves redundancy and security for your static files and is beneficial for the SEO of your entire site. There also exist many other advantages to users who accelerate their Handlebars.js file and other static content with KeyCDN, such as:

Access to our growing network of POPs
HTTP/2 supported edge servers
RESTful API
Let's Encrypt free SSL certificates