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…
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.
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>
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.
4. Select your development machine and you’ll be given a code.
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.
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.
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