TACOBOT

The Official Blog for Visual Studio
Tools for Apache Cordova

By our developers, for developers.

Local iOS Deployment

When developing an app using Visual Studio Tools for Apache Cordova today, you have several options for emulating and deploying your app on iOS. In the case of deploying to a physical iOS device, you previously had to connect the iOS device to the remote agent. We’ve heard from a number of you that the Mac machine hosting the remote agent might not necessarily be in the same room as your development machine, thus making it hard to interact with the iOS device and debug the app. We’re happy to announce now you have the ability to locally deploy an iOS app!

Local Deploy

Not only have we addressed a recent issue with local deploy, Microsoft Visual Studio for Apache Cordova Update 6 now enables you to start a local debugging session on a iOS device tethered to your VS box. The steps to configure the remote agent remains exactly the same, but now you have the option to debug via a local iOS device (via “Local Device” on the F5 dropdown) or a remote one (“Remote Device”). To enable a local deploy, you will need to supply a UNC path to your iOS device support folder on your Mac. Full details can be found here.

Local Deploy

Underneath the covers, we’re leveraging the ios-webkit-debug-proxy and libimobildevice projects to communicate with the iOS device and inspect MobileSafari and UIWebViews on real iOS devices.

Leo Lee
Software Engineer | Tools for Apache Cordova
Microsoft Visual Studio
@LeoTLee

Cordova Tools Live Q&A - Jan. 21, 2016

As you may know, our team hosts regular Live Q&A sessions via our website. In these sessions we answer questions from you, our friendly Cordova developers, and generally discuss topics that may be of interest to you. We just published this week’s episode and here’s a summary of what we talked about:

I hope you enjoyed this week’s episode and I’ll “see you” in the audience next month when we have our next episode (watch this blog for details)!

Jordan Matthiesen
Program Manager | Tools for Apache Cordova
Microsoft Visual Studio
@JMatthiesen

Build Issues with Node v5.4.1

We’ve had a lot of reports of builds failing with errors like:

>  ------ Package installation failed. Retrying...
>  ------ npm install failed. Exit code: 1
>  [Error: ------ npm install failed. Exit code: 1]
>  MDAVSCLI : error : ------ npm install failed. Exit code: 1 

After looking into the issue, we found that the problem is due to incompatibilities between our tools and certain versions of NPM. Unfortunately, if you go to nodejs.org and download v5.4.1 Stable, the version of NPM which is bundled with 5.4.1 will cause these errors.

We are working on a change to our tools to insulate us from problems like this in the future. But for now, the solution to this problem is to use a different version of NPM than what is bundled with Node 5.4.1.

There are two workarounds that we know of:

  • Rollback your version of Node / NPM to the one we ship with Visual Studio 2015, version 0.12.90. The reason we include it with our tools is because it is compatible with every version of Cordova that we support. Instructions on how to do this here.
  • Update your NPM version to the edge version (currently 3.5.4), which at this point in time works fine. You can do this by opening a command prompt and running npm -g install npm.

Fixing this bug is one of our highest priorities.

Michael Braude
Development Manager | Tools for Apache Cordova
mbraude@microsoft.com | @LittleWebFoot

Using Msbuild with VS Cordova Projects

Microsoft Visual Studio Tools for Apache Cordova Update 5 adds the ability to easily build from command-line using msbuild. Building from command-line is useful for automating builds, creating a CI build, or for those who prefer CLI commands over an IDE.

Building the .sln file using msbuild will use the last build configuration from Visual Studio. In order to build different configurations and platforms using msbuild a few command-line parameters need to be used. Here is an overview of the parameters to use.

Every build requires that a platform be specified. For example:

msbuild /p:Platform="Windows-x64"

The allowed values are:

  • Android
  • iOS
  • Windows Phone (Universal)
  • Windows Phone 8
  • Windows-AnyCPU
  • Windows-ARM
  • Windows-x64
  • Windows-x86

Just like other msbuild commands, the configuration can be set to Debug or Release by specifying it as a parameter:

msbuild /p:Platform="Windows Phone (Universal)" /p:Configuration=Debug

Here is a quick overview of building for each platform:

Android

The type of build will change based on the target of the build. Targeting “Device” or “AndroidEmulator” will do a normal Android build:

msbuild /p:Platform="Android" /p:DebuggerFlavor="Device"

Running a build with the target using “RippleNexus7” will run the build that Visual Studio uses in order to launch the app using Ripple:

msbuild /p:Platform="Android" /p:DebuggerFlavor="RippleNexus7"

iOS

Building for iOS requires a remote build server to be configured. The following is an example of how to build for a device with secure mode turned off:

msbuild /p:Platform="iOS" /p:DebuggerFlavor=iOSRemoteDevice /p:iOSRemoteBuildServer="http://<machine name>:<port>/cordova"

The build can also target emulators by specifying a DebuggerFlavor of “iOSEmulatoriPhone6”.

