Or "How to set up localhost to test Facebook applications"
How do you set up a localhost Drupal environment that can be accessed from the Internet? This article walks through setting up a Dynamic DNS service so that you can use your laptop for developing applications that need to interact with web service consumers, such as Facebook.This article is primarily aimed at people who need to make their local development environment visible to the Internet. If you are interested in developing Facebook applications your ears should be perking up at this point. If you are interested in hosting your own website from home, there are more things to be considered than are covered here, so you should make sure and read some of the more authoritative articles on the topic.
The Facebook dilemma
Most Drupal developers use local copies of Apache, MySQL and PHP to develop their sites on their desktop or laptop machines. They then upload Drupal files and database dumps to a hosted web server when it is time for the site to go live. The model of working on a local site is great and saves a lot of development time because you can use good tools like Komodo, and you don't get bogged down by network lag.
Testing webservices is usually not a problem for the local installation because the vast majority of all Drupal sites are web service consumers. They access APIs from Amazon, Google, EBay, PayPal, Digg and Twitter using any number of HTTP based protocols. In almost every case the Drupal site instigates the web service transaction. Your local website knows how to find Amazon's services, so initiating the exchange isn't a problem.
This last detail is important because it is exactly where things change with Facebook. Facebook and its newly released API represents a new generation of web services in that Facebook is as much a web service consumer as it is a provider. Whereas Amazon's services sit and wait politely for your site to interface with them, Facebook is usually the initiator of any interaction between Facebook and your Drupal site.
Because your Drupal site must be available to Facebook during the entire development cycle of a Facebook application, your localhost environment will be inadequate unless you take some extra steps. The extra steps in this case are to use a service called Dynamic DNS to map a host name to your local development environment, and that is what I'm now going to show how to do.
The rest of this article assumes that you have a local instance of Apache (or some other web server) running on localhost:80. See this Lullabot article for instructions on setting up your local Drupal development environment if this is not the case.
What is Dynamic DNS and how do I get some?
Dynamic DNS is a service that keeps track of the IP address of your local machine and routes traffic for a particular host name to that IP address. This is useful when your internet service provider (ISP) assigns you a new IP address every time you make an Internet connection.
Normally, you map a domain, example.com, to an IP address like 184.108.40.206. This mapping then gets disseminated around the Internet and cached in a myriad DNS servers. The caching and disseminating is great when the mapping stays the same for a long time because it makes lookups fast and distributed. This feature of the system makes changing the mapping a lengthy process because that distributed cache needs to get updated. This can take 20 minutes to two days... not exactly the agility that you'd need if your IP changes once a day or more.
Dynamic DNS services consist of two parts. First, they provide normal DNS service for the host name in question. The difference is that the maximum caching time is set to a very low interval, such as 60 seconds. This prevents the DNS information from being cached in any other DNS servers and forces every lookup to be answered by the primary DNS server itself.
Second, the machine with the variable IP address needs a mechanism for telling the Dynamic DNS service provider what its current IP address is. This is done either by configuring your router to provide the service or by installing a software client on your computer to ping the DNS provider any time your IP changes.
Thus the first step in getting a Dynamic DNS hostname set up is to find a service provider. I chose DynDNS and will use them for the rest of demonstration. There are many other services available, however.
Setting up a DynDNS account
Getting an acount from DynDNS.com is easy. Make sure to remember your password (or if you generate it like I do, write it down), because you will need it later when configuring the router or the software updater. Once you've logged in to DynDNS.com using your new credentials, click New DynDNS Host to pick your hostname. While it is possible to register a domain and have that be managed by DynDNS, I found it more convenient to use one of the hostnames that they make available to you. After all, this is just to simplify my development process, not to host a real website from my laptop. Figure I shows how I configured the host. The IP address turns out to be irrelevant on this form because it is the task of the router or updater to keep DynDNS informed of this number.
Figure I: Adding a DynDNS host
Getting the updater
Next you need to decide how you're going to keep DynDNS updated with your latest IP address. They strongly advise using a software agent, and that's what worked best for me as well. I downloaded and installed the updater client for my platform according to their instructions.
Figure II: The DynDNS software updater
Know your network topology
Before you proceed with configuring the updater software and possibly your router, a brief discussion of network topology is in order. If your computer is plugged directly into something like a cable modem then it could be that the IP address assigned by your ISP belongs to your computer directly. If you have several computers on your home network, or if you use WiFi, your computer has an IP address on your local network and your router has the IP address assigned by the ISP. If you have a router, it's IP address must be sent to DynDNS and the router must be configured to forward the appropriate incoming traffic to your machine.
Figure III: Topology of a home network with wireless router
Figure III shows the network topology of my home network, which I suspect is typical for many readers, and how it relates to the DynDNS service. The important details are that the router owns the public IP address and thus receives incoming requests for lullabot.kicks-ass.org. It must know to forward these requests to my laptop. Furthermore, the software updater must know to send the IP address of the router to the DynDNS servers.
Configuring the Updater
Once the software updater is installed it needs to be configured to send update notifications to DynDNS every time you get a new IP address. The first step is to add a new user. This is where you enter the username and password from your DynDNS account so that the updater knows how to authenticate with the DynDNS servers. If you have already added a host to your DynDNS account the updater will find it and import it when the new user is created. Otherwise you can add the host manually.
The most important configuration option for hosts is the Interface selection. This is how you describe your network topology to the updater so that it knows which IP address to send to DynDNS. In my case, and for the topology shown in Figure III, this should be set to External (bypassing Proxy). Based on your knowledge of your own network you may have to try the other options before your DynDNS works properly.
Figure IV: Configuring a host for the updater
Configuring the router
The missing link in the chain is the connection between the router and your computer. The router must be told to forward incoming traffic on port 80 (the port used for normal website traffic) to your computer's IP address. Most routers have some sort of built-in web server that lets you configure them. On mine, a FRITZ!Box Fon WLAN 7170, I type http://192.168.178.1/ into my web browser and the administration application for the router appears. The details for your router may vary but it is the same process you used when you secured your wireless network (which you've done, right?) The relevant options from here on are a matter of discovery, but you're looking for an option that lets you set up port forwarding. My router speaks German.
Figure V: Setting up port forwarding on the wireless router
Your computer's firewall
Let's recap what has been done so far. DynDNS knows to match a host name (lullabot.kicks-ass.org) with the IP address of your router. Your router knows to forward traffic coming to it to your computer's IP address. Your computer knows to notify DynDNS whenever your IP changes. At this point, theoretically, a request made to http://lullabot.kicks-ass.org should return the same website that http://localhost does. The reason why this may not be the case is Ye Olde Firewalle. The same piece of software that keeps your computer nice and safe from Internet Bad Guys might also be holding up your efforts to host a website accessible to the world. Here is how I configured my MacBook's firewall to allow incoming traffic to my web server.
- Open up System Preferences.
- Choose the Sharing configuration pane.
- Go to the Firewall tab.
- Make sure the firewall is turned on. You can test whether or not the firewall is indeed blocking access to your local site by temporarily turning it off and accessing the domain name in your browser. If your site now appears, you know that the firewall was the culprit. Remember to turn your firewall back on.
- Add a new firewall rule called Apache and open up TCP port number 80.
- Make sure that the new rule is active.
Figure VI: Configuring your firewall in Mac OS X
On to Facebook
This isn't really an article about Facebook, but if you are in the business of developing Facebook applications you'll immediately see the benefit of being able to give Facebook your new Dynamic DNS hostname and develop the application locally. For instance, using Komodo, you'll be able to set a break point in the Facebook libraries and see exactly which methods get called and what their return values are when you access your application in Facebook.
As with anything in software, if you run into troubles you may have to do some creative problem solving. Please share your successes, failures and suggestions in the comments below. Feel free to ask questions, as well. Lullabots will do their best to answer!