Build Cordova iOS app from Visual Studio for Windows

This article’s goal is to briefly explain how to create your Cordova app for iOS from Visual Studio 2017 or 2015, and why you should avoid using Visual Studio’s remote build agent for this. There’s a more reliable way to manage your Android app in Visual Studio and then export it to your iOS platform version and Xcode.

There’s a number of reasons why should not attempt to build your iOS app from Microsoft Visual Studio using the Remote Agent. Below you can find the most relevant ones.

Xcode updates far too often

When building an iOS app from Visual Studio, it simply invokes the remote build agent on your Mac to (try to) build and (attempt to) deploy the app on your iOS device.

MacOS, Xcode and iOS itself get updated at an overwhelming rate, and every new release introduces issues that render your Cordova CLI and cordova-ios versions potentially obsolete. As you can see from the Apache Cordova blog, every single cordova-ios release addresses Xcode related issues.

Visual Studio is not updated often enough, not to mention the Tools for Apache Cordova or the Cordova toolset, these are stuck in Cordova CLI 6.3.1 for example. In fact you might need to wait several years for Microsoft to release an updated Cordova CLI tools for Visual Studio.

visual studio cordova toolset

VS2017 cordova toolset provides far too old versions of everything. One does not simply upgrade the Cordova CLI with Visual Studio…

From my experience, the newest Cordova CLI version to use with Visual Studio 2015 or 2017 is CLI 7.1.0 with cordova-android 6.3.0. Starting with cordova-android 6.4.0, internal paths have changed and Visual Studio is unable to even deploy your Android apps to device or emulator.

Avoid using the Remote Agent for iOS

Visual Studio iOS configuration

Visual Studio’s iOS configuration may potentially create more problems than it solves when using newer Cordova versions.

Whenever you use the Remote Agent to build your iOS app from Visual Studio for Windows, newer and more critical errors than the basic ones will be triggered. You may get errors related to either Xcode, Cordova CLI and cordova-ios, and (why not), bonus errors introduced by plugins and their dependencies.

Plugins may require newer CLI and platforms versions

Most plugins such as Firebase ones will rely on newer Cordova CLI and platform versions to work properly. The newer the Cordova CLI version, the more issues with Visual Studio you’ll find.

Even basic, plugin-less apps could fail to build/deploy on the iOS side using the remote agent for several reasons. Most of these errors are related to incompatibilities between the older Cordova versions with newer Xcode ones, including but not limited to the Certificates and Provisioning Profiles handling, that Apple persists in changing between Xcode releases.

How to use Visual Studio for Windows then?

Not everything is lost. You can still develop a multi-platform Cordova app from Visual Studio, however, you should manage both versions separately as follows:

For your Android app

Use Cordova CLI 7.1.0 with cordova-android 6.3.0. This will allow deployment to devices and emulators using the external Android SDK as explained somehere in this post. Once you have installed the Android SDK (either with the standalone Android SDK manager of Android studio) you can build, debug and deploy apps rather normally.

For your iOS app

  1. Install the latest Cordova CLI version on your MacOS normally.
  2. Create a new app on your Mac using the cordova create hello com.example.hello HelloWorld command in terminal.
  3. Copy your project’s www folder from your Visual Studio machine and replace the contents from the newly created iOS project on your Mac.
  4. Install all plugins one by one with cordova plugin add [plugin-id]
  5. Add the latest iOS platform with cordova platform add ios

If everything went fine, you should be able to open with Xcode your .xcodeproj or .xcworkspace file from the platforms/ios folder. If you are using CocoaPods, you’ll want to open .xcworkspace file, because it includes the stuff needed by CocoaPods to manage dependencies.

Xcode Cordova App

Xcode: Ensure to set the Automatically manage signing option.

Once your project is present in Xcode, first thing you should do is to select a Development team for the Signing section. Then you can manage the app’s Capabilities and other settings, build, debug and deploy from Xcode entirely. Also, enable the Automatically manage signing option to avoid issues with certificates and provisioning profiles.

Whenever you update your app from Visual Studio for Windows:

  1. Make sure to close Xcode completely
  2. Replace the www folder with the new one from your Windows environment
  3. Add, remove or update your plugins from the command line (terminal)
  4. Run cordova prepare ios (or remove and readd the ios platform)
  5. Open your your .xcodeproj or .xcworkspace file in Xcode to build and deploy the app

Debug Cordova iOS app with Safari Web Inspector

You can debug your iOS app using Safari just like you debug your Android app with Chrome, by following any of these detailed guides:

The one caveat of Safari’s remote debugging is that by the time you managed to open the tools from Safari’s developer menu, the app will have already sarted, and critical debug info would be lost.

In order to restart your app from Safari, simply run location.reload in the Safari console to reload the Cordova application, and see all log messages from the app startup process. This suggestion was taken from this StackOverflow post where a user asked about Cordova-iOS debugging.

All product names, logos, and brands in this website are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.