Augmented guide to deploying Hybrid Mendix app on iOS using Windows

I’d like to share some knowledge I picked up along the way when working to deploy a Mendix app with custom widgets that required a build in PhoneGap (not the standard “Publish” method in the Mendix Dev Portal) and the steps not articulated in the current guide as a supplement to help anyone else with some of the steps I initially struggled with. Hopefully it saves others the trials and time it took me to figure out.

First, start with Mendix’s guide on Deploying your First Hybrid Mobile App, then read Publishing a Mendix Hybrid Mobile App in Mobile App Stores, then finally read Managing App Signing Keys. Got it? OK, so this is where I attempt to augment a few things not exactly clear to me.

Signing Keys

Because the modeler is currently only available as a .NET desktop tool, we all willingly or not run Windows. If you run a Mac, surprise, surprise, it is easier to build what you need on a Mac for iOS. I didn’t have that luxury which means I had to take the extra steps using OpenSSL.

Following the guide, I found a third-party distro of the OpenSSL for Windows and put it on my D: drive. I renamed the directory to ‘openssl’ to get rid of all of the extra directory version naming because you are going to be working in a command prompt and typing a lot of extra characters (when the Tab key isn’t cooperating to autofill) is a pain.

Generating the private key was easy following the guide. My program wasn’t in a sub directory of ‘bin’, so you’ll need to use that grey matter to put the path correctly into the program commands. I recommend you set your path in the console to the D:\openssl directory for this to save you a lot of path typing for all of these commands. If you aren’t sure how to do it, no big deal and not required, but it’s literally a command of ‘set PATH=D:\openssl’ if you set it up like I did, and that way typing in commands will look in that path by default for your environment variables, like files to reference and so forth.

The second command statement that they give you,

"C:\OpenSSL\bin\openssl.exe" req -new -key "C:\private.key" -out "C:\ios.csr"

Is where things start to get a bit unclear. Of course, change the paths in the statement to yours directory or rely on the path set as explained above, but my directory was missing the ‘openssl.cnf’ file so this failed. I actually found the file in another directory of mine, I believe it was the AppData of GitHub on my account when I installed the desktop version but I could be mistaken. In either case, if you don’t have it, here it is:

openssl.cnf

Just install this file in your OpenSSL directory where the executable is so it can use it to build the CSR with that statement.

Apple Developer Member

If you aren’t already, you will need to pay the (currently) $99 plus taxes to join the developer program. Then you will see the screen with the steps that the guide is referring to.

Following the guide, you will upload the CSR and then download a .cer certificate. Do your first one under the iOS App Development certificate. You’ll need to generate a second certificate using one of the Production options depending on your needs (a unique cert for each app like App Store and Ad Hoc depending on what you need. I’m just going over the dev version for now)

Next, you need to create an App ID. Give it a description and recommend you use an Explicit App ID like it asks for, such as ‘com.MendixApp.MyAppName’ for example. You can choose what AppServices you want enabled, but it isn’t necessary as you can edit that later. It depends on what widgets and methods of PhoneGap you are going to leverage.

Now you need to register iOS devices. This is important for your Development profile (Not Distribution, which I’ll cover shortly). This way only the devices that you input will be able to run your application. You don’t want just anyone to download a dev version, right? ;) In order to add devices, you need the device UDID. It is a very long string of alpha-numeric characters. The easiest way to get a devices UDID is to use the device’s Safari browser and navigate to GETUDID.IO. The site will run a job and retrieve it for you. Repeat and key in each device you want to consider using for your development testing.

Finally, you need to create Provisioning Profiles. For your Development, choose your Certificate, your AppID, and your devices through the ‘iOS App Development’ option in the Provisioning Profile page under ‘Development’. Download the provision profile and make sure you name it something like your appname_development. Additionally, you will want to generate another provisioning profile for production based on your app and organization’s needs. Again, I’m just explaining the dev setup for now as it is universal whereas production setup depends on the needs of the app and organization.

Change your .cer to a .p12

In order for PhoneGap to build your app, it needs a .p12 certificate and a provisioning profile. You will need to convert your .cer into a .p12 file. It involves a few steps, again unique to doing this with OpenSSL if not on a Mac, and you can follow the guide to do that here:

I can’t stress enough how important it is to retain the password on your key which you will need to build it in PhoneGap.

PhoneGap build

Log into your PhoneGap account where you have created your app following the guides listed above (I synced mine through GitHub because it has some customization's that the default build in the Publish tab of the Mendix Developer Portal doesn’t have), click on the little person icon in the upper right corner and ‘Edit Account’. On the Signing Details tab, add a key for iOS (Name it and upload your .p12 file and provisioning file where indicated). Using the password you created when generating the .p12 file, click the ‘padlock’ icon to unlock the Signing Detail and enter the password. This will unlock it for a month at a time and will need to be monitored. If PhoneGap can’t build it will throw an error that the credentials are locked. You can now navigate back to the application and click on the Settings tab where you can select ‘Allow Public Sharing’, so that the QR Code is accessible by your testers on the devices you configured using the UDID’s.

Note: Be sure your index.html in your deploy folder that PhoneGap is using to configure the right ip address/url if you customized it anywhere for your application. My app has some listeners that require an ip address for initializing so I changed these to point to my laptop when I’m running the app for just me, but on another build for testers on the acceptance cloud environment I point to that server.

Phew, so that’s it. There are a lot of steps when using a Windows-only machine as you can see. The guide gets you most of the way, but there are a few things like getting UDID’s and converting a .cer to .p12 that it doesn’t explain because of the expectation of using a Mac. I genuinely hope this is helpful (and that I didn’t leave anything critical out!), and thanks for those that made it through this technical read!

I'd love some comments and feedback on this particular post for those that find it useful to determine if I try to write this kind of thing up again in the future.