Introduction to Handlebars Components

An overview of how Handlebars Components work in Aurora

Handlebars is a templating language used to generate HTML or other text formats from a template and an input object that contains expressions. These expressions get converted to values from an input object when the template runs.

Custom components written in either HTML or Handlebars.js language share the same components directory in the Git Repository. All the resources for these types of custom components live under this directory in the Git Repository.

While you can add HTML components via the Page Templates area in the Aurora Designer, you must commit and push the Handlebars components directly to the Git Repository from a Developer's component or a GraphQL mutation query API to create the component.

In this section, you will learn how to:

• Create a Handlebars component
• Add additional files to a Handlebars component
• Use Helpers and Context Objects in your Handlebars templates

As an example that runs throughout this Handlebars section, we will create a custom Handlebars component named TopMembers which will execute a GraphQL query to return the list of the community members who have given the most kudos, followed by the most posted messages. We will describe how you can add different parts to this component in the linked sections.

Learn more about working with Handlebars:

• Create a Handlebars component using GraphQL
• Create a Handlebars component manually
• Style your custom Handlebars component
• Add Text Properties for a Custom Handlebars component
• Add GraphQL queries and fragments for a custom handlebars component
• Add Miscellaneous Assets for a custom Handlebars component
• Handlebars Helpers and Context Objects
• Add Handlebars Components to a Quilt

Ways to create your component

You can create custom component resources in two ways:

• GraphQL: The GraphQL mutation option automatically checks and commits the component into a branch of the git repository where the community is set for the default branch. For the stage sites, this will be the stage-main branch.
• Manual: In the manual option, you must clone the Git repository, make changes to your component files in the Git repository, and then commit and push the component files to your development branch you are working.