Building Your App Remotely with PhoneGap Build and Sencha Cmd

PhoneGap has long been preferred by developers over Sencha’s own mobile packager, and it seems Sencha themselves are of the same opinion. With the introduction of Sencha Cmd 4.0 we saw support for PhoneGap / Cordova being included, and now with Sencha Cmd 5.0 support for their own mobile packager has been dropped completely.

Sencha Cmd integrates very smoothly with the PhoneGap Build service. After a little initial configuration, you can build your app from the command line and have it upload directly to the PhoneGap build server. This saves you the hassle of building the app, zipping it up and then uploading it to the PhoneGap Build website yourself – a nice boost to productivity. In this tutorial I’m going to walk you through how to set up a new app to build remotely with PhoneGap build. For more information on setting up PhoneGap Build in a Sencha Touch application you can view this tutorial.

1. Generate a new application

Generate a new Sencha Touch application by running the following command from your touch-2.x.x directory:

sencha generate app RemoteApp ../RemoteApp

2. Initialise PhoneGap

Now we have to initialise PhoneGap in our application. Make sure you have NodeJS and the PhoneGap CLI installed before continuing. If you are using PhoneGap Build you do not need to worry about installing native SDKs. When you’re ready run the following command:

sencha phonegap init com.yourname.remoteapp RemoteApp

If successful you should see a message that says ”Application has been initialized for native packaging. Please edit app.json and add platform(s) to build for”. Most notably, this will generate a folder in your project directory called ‘phonegap’ and add some additional options to your app.json file.

3. Edit the app.json file

Open up ‘app.json’ and look for the “builds” section, it should be near the top. Here we will tell Sencha Cmd to build our application remotely for the iOS platform. Make the following changes:

"builds": {
        "web": {"default": true},
        "native": {
            "packager": "phonegap",
            "phonegap" : {
                "config": {
                    // Uncomment the line below and add the platform you wish to build for
                    "platform": "ios",

                    // Uncomment and Set this line to true to enable PhoneGap Remote Building.
                    // To properly use this you must set the following properties in your local.properties file (if this file does not exist create it in your app root)
                    // phonegap.remote.username=myname@domain.com
                    // phonegap.remote.password=mys3cr3tp@ssw0rd
                    "remote":true,

                    "id": "com.remoteapp.remoteapp",
                    "name": "RemoteApp"
                }
            }
        }
    },

You may notice a username and password being defined in here. Leave that commented out as it is meant to be placed in a separate file which we will discuss in the next step.

4. Create a local.properties file

Create a file called ‘local.properties’ and save it in the root directory of your project. Add the following lines to the file:

phonegap.build.remote.username=you@yourdomain.com
phonegap.build.remote.password=yourpassword

Replace these values with your own username and password for the PhoneGap Build service (your Adobe ID). Of course, if you do not already have an account you can create one at build.phonegap.com.

5. Build your app with Sencha Cmd

Now it’s time to build our application and send it off to the PhoneGap Build servers. Run the following command:

sencha -d app build native

The ‘-d’ option causes some more helpful debugging information to be output during the build process. Everything should run smoothly for a while until you hit an error like this:

[error] error occured whil building the ios app

The reason for this is because we need to supply a valid .p12 file and provisioning profile in PhoneGap Build for iOS builds. Log into the build.phonegap.com website and upload these files for your application. The application should automatically rebuild without errors. Now if you come back into the command line and once again run:

sencha -d app build native

You should see the following message:

[phonegap] compressing the app...

[phonegap] uploading the app...

[phonegap] building the app...

[phonegap] iOS build complete

Which indicates that the application has been successfully built on the PhoneGap Build servers and you can now download it.