To use remotebuild in secure mode, iOSCertificateName must also be specified. The certificate name will usually be the machine name of the remote build server followed by “.RB”, so “<machine name>.RB”. If secure build has been configured in Visual Studio, the certificate name can be looked up in the registry from this value:

HKEY_CURRENT_USER\SOFTWARE\Microsoft\VisualStudio\14.0\ApplicationPrivateSettings\Microsoft\VisualStudio\MultiDeviceHybridApps\Common\Options\MultiDeviceDevelopmentOptionsPage\CertificateName

Then pass the certificate name as an msbuild parameter:

msbuild /p:Platform="iOS" /p:DebuggerFlavor=iOSRemoteDevice /p:iOSRemoteBuildServer="http://<machine name>:<port>/cordova" /p:iOSCertificateName="<certificate name>"

If the certificate was configured using taco-cli, the certificate name can be found in:

%appdata%/taco_home/TacoSettings.json

Windows Phone (Universal)

Windows Phone (Universal) is for targeting Windows Phone 8.1 and Windows 10 Mobile apps. Cordova uses the same “windows” platform as apps that target Windows.

The main DebuggerFlavor options for Windows Phone (Universal) are:

  • WindowsMobileEmulator - builds for x86 so that it can be used in an emulator
  • PhoneDevice81 - builds for ARM so that it can be deployed to a device

msbuild /p:Platform="Windows Phone (Universal)" /p:DebuggerFlavor="PhoneDevice81"

Windows-AnyCPU, Windows-ARM, Windows-x64, Windows-x86

The Windows platforms of Windows-AnyCPU, Windows-ARM, Windows-x64, and Windows-x86 can be used to build Windows apps targeting Windows 8.1 or Windows 10. Use the different platforms to target different CPU architectures.

The DebuggerFlavor will not affect the build. The default value is “LocalMachine” and does not need to be changed.

msbuild /p:Platform="Windows-x86"

Windows Phone 8

Windows Phone 8 is for targeting only Windows Phone 8.0 Silverlight apps.

The DebuggerFlavor will not affect the build. The default value is “PhoneDevice” and does not need to be changed.

msbuild /p:Platform="Windows Phone 8"

Todd Moscinski
Senior Software Engineer @ Visual Studio
e: toddmosc@microsoft.com

Announcing Update 5

Hello everybody, and welcome to our new developer blog! Today, I’m excited to announce the availability of Update 5 for the Tools for Apache Cordova. If you already have the tools installed then you can upgrade by clicking this link:

http://download.microsoft.com/download/F/2/3/F235B15D-C9FC-4297-A256-3FCDC37DD3EF/20160106.1/ApacheCordovaTools.exe

You can download the update now or wait a few weeks for the upgrade notification in Visual Studio. Cordova Update 5 does not require VS Update 1; however, if you install the update from the action center then the Visual Studio installer will require you to upgrade to VS update 1. The installer above will not install pre-requisites such as Node, Git and the Android SDK. You can install these manually if you like, but we suggest adding the tools from VS setup if you haven’t already before upgrading.

What’s New?

There are a lot of new features in this update. One of the things we’ve been focusing on lately is CLI interop. We want developers to be able to use Cordova from the command line and Visual Studio and have the same state reflected in both environments. The other thing we’ve been focusing on is Node 5 / NPM 3 and Cordova 5.4.1 / 6 compatibility.

So to address this, we added the following features to Update 5:

Allow VS to use the global Cordova version
By default, our tools use a sandboxed version of Cordova. This means that you could be using different versions of Cordova in VS than what you use on the command line. We’ve heard some feedback that this can create a confusing environment for some people. It means any changes made in the CLI are not automatically reflected in Visual Studio, for example. To address this, we added a checkbox in the config designer that lets you target the version you’ve installed globally:

Platform Version

If you check the checkbox, the version selection dropdown becomes disabled and shows you which version you have installed globally:

Global Platform Version

You’ll note that the dropdown is now grayed out and is displaying that the project will use the gobally installed Cordova version 5.3.3. You’ll also notice that we changed this from a text box to a dropdown menu so that we can pre-populate the available versions by querying NPM (although you can still enter whatever value you like in the dropdown).

CLI / VS Plugin Interop
For historical reasons, Visual Studio did not write the CLI-compatible <plugin> element to config.xml. This made for a confusing experience for some people who would add a plugin in VS and not see those changes reflect in the CLI and vice versa. To fix this, we changed our logic to write the same xml element as Cordova. This way, changes made in one environment show up in both.

As an example, adding the “File” plugin now writes this to config.xml:

<plugin name="cordova-plugin-file" version="3.0.0" />

Similarly, adding a plugin from the command line -

Command Line

Now reflects in the UI:

Added Plugin

Please note, Update 5 is forwards, but not backwards compatible. For example, if you added plugins to a project in Update 4 we will show that plugin as being added. But if you add a plugin in Update 5 and go back to Update 4, VS will not show the plugin as installed.

Build From the Command Line
We did some work in Update 5 so that Cordova projects can now be built from the command line using msbuild. This can address some CI scenarios, as well as customers who just like to build from a native command prompt. We are planning on publishing another blog post in the future detailing the parameters necessary to make this work.

