How to use a handlebar template?

Question

I bought a theme expecting it to have HTML and Angular versions but all I see are HBS files. I am newbie to the grunt/express/npm the whole scenario and I'm lost on how to extract a possible html version from these files.

There is a Gruntfile.js and I tried running "grunt" on CLI but I get an error saying "unable to find local grunt file". Feels like it is some sort of Handlebar template.

Below is the file structure.

Answer 1

Handlebar is nothing rather than a template engine on top of Mustache, which means it's possible to see HTML as well as interpolation variables inside. that.

As an example

Handlebars templates look like regular HTML, with embedded handlebars expressions.

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

A handlebars expression is a {{, some contents, followed by a }}

You probably see more helpers such as {{#if}} or {{#each}} and etc, so make that easy to iterate or have other necessary logic in the template.

So, as you mentioned Angular, I assume angular is binding data with Handlebar as its template engine, Or alternatively, you may have Express app which uses Handlebar.

What you have to do is to extract HTML tags from handlebars template and just ignore {{...}} then replace your content appropriately with {{..}} instead.

It's possible to extract even with Grunt or other automation task runners like Gulp or Webpack. However, it may need more efforts and different plugins or specific code.

Remember, you need to also copy your CSS in order to see the same style for your HTML stylesheet.

Last but not least, There are other ways to extract or to get your template run, however, the simplest is to what I explained.

For more information read here

Regarding:

"unable to find local grunt file".

it's not as easy as one solution, there may be different problems. However, you will need to install (preferably) the latest grunt version:

npm install grunt --save-dev

that should work for yo as --save-dev will add grunt as a dev-dependency to your package.json. This makes it easy to reinstall dependencies.

Hope it works for you.

Answer 2

You can use this to convert those .hbs files to .js which you can include directly to your html I believe - https://github.com/yaymukund/grunt-ember-handlebars

grunt.initConfig({
  ember_handlebars: {
    all: {
        src: 'src/templates/**/*.hbs',
        dest: 'output/javascripts/templates.js'
    }
  }
});

Answer 3

Handlebars is semantic template engine which means your html is created as string. Handlebars is basically used to represent your data. for example,

JS

var context = {site : jsgyanblogspot.com };

Handlebars

<h3>{{site}}</h3>

At above, the part with h3 is handlebar, the expression {{site}} looks up the value in the current context and fetches the value jsgyanblogspot.com .

The handlebar part is converted to HTML through the compilation, In your case, you need to precompile the templates.

After precompiling, all template files would be converted to single js file(.hbs files => single.js).

Your single.js file contains the HTML. You need the respective npm modules for precompiling, just type npm install from your project directory agile , that installs the required npm modules.

If this still does not solve your problem, try to install grunt locally executing command sudo npm install grunt --save-dev from your project directory