Github Admin Panel

PhoneGap Build Github Post Commit Hooks

I gave a presentation at PhoneGap Day EU 2012 in Amsterdam in September titled “Automating PhoneGap Build“. Essentially, the talk was about the cloud-based build service (now out of Beta, if you haven’t yet heard) and how developers can integrate it into their workflow.

As part of the talk, I was integrating an ANT build from within Eclipse / ColdFusion Builder to access, upload to and deploy from my PhoneGap Build account. I’m a BIG believer in reducing the need to exit your IDE wherever possible. If I can keep my workflow in one place as much as possible, I’m happy.

Now, these ANT tasks were using the awesome PhoneGap Build API (https://build.phonegap.com/docs/api) which I love. I also use Git repositories for all of my code and projects, and the ability to create or define a PG Build project directly from a Git repos is awesome.

Although the API contains a method to run a pull request from the repository (which will then rebuild the project for you), it’s still an extra step in the chain that need not necessarily be there.

Consider this:

  • commit your code to your Git repos
  • perform the pull request in PhoneGap Build (via API or logging into the UI)

Whilst these two tasks can be combined fairly easily using an ANT task or bash script / bat file, there is another way to automatically pull the latest code and rebuild directly after committing your code to Github.

Web Hooks

GitHub provides a lot of service hooks for use after a commit. I’ve written about them before and created a ColdFusion CFC wrapper to handle the data payload delivered in the POST request.

There are service hooks to tap into ticketing applications, sending commit notifications via Twitter and a range of other services.. one of the options (the first in the list, in fact) is a WebHook URL. This can be any remote URL of your choosing (ideally one you have access to).

You can access these from the Admin button in the main menu of your Github project:

Github Admin PanelSelect Service Hooks from the left navigation and click WebHook URLs. You can add as many custom URLs as you want to for each project, but in this case we’ll just use the one.

Github Web Hooks

So, how can we use this with PhoneGap Build?

Simple.

In the settings panel for your Git repository-powered PhoneGap application, you will see a button marked Pull latest.

PhoneGap Build Pull Request Button

The link associated with this button is something like the following: https://build.phonegap.com/apps/217582/push (where the application ID 217582 is specific to your PG Build app).

We can force a request to this page directly without making a request to the PG Build API. All we need to do is use basic authentication to validate ourselves and gain access.

We can’t set this URL directly into the Github service hook field, but we can perform the request to this function from the page we do set as the service hook.

 What do we need to make this work?

To perform the basic authentication against the PG Build service and access the correct project, you will need to send through the following three parameters:

  • your PhoneGap Build username
  • your PhoneGap Build password
  • the ID of the project / application

I created a very simple Ruby application using the Sinatra framework to handle this.

http://autobuild.monkeh.me/myemail@something.fake/password/12345

Below is the code for the autobuild.monkeh.me Sinatra application.

The default route (‘/’) displays nothing but some text output. The main focus here is the second route, available by GET or POST requests. This route will accept the URL made up of the username, password and application ID. This will then perform a GET request to the PhoneGap Build repository push request to grab the latest code from the repository and rebuild the application.

So, if you add the following URL (using your own PhoneGap Build username, password and application ID) to the Github Web Hook URL, every commit made to Github will send a request to this URL, which in turn will make the authenticated request to the PhoneGap Build service to pull the latest code from your repository and rebuild all applications.

I love the PhoneGap Build service – it already makes life so much easier and is awesome sexy voodoo magic. Add the API into the mix, and you already have the ability to define your own workflow for building mobile PhoneGap applications.

Using the Github service hooks is just taking one extra step out of the workflow and helping to automate the deployment / build processes. Feel free to try it yourself using the autobuild.monkeh.me URL.

  • johnmclear

    Anyway of accomplishing this without ruby / any other third parties other than github/phonegap?

  • rikkertkoppes

    One could create a service for github and send it in: https://github.com/github/github-services

    It is also all ruby, so it should be easy to adapt the above to a github service hook

    • http://www.mattgifford.co.uk/ Matt

      Excellent idea! I’ll look into creating an official hook for the service. Thank you!

  • Pingback: Automating PhoneGap Builds | ANDREW TRICE

  • http://fyodorwolf.com Fyodor Wolf

    You don’t actually need to have a side server running to accomplish this. Github’s webhook and PhoneGap’s api are fully capable of working hand in hand.

    in terminal run the following to get a an API token:
    $ curl -X POST -d "" -u YOUR_USERNAME https://build.phonegap.com/token

    this will prompted you for a password, and once validated, you will receive a token response.

    Then in Github’s webook url input field, place the following:
    https://build.phonegap.com/api/v1/apps/APP_ID/build?auth_token=THE_TOKEN

    replacing APP_ID with the phonegap app’s id you’d like to build, and THE_TOKEN with the token you just received in terminal. FIN.

    Happy Coding!
    ~Fyodor