iOS Build / Debug Improvements
We made a few improvements to our iOS story. First of all, we added support for the 6s simulator. We also improved the way we perform incremental remote builds to reduce build time - even across VS sessions.

Support for Node 5 / NPM 3
As you probably know, NPM 3 has recently been released. We are looking forward to a future when VS supports NPM 3 natively as we know the nested folder structure in earlier versions frequently hit MAX_PATH errors. Until then, we’ve been working on making sure our tooling works with NPM 3.

Unfortunately, NPM 3 does not work with Cordova versions 5.3.x and lower due to the removal of nested dependencies. We did some work to make this more visible. In Update 5, if you are targeting a Cordova version older than 5.4.0 and you have NPM 3 or higher, we will fail your build and show you an actionable message.

We also did some work in Update 5 to support Cordova 5.4.1 and 6.0 when it’s released. See the bug list below for more information.

Plugin Warning Bar
By default, adding a plugin to a Cordova project will ways add the latest version of that plugin. Unfortunately, this can be a big problem for customers who are targeting an older version of Cordova. In cases where there are major platform changes between the version they’re targeting and the edge version, the plugins may not be compatible with the platforms their Cordova version is targeting. Sometimes this results in obscure build errors.

The good news is that starting in Cordova 6.0.x, plugins will now be pinned to the platform that is pinned to that CLI. This means adding a plugin in Cordova 6 will no longer pull the edge version - it will pull a specific version that the Cordova community deemed compatible with 6.0.

Still, there are cases where developerss could be targeting a platform for which we do not have pinning data. We are discussing ways to make this experience smoother, but to start with we decided to alert developers when their configuration may not support the edge plugin version by adding an info bar to the config designer:

Plugin Warning Bar

We think the steps to resolve this problem are fairly mechanical, but we think the first step is to bring the potential problem to your attention. We would definitely appreciate feedback on the help link - we want this to be as easy to understand as possible.

In Update 5, we will show this info bar whenever you are targeting a Cordova version that is not on the latest version number. For example, if you are targeting 4.x and the latest is 5.x, then you will see this warning when you go to add a plugin. But you will not see it if you are targeting 5.3.3 and the latest is 5.4.1.

Cordova Version now in Help -> About
This is a small change but I thought I should mention it. We often ask customers which version of our tools they are on and the only way to know was to go into Add / Remove programs and look for our entry.

Starting in Update5, we now have an entry in Help -> About:

Help - About

Bug Fixes

There are a lot of bug fixes in this update. Here are the highlights:

Deploy to Ripple should error if VS is running as admin
We’re really happy to have a fix for this bug. Previously, we did not support deploying to Ripple if VS was run as administrator. The root cause of this was mismatched permissions between VS and the child processes we have to spawn to launch Ripple. This has been fixed in Update 5.

NullRef when dragging a snippet from HTML-DesignTools-Toolbox onto *.CSHTML file
We had a crash when dragging snippets into .cshtml files. We know this was particularly painful for customers who were using this feature for demos.

Cordova installs extra Node.exe package
We previously did not look for 64-bit Node version in our setup. This meant we would install our 32-bit version of Node even if you already had a 64-bit Node installed, and you could end up with two versions of Node installed. We’ve changed this - we’ll respect your 64-bit version if it’s already installed.

Latest Apache Cordova Tools is missing VS Android Emulator dependency
We had a setup authoring bug that prevented the VS Android Emulator for Android from being installed by default when Cordova was selected from setup.

Building a Cordova project does not trigger the before_build hook
We were not properly triggering this build hook in our tooling and this was preventing some plugins from working properly.

Plugin install error shows as Succeed in plugin window
We’ve been doing a lot of work to make plugin installation errors more diagnosable and transparent to customers. Bugs like this one were causing a lot of confusion - we would show success when in fact, the plugin failed to install.

MySQL breaks Cordova
Some customers reported strange path issues after installing MySQL. The root cause of the problem was that users’ PATH property could occasionally miss a semicolin and contain certain characters like “&”. We have fixed this in two ways. First, we added a diagnosable error message in cases where the PATH was malformed. And second, we have done some work to support PATH values with the ampersand character.

Store Packaging for Windows Phone 8.1 builds for x86 instead of ARM if Emulator is the debug target
We’ve fixed store packaging for Windows Phone so that it always targets ARM, no matter which debug target you have selected.

Feedback, and Thanks!

First of all, we hope you enjoy Update 5. As you can see, we’ve got a lot of good stuff here which we’re excited to ship to you. We aim to ship every sprint, so if everything goes well we’ll have Update 6 ready for you in three weeks.

We’ve also got lots and lots of content we’re looking forward to sharing on this blog. So please subscribe to the RSS feed and give us your feedback in the comments below. You can also email us at vscordovatools@microsoft.com.

See you next time!
Michael Braude
Development Manager | Tools for Apache Cordova
mbraude@microsoft.com | @LittleWebFoot