Skip to main content

Handlebars integration with Yeoman’s webapp-generator

I was looking for an instruction on how to add Handlebars to my application based on Yeoman’s webapp-generator. There is an instruction on the old wiki on GitHub, but it’s out-of-date. For this exercise I’ve been using Yeoman 1.1.2 and the 0.47 version of the webapp-generator.

First off, go ahead with step 1 and 2 (but obviously using the latest versions).

There’s no need to load the "grunt-contrib-handlebars" in your Gruntfile.js (step 3), as "require('load-grunt-tasks')(grunt);" is used to load all referenced tasks.

I did some changes to the file structure in step 4, but I guess that’s a matter of taste? One thing to note is the change from “temp” to “.tmp” as this is the temporary directory name being used in other places:

handlebars: {
  compile: {
    files: {
      '.tmp/scripts/compiled-templates.js': [
        '<%= yeoman.app %>/templates/**/*.hbs'
      ]
    },
    options: {
      namespace: 'MyApp.Templates',
      wrapped: true,
      processName: function(filename) {
        // funky name processing here
        return filename
                .replace(/^app/, '')
                .replace(/\.hbs$/, '');
      }
    }
  }
}

The watch task needs some additions to it, as well (step 5). Note the addition on watching .js-files in livereload:

handlebars: {
    files: ['<%= yeoman.app %>/templates/*.hbs'],
    tasks: ['handlebars']
},
livereload: {
    options: {
        livereload: '<%= connect.options.livereload %>'
    },
    files: [
        '<%= yeoman.app %>/{,*/}*.html',
        '.tmp/styles/{,*/}*.css',
        '.tmp/scripts/{,*/}*.js',
        '<%= yeoman.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
    ]
}

Step 6 handles the configuration of Handlebars tasks being run during build, test and serve:
// Run some tasks in parallel to speed up build process
concurrent: {
    server: [
        'compass:server',
        'copy:styles',
        'handlebars'
    ],
    test: [
        'copy:styles',
        'handlebars'
    ],
    dist: [
        'compass',
        'copy:styles',
        'handlebars',
        'imagemin',
        'svgmin'
    ]
}

Don't forget to get the actual Handlebars package using "bower install handlebars" (step 7).

In step 8, as I changed the file structure - just add
<script src="scripts/compiled-templates.js"></script>
and you're done!

/Mattias

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thanks, this was very helpful.

    FYI: the old wiki link is now here:

    https://github.com/yeoman/yeoman.io/blob/master/app/wiki-archives/Handlebars-integration.md

    ReplyDelete

Post a Comment

Popular posts from this blog

GWT and Spring Security

Update! - Based on the post below, and my other post regarding Spring Security and OpenID, I have added Open-ID support to the sample application below. For those interested, here's the write-up of changes. I've spent quite some time digging into ways of integrating GWT and Spring Security. It all started by reading the following post in the GWT Forum - Best practices/ideas for GWT with Spring Security (or equivalent) , and then checking out this blog - GWT and Spring Security . To make matters worse, I started reading Security for GWT Applications and specifically about the "Cross-Site Request Forging"-attacks. Now, what could I do about it? Well, starting by setting up my own project (Maven-based) with all updated dependencies (GWT 2.0.3 etc) and started reading the Spring Security Reference Documentation (puh!). Instead of See Wah Cheng's approach of implementing a custom authentication service, I decided to rely on standard namespace configuration

GWT and Open-ID using Spring Security

In this post I'll combine the GWT and Spring Security integration from http://technowobble.blogspot.com/2010/05/gwt-and-spring-security.html and the Open-ID using Spring Security from http://technowobble.blogspot.com/2010/06/using-spring-securitys-openid.html . I'm assuming you've read them before reading further... :) I was also inspired by http://www.sociallipstick.com/?p=86 and http://code.google.com/p/dyuproject/wiki/OpenidLoginWithoutLeavingPage to get this working with a pop-up as my sample application is based on GWT - hence, I don't want to direct the user to another page and loose the application state etc. I'm also showing how to exchange Open-ID attributes with e.g. Google. As with the previous blogposts, the sample application is runnable on Google App Engine. With no further ado, this is basically what is needed to add Open-ID support to my previous sample application: From my second post, add Openid4javaFetcher, MyHttpCacheProvider and OpenI
A quick note on something that's been bugging me while using SpringSource STS with the GWT-plugin on my MacBook Pro... Sometimes, when shutting down the internal devmode server I get an error dialog saying it wasn't able to shut down the process fully (even though it looks shut down in the console window). When starting it again, it reports port 9997 to be in use already - and consequently fails to start up again. I haven't found a way to find the process within SpringSource STS, even though there are probably several ways of doing it (which I do not know about). Anyhow - I solved it using the " lsof " package (List Open Files). To find the PID of the process using port 9997, type "lsof -i :9997" in a Terminal window. A simple "kill -9 &ltpid&gt" will take care of the rest. I'm not sure if this happens on other platforms etc, but at least, now you know how to handle it if it hits you!