Live.js and Visual Studio Part 2 – Test All The Devices

This post is part of a series. Click for Part 1 or Part 3

In my last post I introduced live.js and showed how you could setup a visual studio project to use it to speed up your front end development work. Today I’m going to walk you through how to configure your development environment so external mobile devices can connect to the machine and you can get this same live refresh on multiple screens and form factors simultaneously.

The idea is to create a setup where you can layout all the devices you’re currently testing, and see your changes on them live without lifting your fingers from the keyboard. Ultimately, this is fairly simple with live.js, because live.js all runs on the client side. So long as the devices your testing supports javascript, it will live refresh just like the browser on your development machine.

The complication is that unless your development machine is running with a full blown version of IIS, by default it won’t allow external connections. Fortunately, this is fairly easy to overcome. First, make sure you’re using IIS Express, instead of the Visual Studio’s Web Development Server (also called Cassini). If you’re on Visual Studio 2012, IIS Express is installed and the default, but if you’re on an older version you may have to download and install it.  Note you’ll also need at least Visual Studio 2010 SP1 to make use of IIS Express.

Once you’ve got IIS Express installed, you can configure your project to use it. Go into the Properties section of your web Project and go into the “Web” sub-section. Look for the radio button labeled “Use Local IIS server.” This will ensure that visual studio uses the local IIS Express server you just installed.

However, by default IIS Express won’t allow external connections either. To resolve that, we have to edit the IIS applicationhost.config file, found at C:\Users\<you>\Documents\IISExpress\config. You can usually just do a file search for IISExpress to get there. In this file look for the node <sites>. It should look something like this.

<site name="WebSite1" id="1" serverAutoStart="true">
<application path="/">
<virtualDirectory path="/" physicalPath="%IIS_SITES_HOME%\WebSite1" />
<binding protocol="http" bindingInformation=":8080:localhost" />
<logFile logFormat="W3C" directory="%IIS_USER_HOME%\Logs" />
<traceFailedRequestsLogging directory="%IIS_USER_HOME%\TraceLogFiles" enabled="true" maxLogFileSizeKB="1024" />
<applicationDefaults applicationPool="Clr4IntegratedAppPool" />
<virtualDirectoryDefaults allowSubDirConfig="true" />

Find the “site” node related to the site your working on and go down to the bindings node

<binding protocol="http" bindingInformation=":8080:localhost" />

In the bindingInformation attribute remove the string “localhost”. Then save the file. Now IIS Express will try to listen for external connections on that same port.

Unfortunately, just because IIS Express wants to listen for external connections doesn’t mean the OS will let it. You have to tell Windows that its okay for IIS Express to listen at that url. For that there are two steps.

First, you need to add an http namespace reservation to the OS that tells Windows IIS Express can listen at the specified URL and port. The easiest way to do that is run the following command at an administrative command prompt.

netsh http add urlacl url=http://*:8080/ user=Everyone

This will allow any user to listen for connections that make a request for port 8080. You’ll need to change the port number to whatever port your application is running on. If you want to be more restrictive, you can change the * to your machine name, or change the user to the specific user that IIS express is running under. The command above though will allow you to browse to the device with just the IP address, which is generally more convenient.

Finally, the last thing you’ll need to do is go to the Windows Firewall and add an new inbound rule that permits inbound traffic to the port your application is running on.


One thought on “Live.js and Visual Studio Part 2 – Test All The Devices

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s