Running Cordova Multi-Device Hybrid App from Visual Studio On an iOS Device

Abstract

In a previous post we looked at how we can build and deploy a Multi-Device Hybrid App from Visual Studio to an Android device. It was a fairly simple process and within a few minutes we managed to get the app running on the device.

If you’ve done any cross-platform development before, you would agree that building and deploying an app to an iOS device is not trivial. If you are an avid Windows user like me, it gets more intriguing. In this column, we will examine the different challenges and how we can build the app and deploy it to an iOS device without a physical Mac machine.

The Indisputable Truth… It Requires a Mac

It is no secret that building and deploying an app to an iOS device requires a Mac because currently those iOS apps cannot be built on Windows. As a Windows user who’s yet to buy his first Mac, there must be an alternative.

The Cloud for the Rescue

Open up your favorite browser and google “Mac in Cloud”. You will get a long listing of service companies that offer you access to a Mac in the cloud. Pretty neat. I opted to use Mac in Cloud and their Dedicated Server Plan. The reason why i decided to go for this plan is because i don’t need a pre-configured and managed machine. I also do not want to contact support every time i want to install a software. I want to have administrator/root access.

Configure the Mac Machine?… No Problem

With the help of the Online Documentation now available for Multi-Device Hybrid Apps, I was able to figure out the requirements for remotely building the app on that machine.

Step1: Install Node JS

This should be a no-brainer. Simply download and install Node JS distribution for Mac from here.

Step2: Install Xcode 5.1

Download and install Xcode 5.1 from here. You will need to login to your Apple account and download it from the App store.

Step3: Install Xcode Components… The Command Line Tools

Another requirement is to install the Command Line Tools for Xcode. If you follow the documentation article you will probably get nowhere because the Command Line Tools is not present in the Components list. Instead they must be downloaded from the Apple Developer Tools site.

Alternatively (worked for me!), you can install it using the terminal. The Command Line Developer Tools package can be installed by running the following command:

xcode-select --install

 Step4: Apple Developer Account, Signing Identity and Provisioning Profile

This was probably the most time consuming of all so you need to get this right in order to get a successful build. You can start by reviewing the documentation and following the instructions from there.

You will need to first register the device that you are going to use for development then create a new Application ID. You will then add a new Provisioning Profile for Development in your Apple Developer Account. You finally need to generate a Certificate (the Signing Identity) that you can use for your application.

In Xcode menu, you will need to go to Preferences and locate the Accounts tab. In that tab you will be able to add your account and then select the provisioning profile for your application. If you haven’t downloaded the certifcate and added it to the machine, you can create a new Development Certificate right from Xcode Account Details.

XCode Preferences

 Step5: Remote Build Agent

The final set of configuration that you need to execute on the build server is installing and configuring the Remote Build Agent. The Remote Build Agent is a module for NodeJS that enables remotely building iOS hybrid apps from Visual Studio.

I will not cover installing the Remote Build Agent since the documentation is thorough and you just need to follow the instructions there.

As the Remote Build Agent is installing you will see messages like:

Remote Build Agent Install Remote Build Agent Install

When you see the Build Succeeded message you can then test that the Build Agent is running by opening your browser and navigating to http://localhost:3000

To monitor the tasks that the Agent is executing and the status of the builds that it’s running you can browse to http://localhost:3000/build/tasks

Build Agent Tasks

 Back to Visual Studio… Where We Belong

We have finished configuring our Build Server and at this point the Build Agent is ready to receive commands from Visual Studio to build the iOS apps. However, Visual Studio is still unaware where our Build Server resides and we need to set those settings in the Options dialog under Multi-Device Hybrid Apps page.

The server address will be the location of your Mac and the port will be the port that the Build Agent is running on, in our case it’s the Default 3000.

Visual Studio Settings

Let’s Build the App!

From the Visual Studio toolbar, select the iOS platform and Device from the toolbar. If you don’t see the drop down for the platform, you can look at my previous post on the subject. Click the Play button and pay attention to the Output window. Visual Studio will upload the package to the server and let the Build Agent build the iOS app.

Building the app

At this point if you look at the terminal window on the Mac server, you will notice that it downloads the package that Visual Studio transferred to the Agent and attempts to build the iOS app.

Build on Mac

Once the Build is completed, Visual Studio will download it back from the Build Server and will display the following:

Build Completed

Let’s Run the App!

And the moment that you are eagerly waiting for. Let’s connect your device to your Windows machine, and you will see the package ready to be installed in iTunes.

iTunes Install app

As soon as you sync the apps to your device, you will be able to run the application and relish from your accomplishment.

App on device

Conclusion

Building and deploying Multi-Device Hybrid apps on iOS is possible and you can do it even without having a physical Mac. You can achieve it right from the comfort of Visual Studio with the help of a minimal configuration of a Mac Build Server. You can also run the native Simulator on the Mac machine if you’d like instead of deploying the app to an actual iOS device.

P.S: The team just released an update, CTP2 with added support for Windows 7, Android debugging 4.1+ and about 300+ bug fixes.

1 Comment
  • Reza Rahmati
    July 16, 2015

    Thanks it is a comprehensive tutorial, but I have a question, how can I retrieve the ipa file?

Leave a Reply

Your email address will not be published. Required fields are marked *