During the development of a Facebook application, an often desired option is to to host that applications on a local machine or even a personal laptop.
This post will walk you through the steps to setup a Facebook development machine. I develop using a VPC image. You can find steps to setup your own VPC development image here (part I, part II, part III). If you are not using a VPC image, skip any steps related to VPC setup.
One caveat before we get started. This requires you to have administrator access to your WIFI access point. This will not be possible to do at Starbucks or your favorite local WIFI spot.
Setup Your VPC Networking Adapter
If you’re developing using a VPC, you will need to make sure you are using one of the Network Adapters built into your machine. Select your VPC Image in the VPC console and click Settings. Select Networking. Pick one of the Network Adapters. If you’re going to be connecting using a wireless connection, select the wireless adapter. Likewise, if you’re going to connect by wire, pick the Ethernet connection.
Do not pick Local Only, Shared Networking (NAT), or Not Connected. These will not allow proper pass-through of network calls. At this point, you will need to restart your virtual machine.
Get Your IP Address
You will need your IP address for several steps in our walk through. The easiest way to obtain your IP address is to visit whatsmyip.org. This site will detect your IP address and display it on the screen. Write the address down. You will need it later.
Update Your Hosts File
The next step is to update your hosts file. This will create a pass through between the incoming request on your IP address and your local image. Browse to your hosts file. It can be found at windows\system32\etc\ in WinXP machines. For Vista, the hosts file is found at windows\system32\drivers\etc. Open the file using Notepad. Add a new line and enter 127.0.0.1 at the start of the new line. Tab over and enter your IP address. In the image below, your IP address would replace 999.999.999.999. Save the file.
Update Your Routing Tables
Now that we have your IP address and the hosts file updated, it’s time to update the routing table in your Wifi/Router. You will need Administrator access to your Wifi Access Point for this step. Log into your router and browse to the Routing Tables. This can have many different names depending on the brand of your Wifi/Router. For my Belkin Router, it’s call Virtual Servers. Setup will be similar to the image below. Set the inbound port to port 80. Set the IP address to the local address of your development machine. This can be found somewhere in your router. It is not the IP address we got in step 2.
Once your entry is setup similar to entry #4 above, apply the changes.
Open a Hole in the Firewall
Next we need to open up a hole in our firewall to allow traffic through on port 80. For this walk through, we’re going to assume the use of Windows Firewall. If you’re not using Windows Firewall, configuration on your firewall should be similar. Open Windows Firewall and click Change Settings. Select the Exceptions tab. Click the Add Port button. Give the open port a name, enter 80 for the port to open, and leave TCP selected. Click OK.
Create Your Site
Now it’s time to write some code. For this example, we’ll create a new website. File -> New Website -> ASP.NET Website. Be sure to save the site outside of your documents folder. This will save you the headaches of dealing with permissions and messing with the site ACLs. To make this as simple as possible, we’re going to delete everything from the Default.aspx page except the @Page declaration. We’ll then add the following code to the page
<h2>Debug Test Site</h2>
Now you should only have the original @Page declaration and the line of code above. Save the Page.
Update Facebook to Post to Your Site
Browse to the Facebook Developer’s Site. Select your application. Click on the Edit Settings link. Select the Canvas tab. Update the Canvas Callback URL with your IP Address from step 2. In the image below, you would replace 999.999.999.999 with your IP address. If your test site’s location is at the localhost root, be sure to remove the testsite addition in the Canvas Callback URL box.
Have Fun and Host Away
Browsing to your application should yield the following results.
At this point, everything should be setup and you can start hosing and debugging your application.
