Friday, January 9, 2015

Using a "Mac in the Cloud" for Visual Studio Cordova Dev

So you say you want to do iOS development using Visual Studio Tools for Apache Cordova (currently in CTP3)... but you don't actually own a Mac (like me)?

Well there is at least one option: use a "Mac in the Cloud!"

One service that allows "renting" a Mac in the Cloud is aptly named MacInCloud. And, Microsoft has published a nice walkthrough that can help you in getting started:

        Build and Simulate iOS in the Cloud

However, the initial setup can be a bit daunting due to some security and config issues - so I thought I would share my experiences here.

So here are the general steps - 
  1. Register as an iOS Developer

    I just want to mention this step in case you're totally new to iOS development. If you're not yet an iOS Developer, you will need to register and pay the mothership $99 per year. You can get started here.

  2. Get a MacInCloud account with the Remote Build Feature turned on.

    Since I was just dipping my toes into MacInCloud, I wanted to choose the most cost efficient plan, which ended up being their 
    PayAsYouGo plan, which is $1 per hour with a first time purchase of $30 (which covers your first 30 hours). 

    However, I later found out that this plan does not include the Remote Build Feature, which is required for Visual Studio remote deployment and debugging on a Mac. This feature will cost you an additional $5/month.

    If you choose the cheaper PayAsYouGo plan, you will need to contact MacInCloud support (here) to get the Remote Build Feature turned on for your account. (If you go with any of their higher end plans, then remote build will already be enabled). Before contacting support, read #4 below because you'll also want them to ensure vs-mda-remote is installed!

  3. Try Connecting to your Mac in the Cloud

    The MacInCloud service allows RDP access to your rented server in the cloud. Once your account is set up, you will download a series of RDP Configuration files in varying resolutions like so:



  4. Install the Visual Studio Remote Agent

    The Remote Agent (vs-mda-remote) allows Visual Studio to connect to a remote Mac and deploy, build and debug.

    There is a chance that vs-mda-remote will already be installed globally on your Mac server. To check this, open a Terminal window on your Mac and see if vs-mda-remote exists in the global node_modules directory (/usr/local/lib/node_modules/vs-mda-remote) like so:

    First, go to the global node modules dir and list the contents:

            cd /usr/local/lib/node_modules
            ls -l


    ... and if you see a directory named:

            vs-mda-remote

    ... then the VS Remote Agent is already installed on your Mac.

    If vs-mda-remote is NOT found in the global node modules, you can follow the instructions provided in this document: Build and Simulate iOS in the Cloud - HOWEVER, if you went with the PayAsYouGo plan, you will likely hit security issues with Homebrew and Node (which are used to install vs-mda-remote).  So again, it's back to MacInCloud support to help with installing vs-mda-remote.

  5. Do the iOS Developer Dance

    *Sigh* it is a twisted, awkward dance to begin Mac development. In order to allow your Mac In Cloud to develop iOS apps, you need to generate a certificate signing request, and then download the Cert and Provisioning Files from your Mac developer account.

    There are countless docs on how to do this, so I won't repeat all of the steps here but here is an "ok" walkthrough: Generating a certificate signing request

    Once you complete the request, you will be able to download the Certificate and Provisioning Profile from the Apple Dev Center.

  6. Setup XCode with your Dev Account Info

    On your remote Mac, you'll need to give XCode your dev account info. Start XCode from the Applications menu, and then from the system menu for XCode, select Preferences... and then go to the Accounts Tab and enter your apple dev account info:



  7. Start the Remote Agent, vs-mda-remote

    If everything is in place, then we should be able to use Visual Studio on our local machine to deploy and debug on the remote Mac in the cloud!

    Make a note of your Mac's IP Address, which you can get from the terminal window by looking at your shell's prompt (if you don't see it then just type in 
    ifconfig | grep "inet " )

    Next, on the Mac in the cloud, start the vs-mda-remote build agent:

    vs-mda-remote --secure false

    * IMPORTANT! by using secure==false, we are skipping the optional security feature of the server, which forces a Security PIN that changes every 10 minutes. If you are planning on keeping the remote agent running unmonitored for an extended period of time, then you should not do this!

    You should see something like so:

    Copyright (C) 2014 Microsoft Corporation. All rights reserved.
    0.2.5
    Loading resources for language en from /usr/local/lib/node_modules/vs-mda-remote/resources/en/resources.json
    Build Retention initialized with baseBuildDir /Users/userXXXXX/remote-builds/builds, maxBuildsToKeep 20
    Initialized BuildManager with installedCordovaVersion: 4.0.0; baseBuildDir /Users/userXXXX/remote-builds/builds; maxBuildsInQueue 10; deleteBuildsOnShutdown true; allowsEmulate true; nextBuildNumber XXXX
    Remote build Express server listening on [http] port 3000
    ios-sim is installed on path at: /usr/local/lib/node_modules/vs-mda-remote/node_modules/ios-sim/build/release/ios-sim

  8. Deploy and Debug from Visual Studio
    Back on your PC, open up Visual Studio and create or open an existing Apache Cordova App.

    Go to: Tools / Options / Tools for Apache Cordova / Remote Agent Configuration

            Set Enable remote iOS processing to True        Set Host to the IP address of your Mac in the cloud (found in previous step)
            For Security PIN, you can skip this if you started vs-mda-remote with secure false.

    From the Configuration Dropdowns, select Debug / iOS/ and then choose your favorite Simulator



    Now, debug by pressing F5. If there are any errors, you will see them in the VS Output Window (the server side vs-mda-remote has only limited error messaging).

  9. Setting Breakpoints

    I am amazed that setting breakpoints and debugging even works at all given all of the moving pieces here... But yes, there is some flakiness with debugging from VS to vs-mda-remote.

    If you see your breakpoint is not getting hit, first check the VS Output window and look for issues like "resource not found" - which would prevent your breakpoint from even being reached.

    Also there are also cases where a breakpoint is inside some initialization code, and was hit before vs-mda-remote was bootstrapped up. In these cases, you can go to the JavaScript Console inside Visual Studio (visible when debugging) and type in:

    window.location.reload()