Testing local sites from your phone with IIS Express

One of the key learnings I've discovered since diving into responsive web design is the value of testing on devices. Whilst developing its convenient to be able to access your local webserver from your phone so you can quickly and easily test how your site works on an actual device. Waiting until you've uploaded your changes to your live site to be able to test is obviously not ideal.

I've been using IIS Express with decent success throughout the development of my site's theme but it was a bit fiddly to get up and running to be accessible from my phone so here's some notes on configuring IIS Express. If you already have IIS Express up and running through Visual Studio or WebMatrix and just want to be able to access it from your phone see the note on adding a binding to an IIS Express site. If you're starting from scratch, read on and I'll explain the process without depending on any specific IDE. I would advise using at least WebMatrix to avoid having to dig through config files and the like but it can be useful to know what's going on under the hood.

Install IIS Express

Use the web platform installer to find and install IIS Express if you've not already got it. Once installed it's a good idea to just run the executable once at

%programfiles%\iis express\iisexpress.exe

Set up a site

You'll need a website (duh), this can be simply a folder containing a html file, a php website or an asp.net application. For the purposes of this tutorial we'll assume you've set something up in "C:\sites\my-awesome-site\".

Running IISExpress

IIS Express can be run via three different methods:

1. From a folder - you can point IISExpress at a specified directory and it will host the files contained within that directory.
2. From a predefined site - The current user's IISExpress configuration contains a <sites> section containing details of the available local websites (this section will be modified if using a tool such as Visual Studio or Microsoft WebMatrix).
3. From a separate config file - IISExpress can be launched specifying a specific configuration file which can contain all required site details.

The second and third approaches are very similar except the specified configuration file allows things to be kept a little more self-contained. This means you can share your configuration or commit it to source control without introducing a load of other irrelevant site configs too.

What?

This will make more sense with an example, assuming you have installed IISExpress and have a site folder ready:

To run the site directly from its folder, open a command prompt and run the following command:

    
"%programfiles%\iis express\iisexpress" /path:"c:\sites\my-awesome-site\"

    

This will spin up IISExpress using a temporary configuration file which is copied from a template at %programfiles%\IIS Express\AppServer\applicationhost.config. If you're hosting a simple html or plain asp.net site this is all you need to do. If using php then you will have to configure the template config file to support php which is a bit of a headache and basically not worth the effort.

To run a site using the current user's IISExpress configuration use the following command

    
"%programfiles%\iis express\iisexpress" /site:MyAwesomeSite

    

Now for this to work you will have to have MyAwesomeSite set up in your applicationhost.config. This can be done either through visual studio or WebMatrix but all these are essentially doing is modifying the config file at %userdocuments%\IISExpress\applicationhost.config

To set up your site open that file in a text editor and find the <sites> node. You should see an existing site called WebSite1, you can either copy this and create a new site or just change that one (if you copy it make sure to change the ID number). For our purposes we can change this as follows:

Now we can launch our site with the following command:

    
"%programfiles%\iis express\iisexpress" /site:MyAwesomeSite

    

N.B. If you simply changed the Website1 settings then this will be the default site that is started when you run iisexpress.exe so you can do so without the /site argument.

Finally, as I mentioned before, you can simply make a copy of the applicationhost.config file and place it anywhere (e.g. in your project's source folder). This is useful as it allows new users to the project the ability to share configuration. We can then launch the site with the following command:

    
"%programfiles%\iis express\iisexpress" /config:c:\sites\my-awesome-site\applicationhost.config

    

Finally we want to be able to view our site on our mobile phone. I'm assuming your phone is on the same wifi network as your computer so it will be able to access the computer by IP address.