How to build a PhoneGap app for iOS with only a PC using the PhoneGap build server

By SuperUser Account on 12/12/2013

This blog assumes you have already installed PhoneGap locally and you created a simple Hello World app on your computer with PhoneGap.  See my previous post for instructions on doing that.  Also if you prefer you can use my hot-rodded Hello World app available onGitHub.com here, but you will have to have already created an empty Hello World app first and then copy those files into it.

As I mention in my previous blog, be aware there are two options to using PhoneGap to build apps: 1) on your computer locally on top of the native SDK and IDE E.G. the Android Developer Kit with Eclipse or X-Code for IOS. or 2) PhoneGap now provides a build server at https://build.phonegap.com/ where your locally installed PhoneGap tools can be used to upload your source code and compile it there for multiple mobile platforms. This blog covers using option 2 to build a PhoneGap iOS app with only a Windows computer using the PhoneGap Build Server.  Most web documentation leads you to believe you need a Mac with X-Code to accomplish this, but you don’t.

  1. You will need an Apple developer’s account.  It costs $99 bucks a year and there’s plenty on the web to get you set up with that.
  2. You will need to install PhoneGap.  That is covered in my previous post.  Just skip all the stuff about setting up the Android SDK and Java.  You won’t need it to build an iOS app.  If you already have it done, no worries, this works fine either way.
  3. Open a command prompt and type “openssl” to verify you have it.  I had it on my PC already, but if you don’t have it then you need to get that installed.
  4. Here’s the part you won’t find in the PhoneGap or the Apple docs.  I got it here from Jeannette Stallons.  The only reason I knew about this is because I have used Flash Builder to build iOS apps my laptop, without a Mac.   Read Jeannette’s whole blog if you can, but pay attention to the section titled: “Generate a CSR on Windows”.  In short below is contents of the .bat file I came up with to accomplish all I needed on my PC, no Mac required:
  • openssl genrsa -out c:\src\ios\provisionjohnston.key 2048
  • openssl req -new -key c:\src\ios\provisionjohnston.key -out c:\Temp CertificateSigningRequest.certSigningRequest -subj “/emailAddress=brianj@alpinetechsolutions.com, CN=brian johnston, C=US”
  • openssl x509 -in c:\src\ios\provisionios_development.cer -inform DER -out c:\src\ios\provisiondeveloper_identity.pem -outform PEM
  • openssl pkcs12 -export -inkey c:\src\ios\provisionjohnston.key -in c:\src\ios\provisiondeveloper_identity.pem -out c:\src\ios\provisioniphone_dev.p12
  1. Change the commands above to fit your environment, run them, and then you will have all the files required to set up your Apple provisioning profile.
  2. Setting up your Apple provisioning profile is described on the web so I’m just going to touch on the main steps required:  1) Log into your apple developers account and navigate to “Member Center”,”Certificates, Identifiers & Profiles” 2) under the certificate section upload your certificate file you generated in the step above 3) create an app id for your app and give a name like this: “com.[yourorganization].PhoneGapHelloWorld”  4) add your device 5) set up a provisioning profile for your iOS app.  IMPORTANT: the widget tag ID attribute in the config.xml file of your PhoneGap app must match that name exactly.
  3. Download your iOS app provisioning file.
  4. Acquire a GitHub account if you don’t have one yet.
  5. You won’t need to check in all the junk PhoneGap makes so I suggest putting the lines below into a .gitignore file before you create your local Git repository for your PhoneGap project:

.cordova/

merges/

platforms/

plugins/

  1. Check your PhoneGap App project into a public GitHub repository.
  2. Acquire a PhoneGap build server account at http://build.phonegap.com.  You don’t need to purchase anything at this point since your hello world app is checked into a public repository.
  3. Add a new PhoneGap app to your PhoneGap build account and hook it to your public git project repository.
  4. Next to iOS icon click on the “key” drop down box.
  5. In the key dialog you will upload your p12 file and mobile provision file.
  6. Build the iOS app.
  7. When the build no longer says “pending”, use the QR code generated on the PhoneGap build page to install your iOS app.

So that’s it in a nutshell.  Have fun and good luck!