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.

Step 2: Preparing Your Test Facebook App on Facebook

Since Facebook doesn’t allow you to have a “dev mode” for your new application, you’ll need to create a whole new test application. Call it whatever you want. Make sure to give it all the same settings as your real app, except (1) Use the IP you copied in the last step for your server (plus any subdirectories you may be using), and (2) Make sure you pick a new name/canvas page URL for the test app. Most importantly, check the box that makes the app restrict adding to developers only (so random people can’t add it)!

When your app is successfully created, note that it has a different API key and secret key than your “live” app. Copy these values down somewhere.

Step 3: Coding Your App / Modifying Your App to Run Locally

If you haven’t coded your app yet, now’s the time to do it.

If you have, you’ll need to make a few changes to ensure it runs locally. First, replace your API keys with the test ones. Second, make sure that any references in the app to your live server are changed to your local server (for images, urls, etc…). Third, ensure that your database connection strings are valid for your local database.

…And that’s it! (One word of caution, however: given that your test app is, to Facebook, actually a different app than the live one, your app’s functionality vis-a-vis the “friends” system will be hampered somewhat. One way around this is to designate a few volunteers as developers also, so you can test multi-user behavior. Also, you will want to be careful with News Feed actions and stories, since these will actually show up on the live site, but may confuse your friends who see them.)

Anyway, you should now be able to add your test app on Facebook and Facebook will query your local server for its pages. You can make changes to the code and see them reflected instantly, without uploading anything. This is by far the most efficient way to develop, or continue development of, a Facebook app.

Step 4: Avoiding Dev/Live Sync Pitfalls

A problem exists, if you’ve followed the instructions faithfully: You now have two apps, one local and one remote, each with its own version of the code. Your well-tested local app now contains the newer (and better) code, but if you just uploaded it to the remote server, or committed it to your versioning software (I heartily recommend using SVN, by the way), you would overwrite all the live server’s settings, including API keys, local URLs, database connections, etc…

The best way to get around this problem is to extract all such settings to an environment file which is required by and parsed before all other scripts. In my environment file, I define PHP constants like API keys, database connection information, server IP, and so on. These constants will then be available for my app, and will be appropriate to the server at hand. This environment file should never be added to SVN or uploaded to another server, because it only pertains to its own locale.

With this technique, you can happily “svn ci / svn up” or FTP upload your code revisions from your local dev server to the remote live one, and they will take effect at that time, while still using the server’s own particular settings.

Conclusion

I hope that this tutorial has been useful. There is really no more efficient way to develop than when your local code changes can be tested immediately. But one reminder: if your internet gateway is restarted or acquires another IP address somehow, you will need to change the test app’s settings on Facebook (and any references of your own to that IP) to reflect this. Also, if you are traveling and using someone else’s internet, you’ll need to have access to their router to go through the steps above of ensuring port 80 forwarding to your machine, adjusting the test app’s server settings on Facebook, etc… Still, I have done this at a number of houses around the US, and it has worked like a charm.

Another alternative is of course to use a service like no-ip.com, which tracks your gateway’s IP changes and allows you to always access it using a certain domain name. If you do move around a lot, this could be a time-saving solution (though you’ll still need to pass port 80 to your box).

If you have any tips, techniques, or strategies of your own, please leave them in the comments!

[tags]facebook,apps,local-development,development,how-to,tutorial,facebook-apps[/tags]

Social Media 101

Mediabistro Course

Social Media 101

Get hands-on social media training for beginners in our online boot camp, Social Media 101! Starting September 4, social media and marketing experts will teach you the best practices to be successful on social. Hurry, this boot camp starts next week! Register now!

 

Leave a Reply

8 Responses to “How To: Local Facebook App Development”

  1. sideshow bob says:

    You can avoid the port-forwarding/NAT traversal/firewall morass with some SSH hax:

    http://blog.evanweaver.com/articles/2007/07/13/developing-a-facebook-app-locally

  2. Keith Hanson says:

    Or you could just switch to Rails or Merb and Ruby and just use Capistrano for your pain free deployment. *grin*

  3. Larry Rubin says:

    Great article Jonathan. This post and the others on your site are extremely informative and timely.

    One quick note about custom configuration files and the build and release process-

    In most cases you probably do want to track the revision history of your environment configuration files in source control- especially if those files are lengthy or difficult to reconstruct (as they usually are). That way you’ve got a known good copy in the event your live config goes bad or gets accidentally deleted.

    I usually have a unique configuration file for each environment, and use a build script with a target of QA, PROD, etc. to tell the script which config file to push. This can be refined further by adding arguments of “code”, “config”, or “code+config”, in order to leave things alone that haven’t changed.

    Keep up the excellent reporting! :)

    Cheers.

  4. Jonathan Lipps says:

    Good tip, Larry. Losing the config data would be bad, indeed. For developers who don’t want to build a push script, however (if for example this would be the only aspect of the dev cycle requiring a push script as opposed to simple version control), it could be a bit cumbersome. I’m interested if there are any other solutions?

  5. july link overload! « Vinu’s Online Cloud says:

    [...] Inside Facebook » How To: Local Facebook App Development [...]

  6. Will says:

    Hi, thanks for the tutorial. It would be helpful if you could mention downloading the facebook library and where to install it within WAMP. The facebook site doesn’t explain it either at least for WAMP installs.

  7. Set up a remote forwaring port to develop Facebook apps locally « Ramblings says:

    [...] though. I hadn’t done remote port forwarding before but in starting to look for a solution, a comment on a post here said what I wanted to here. “Avoid the port-forwarding/NAT traversal/firewall [...]

  8. How to Develop a Facebook App on Your Local Server using SSH « André Pareis says:

    [...] local development environment usually includes some network setup, for instance as described here: http://www.insidefacebook.com/2007/07/16/how-to-local-facebook-app-development/ However, I find these router and network setup design troublesome and I also want something that is [...]

Get the latest news in your inbox
interested in advertising with inside facebook?

Social Media Jobs
of the Day

Senior Social Media Strategist

Current
Chicago, IL

Community Manager

Uncharted Play
New York, NY

Social Media Editorial Fellowship

Brooklyn Magazine
Brooklyn, NY

Assistant Social Media Editor

The Daily Dot
New York, NY

Communications Specialist

National Nurses United
Oakland, CA

Featured Company

Join leading companies like this one and recruit from the nation's top media job seekers on the Mediabistro Job Board. Every job post comes with our satisfaction guarantee. Learn More
 

Our Sponsors

Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us