Nico Vermeir

Nico Vermeir

Hi, My name is Nico, I’m a Windows Development MVP living in Belgium. I’m currently employed as a Technical Consultant at Realdolmen, one of Belgium’s leading IT single source providers.

I'm also founding member and board member of the Belgian Modern App Developer Network, a user group focussed on modern application development. If you're in Belgium feel free to drop by if we're doing an event. http://www.madn.be

iis express and the windows phone 8 emulator

As an app developer you’re bound to run into a situation where you’re building both an app and a mobile website or REST based service. That means that you’re testing the ASP.net project in IIS Express while using the Windows Phone 8 emulator, since the emulator behaves like a separate device on the network you can’t use localhost to contact your IIS Express server.

There are a few ways to tackle this problem, you can finish the web project first and deploy it to a webserver. If your WP8 emulator is configured correctly it should have internet access and will be able to connect to your server just fine. A second option is to install an IIS server in your network and deploy to there from Visual Studio. But the most easy option would be to use the IIS Express server that comes with Visual Studio. That’s certainly an option but requires some (small) configuration tweaks.

First things first

We’ll need a webproject of course to test this. I’ll create a very very basic ASP.net WebAPI project and a very basic Windows Phone 8 app that will run in the emulator. I could have made my point with a simple hello world website and the mobile browser but that’s just boring.

Visual Studio 2012 ships with ASP.net MVC WebAPI, think REST services made ridiculously easy, to start a project select the MVC4 web template in Visual Studio 2012 and give it a name.

 

Once you click OK a second dialog will show up and that one holds the option to start a WebAPI project.

What this gives you is an MVC project with an API controller. This behaves much like the normal controller that you’re used to from MVC but instead of returning a view it returns data in a JSON format (serializing happens with JSON.net by the way, not with the .net serializer). I’m not going to dive very deep in WebAPI, there are a lot of bloggers out there that know way more about this stuff than I do. We’ll be using the default GET method from the ValuesController.

Code Snippet
  1. // GET api/values
  2. publicIEnumerable<string> Get()
  3. {
  4.     returnnewstring[] { "value1", "value2" };
  5. }

This just returns a collection of two strings.

Next step is adding a Windows Phone 8 project to the solution (a simple basic project started from the normal template). Now we have two projects in one solution that both need to start up. We could launch the api without debugging and launch the WP8 app in debug mode or we can set them both to launch at debug by selecting multiple startup projects in the solution properties.

You can easily see that the settings have applied successfully if no project in the solution is bold anymore.

Okay, time to hook them up. We’ll need two things, the IP address of the pc running IIS Express and the port that the ASP.net project will use. Getting the IP address should be easy, just enter ipconfig in a command prompt. To find out the port, navigate to the properties of the ASP.net project.

In the Web tab of the properties you can see the project url for the website, that url contains the port that will be used.

Time for some coding, in the Windows Phone app, add a constant that holds the url to the website.

Code Snippet
  1. privateconststring Url = "http://192.168.0.116:7145/";

And the code to fetch the REST data

Code Snippet
  1. privatevoid FetchData()
  2. {
  3.     WebClient client = newWebClient();
  4.  
  5.     client.DownloadStringCompleted += ClientOnDownloadStringCompleted;
  6.  
  7.     client.DownloadStringAsync(newUri(Url + "api/values"));
  8. }

The callback will use Json.net (added through NuGet) to deserialize the values into a List<string> that is then set as the ItemsSource of a LongListSelector.

Code Snippet
  1. privatevoid ClientOnDownloadStringCompleted(object sender, DownloadStringCompletedEventArgs downloadStringCompletedEventArgs)
  2. {
  3.     if (downloadStringCompletedEventArgs.Error == null)
  4.     {
  5.         var values = JsonConvert.DeserializeObject<List<string>>(downloadStringCompletedEventArgs.Result);
  6.  
  7.         ValueList.ItemsSource = values;
  8.     }
  9. }

All in all pretty easy but this won’t work because IIS Express is bound to localhost only by default, we’ll need to change the config to allow external connections.

The configuration of IIS Express can be found in the applicationhost.config xml file found in %userprofile%\documents\IISExpress\config (just copy-paste this path into the Windows 8 start screen and press enter)

Open the XML file and search for the name of your ASP.net project. It should look something like this

Code Snippet
  1. <site name="IisExpressDemo" id="13">
  2.     <application path="/" applicationPool="Clr4IntegratedAppPool">
  3.         <virtualDirectory path="/" physicalPath="c:\users\nico\documents\visual studio 2012\Projects\IisExpressDemo\IisExpressDemo" />
  4.     </application>
  5.     <bindings>
  6.         <binding protocol="http" bindingInformation="*:7145:localhost" />
  7.     </bindings>
  8. </site>

Line 6 contains the binding, copy this line and paste it underneath, change localhost with the IP address of your pc, like this

Code Snippet
  1. <site name="IisExpressDemo" id="13">
  2.     <application path="/" applicationPool="Clr4IntegratedAppPool">
  3.         <virtualDirectory path="/" physicalPath="c:\users\nico\documents\visual studio 2012\Projects\IisExpressDemo\IisExpressDemo" />
  4.     </application>
  5.     <bindings>
  6.         <binding protocol="http" bindingInformation="*:7145:localhost" />
  7.         <binding protocol="http" bindingInformation="*:7145:192.168.0.116" />
  8.     </bindings>
  9. </site>

Close the IIS Express server if it’s still running and run the project.

Now there’s a pretty big chance that you’ll see this.

Visual Studio 2012 needs to be started as administrator to allow IIS Express to create bindings for external connections, so if you get this error, close and restart Visual Studio 2012 as an administrator.

Run the project again and the Windows Phone application should be able to fetch the data from the API.

 

Conclusion

In this post I’ve talked about opening up your IIS Express development server to allow external connections. This is needed to allow the Windows Phone 8 emulator to connect to websites or APIs hosted locally. It’s basically two steps

  • Add the IP address of your pc to the IIS config
  • Launch Visual Studio as administrator to be able to set the binding

 

Leave a Comment