How To: Local Facebook App Development

Introduction

Developing any computer application is a process that will inevitably involve many mistakes, bugs, and other trials. Indeed, half of writing an application is just testing the code to make sure it behaves correctly, and scratching your head when it doesn’t. Clearly, you want to shield your end-users from experiencing the app in such a state. So, one important and popular web application development technique is to have a local test server for development, only pushing code to the live server after it has been appropriately tested. This is a relatively easy process, especially if your local server (be it your laptop or some other computer on your local network) runs the same OS as your server.

Writing Facebook apps adds a layer of challenge to this development pattern, since you can’t exactly download the Platform and run it on your computer, and anyway with all the overhead you wouldn’t want to. Furthermore, each app has a specific server to which it is linked, and there’s no current way to list “test” servers alongside the live one. Hence this tutorial.

(What follows assumes you’re already somewhat familiar with the Facebook Platform and the Developer Application, and, obviously, that you know how to write an application. If not, go to Facebook’s Developer page for more information).

Step 1: Preparing Your Local Environment

The first part of local prep is to ensure that your local server has web server and script interpreter software installed. By far the most common arrangement of these is the LAMP set-up (Linux/Apache/MySQL/PHP). Various LAMP (or “WAMP” for Windows) installer packages exist for just about every platform. In Ubuntu, simply search for the individual packages and install them. For Mac OS X, I like Marc Liyanage’s packages here. For Windows, I have used WAMP Server.

Once you’ve got your server operating locally, the next step in local Facebook app development is ensuring that your local server can be accessed from the external web. There are a number of ways to do this, but unless your server has a dedicated external IP, it will involve port forwarding from your internet gateway (perhaps a DSL modem and router) through to your server. Since each internet gateway is different, the actual steps in the process will themselves differ, but basically, you need to ensure that port 80 is passed from your gateway to your server. It makes it easier if your computer has a static IP internally, that way you can forward port 80 to that IP and you know it will always go to your server. Otherwise, every time you reconnect your server/computer to the local network, you may have to change the internal IP address to which you’re forwarding port 80. To get instructions for forwarding with your particular router, check out portforward.com.

Third, you need to find the external IP for your internet gateway. If you already have a dedicated IP, you’re set. If not, you need to find out what your external IP is. The easiest way to do this is to go to whatismyip.org. Copy and paste what you find there, and save the IP for later.

Finally, ensure your web server accepts connections from the wider internet by pasting the IP into the address bar of your browser. If you get a response from your server, you’re good to go! If not, you need to fix your server set-up, or if your server works fine locally, your port forwarding. Note that if you have a home network with an internet gateway (DSL router) and a wireless router, and you’re connected to the wireless router, you’ll need to forward port 80 from the gateway to the wireless router first, and then configure the wireless router to forward port 80 to your computer. This is a complicated set-up, but hopefully isn’t too common.