When using a local build toolchain to develop complex HTML5 apps, deploying a build subdirectory of your app repo with Git can be rather painful. On our deployments panel we suggest using git subtree for deploying build folders, but that’s really more of a hack and can lead to some problems, especially when working in team.

Fortunately, for users of Grunt there is a nice and easy solution for this problem now: the grunt-build-control task.

It makes it both easy to push subdirectories of a Git repository to a Git-based hosting service, like e.g. GitHub Pages and 5apps Deploy, as well as configure multiple deployment endpoints and even map different build folders and branches to those.

Getting started

First, make sure you’re using Grunt > 0.4.0 and Git > 1.8.

If you want to have a development and a production endpoint on 5apps Deploy, just create 2 different apps and name them accordingly. This is very useful in general, because it enables you to set deployment options according to the environment (e.g. don’t generate an appcache manifest for the development app).

Step 1: Make sure your build subdirectory is ignored by Git. If your build directory is called dist, your .gitignore should contain a line like this:

/dist

Step 2: Add grunt-build-control to your project:

npm install grunt-build-control --save-dev

Step 3: Load the plugin in your Gruntfile:

grunt.loadNpmTasks('grunt-build-control');

Step 4: Configure the task by adding its options to the Gruntfile (or wherever you keep Grunt task options):

grunt.initConfig({

  // Various Grunt tasks...

  buildcontrol: {
    options: {
      dir: 'dist',
      commit: true,
      push: true,
      message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
    },
    development: {
      options: {
        remote: 'git@5apps.com:basti_sharesome-dev.git',
        branch: 'master'
      }
    },
    production: {
      options: {
        remote: 'git@5apps.com:basti_sharesome.git',
        branch: 'master',
        tag: pkg.version
      }
    },
    local: {
      options: {
        remote: '../',
        branch: 'build'
      }
    }
  }
});

That’s it! Have a look at the project’s README for a list of all options and what they do.

Deploying your app

Now you can build and deploy your app like so:

grunt dist
grunt buildcontrol:development

Making it even more convenient

Right now we have to run these 2 commands all the time, and with no default for the endpoint (e.g. use development, unless we explicitly say it should go to production). So let’s create a little bash script that makes it even easier. Put this in a plain text file named deploy:

#!/bin/sh

grunt dist

if [ $1 ]; then
grunt buildcontrol:$1
else
grunt buildcontrol:development
fi

Then, use this command to make the file executable:

chmod +x deploy

Now, when you want to build and deploy to development, you can just run:

./deploy

And when you want to build and deploy to production (or any explicit endpoint for that matter), it’s a simple:

./deploy production

Win!

Bonus for Ember App Kit users

If you want to add grunt-build-control to an Ember App Kit project, here’s a commit where I did just that in one of my apps.

Happy deploying!

If you have any questions or feedback, write a comment below or shoot us a tweet!