Calling Localhost Web APIs from Visual Studio 2015 Android Emulator

I've been working with Cordova a lot lately and have been loving both Visual Studio Tools for Apache Cordova (VS TACO) and TACO CLI. One of the challenging parts for me had been that for the code that works with device capabilities that won't work in Ripple in the browser (i.e. camera, InAppBrowser), I need to run in an emulator. And if you haven't tried it yet, the VS Android Emulator is orders of magnitude better than the official Android SDK emulator (oh the irony). Way way way faster startup time overall, and faster deployment and debugging.

The only thing that was causing me troubles was not having figured out how to do the subject of this post. I was having to build my Web API, publish to an Azure Web App, and then Attach Debugger from VS Server Explorer or Cloud Explorer (which, by the way is another awesome capability they have brought to VS in the not too distant past).

I should not that everything I'm showing in this post applies equally to native Android apps that you might develop and use the VS Android Emulator for and especially for Xamarin projects (which Microsoft just bought!!! very excited about that!).

So through some searching and asking some other really smart folks who build this stuff and do it, was able to sort out the secret sauce to get this working. And since my search results were not turning up anything specifically covering what I was trying to do, I figured I'd blog this quick for my own reference for when I forget and in the hopes that others searching to do this will find this useful too.

These instructions assume Visual Studio 2015. The only thing that is really different for 2015 vs 2013 is the location of the IIS Express config. In VS 2015, it is .vs\config\applicationHost.config. In VS 2013 it is C:\Users\\Documents\IISExpress\config\applicationhost.config

Steps to success
  • With the VS Android Emulator running, click on the double caret >> button in the side toolbar. This opens up the settings UI, one of which is for Network.
  • In the Network settings, take note of Desktop Adapter #2 IP address - which generally will be set to 169.254.80.80.
  • In the root folder of your Web API solution, go into the IIS Express config and search for sites. You will find an element that has a collection of site elements in it. You want to find the one that matches your Web API project name and path.
  • Inside of that there are a collection of bindings. Generally you will just have one entry in there for localhost and the port your project is set to debug on. What you need to add is another binding that matches the address that the emulator will use to get to localhost, which is the IP address from the second step mentioned earlier. Below 2112 is the port I am debugging on. And yes that is a geeky Rush tribute.
<site name="<your project name>" id="2">  
   <application ...>
      <virtualDirectory path="/" 
       physicalPath="<your project path>" />
   </application>
   <bindings>
      <binding protocol="http" 
       bindingInformation="*:2112:localhost" />
      <binding protocol="http" 
       bindingInformation="*:2112:169.254.80.80" />
   </bindings>
</site>  
  • Next you need to go into the Windows Firewall settings and open your debugging port for inbound traffic. Keep in mind the VS Android Emulator is really a HyperV virtual machine running the Android OS in it. So to your machine it is a separate machine trying to call into your localhost services externally.

    To do this go to Windows Firewall in Control Panel. Click on Advanced Settings. Click on Inbound Rules in the left pane, and then click "New Rule" in the right Actions pane. Select Port as the Rule type, then your debugging port number in the "Specific Local Ports" input. Click Next and the default of "Allow the connection" in the next step is good, click next. On the next step, you should select public and private. Even though you are running the emulator local, the address used to get the desktop is treated as public, so you need to open that. Just beware that is another open port on your machine, so you might want to consider disabling that rule if you know you wont be using it for a while. In the final step give it a name you can remember so you can find it to disable or delete it when you don't need it.

  • Lastly, don't forget to change the root address you use for your Web API calls inside your mobile app to 'http://169.254.80.80:yourport/

With that you should be able to call your locally running Web API in the debugger and have a much faster debugging experience that needing to go out to a remote Web API that you may be developing at the same time as the mobile app pages that call it.

Hope that helps!