Using Visual Studio + IIS Express + Adobe Shadow to Test Local Websites on Mobile Devices

Have a bunch of mobile gadgets at your disposal and want to view your website on all of them when you hit F5? Read on…

I was playing with the recently released Adobe Shadow and found it soo darn cool! I view a website in Google Chrome and it instantly causes my iPad, Samsung Galaxy S II Skyrocket and iPhone 3GS to request the website automagically!

Now, of course, I was not satisfied with this… I got to thinking… wouldn’t it be cool if I could work on a website in Visual Studio and then when I run it locally, have all those devices request the website and display it automagically…. Awesome!

After quite a bit of work, here’s how I got it done…

IIS Express

When developing websites in Visual Studio, instead of using the standard ASP .NET Development Server, you can use IIS Express. You’ll need to do this to enable your websites to be viewed remotely.

1. Install IIS Express using the Web Platform Installer.

2. In Visual Studio, you can configure a website to use IIS Express by right-clicking on the project in Solution Explorer and choosing “Use IIS Express”.

If you want to make this the default setting for all websites, go to “Tools > Options > Projects and Solutions > Web Projects” and select ‘Use IIS Express for new  file-based web sites and projects’.

3. In Solution Explorer, when the project name is selected, click on the “Properties” tab and make a note of the port number (the number after the “:”). You’ll need this for the next step.

4. Open a command prompt in Administrator mode. To do this, go to “Start”, type “cmd” in the search bar and then, instead of pressing the “Enter” key, press “Ctrl + Shift + Enter”. Type the following at the prompt:
netsh http add urlacl url=http://<computer name or IP address>:<port number>/ user=everyone

5. To enable your site to be viewed remotely you will need to change a configuration setting. Go to: C:\Users\<User Name>\Documents\IISExpress\config\applicationhost.config

6. There will be an entry for each hosted website under the <sites> header. Locate your website:

7. Add a binding for either your computer name or IP address or both; if you don’t have a static IP, it’s best to just use your computer name. If you don’t know your computer name or IP address, open a command prompt and type the commands “ipconfig” and “hostname”, repectively.

Windows Firewall

I assume you are running behind a firewall. In my case, I use the standard firewall that comes with Windows 7. You’ll need to open up this port to inbound requests. For security reasons, you’ll probably only want to open up the port to devices running on your local network, and only when the network you are on is marked as “Private” (you set that setting every time you connect to a new network). If this is exactly the firewall setting you want to use, type this at the command prompt:

netsh advfirewall firewall add rule name=”<a name for your rule like IISExpressWeb>” dir=in protocol=tcp localport=<port number> profile=private remoteip=localsubnet action=allow

Another way to change firewall settings:

1. Go to Start > Control Panel > System and Security > Windows Firewall > Advanced Settings.

2. Select “Inbound Rules” from the left-hand menu.

3. Select “New Rule…” under the Actions menu on the right-hand side.

4. Select to add a “Custom Rule”. Settings you’ll most likely want to change are “Protocols and Ports”, “Scope” and “Profile”.


At this point, you should be able to run your website in Visual Studio and go to any mobile gadget on your network and use http://<computer name or IP address>:<port number>/<web page>


Adobe Shadow

1. First, you’ll need to install  Adobe Shadow. It consists of three parts, a server component that runs on your Windows 7 or Max OS X development machine, a Google Chrome extension, and Android and iOS apps for your moile gadgets. Note: All devices must be on the same network.

2. Run the server component, which you’ll find under Start > All Programs > Adobe > Adobe Shadow > Adobe Shadow

3. Open the app on your mobile gadgets; they should find your development machine.

Adobe Shadow App

4. Select your development machine and you’ll be given a code.

Adobe Shadow App Passcode

5. On your development machine, go to Google Chrome and you’ll see a small icon, ‘Sd’, next to the address bar. Click on this icon and you should see a list of your mobile gadgets. Select each gadget and enter it’s code.

6. You should now be synced. When you navigate to a website in Google Chrome you should see the site on all of your gadgets.

Visual Studio

If you want your F5 to automatically display your sites on all your gadgets, you’ll need to make sure that Visual Studio will open your website in Google Chrome. To do this, in Solution Explorer, right click on a page and choose “Browse With…” from the context menu. Then select Google Chrome from the list of browsers.

Because your remote gadgets can’t access localhost, change the default start action to explicitly use either your computer name or IP address:

On a website project: in Solution Explorer, right-click on the project and select “Property Pages” from the context menu. Then select “Start URL” as the start action and enter the url of the default page.

For a web project, select “Properties” from the context menu and then select Web from the left-hand side. Change the Project URL to use your computer name of IP address.

References:
Introducing IIS Express
Working with SSL at Development Time is easier with IISExpress
Run a Command as Administrator from the Windows 7 / Vista Run box
VS 2010 SP1 (Beta) and IIS Express
Accessing an IIS Express site from a remote computer
Test your website from your mobile device while still developing in Visual Studio
Cut the Cable: Configuring WebMatrix/IIS Express to work with WP7 on Windows 7
Serving external traffic with WebMatrix Beta
Adobe Shadow Simplifies Mobile Web Testing

Advertisements

9 thoughts on “Using Visual Studio + IIS Express + Adobe Shadow to Test Local Websites on Mobile Devices

  1. Fantastic – I needed to test the iPad using asp.net vs2010 web project. This explanation was the best after heaps of searching – well done to the author.
    I found that it only worked once I changed from using the computername to using the IP Address instead – works a treat!

  2. Thank you for the great information. I just needed to get IIS express set up to work only local network. Your instructions were great!

  3. Hi! I’ve followed your tutorial and everything works great on my computer – I got my website to run locally in IIS. But when I try to view it in Adobe Edge Inspect (formerly Shadow), it tells me it cannot open the page. Any ideas why?

      • The message is from my phone. I’m able to view other websites from my phone with no problem. I think the problem is indeed the firewall, but because I work at a university I am also behind the university’s firewall, which I can’t adjust. So I think it’s just not possible for me to use Adobe Edge Inspect, unfortunately.

      • I just wanted to let you know I tried running on port 80, but I still can’t see my website on my phone with Edge Inspect. It looks like it’s impossible for me to use this in my environment.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s