Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



Configure local machine for Facebook testing

If you are like me you are lazy about having to keep uploading files to an external server just to test them. That is why Google provides us with the Google App Engine launcher. Unfortunately it is a bit harder when developing Facebook applications to test locally. Facebook needs to make calls to your server and normally you might be tempted (forced) to test on a live server - perhaps even a production server. This is just irritating. When I compile a new SWF file, I don't want to have to upload anywhere it to see how it works with Facebook.

This articles describes how to make Facebook talk to your laptop or your desktop computer - or any machine you are working on instead of regular web server. This is a long processes but hopefully most steps you already have completed by virture of you being a developer. But first the requirements. First, I'm assuming you are not too new to Facebook app development and you are familiar with the Google App Engine and Apache. The setup assumptions of this are that you are using a system like mine:

  1. Windows 7
  2. A registered Facebook App that you are developing
  3. D-Link router (you can have different)
  4. Google App Enginge (not necessary)
  5. Apache server (you can set one up as we go)

The main steps involved are:

  1. Setup an Apache web server
  2. Install PHP
  3. Load PHP module openSSL
  4. Configure router to act as virtual server
  5. Configure Facebook App to your computers IP address
  6. Configure Google App Engine
  7. Setup crossdomain.xml policy file
  8. Actionscript code
  9. PHP code

Install Apache server

If you don't have an Apache server installed download the SSL version for windows. If find that Apache works best if you install it off the root, as in "C:\Apache2.2" instead of from the program files dir. So be sure to do that. I mean it. We will configure Apache later, for now we'll just install everything we need.

Install PHP

Download the correct copy of PHP. You need a ZIP file of the "VC6 x86 Thread Safe" versions. The VC9 version might be ok. Unzip this into a folder off your root "C:\PHP".
Make a copy of "C:\PHP\php.ini-recommended" and rename it "C:\PHP\php.ini".
Edit php.ini and do the following changes:




Configure router to act as virtual server

Next you need to setup your router to redirect incoming requests to where you'll have the your Facebook app on your harddrive. For example your external IP might be 174.3.23.255 (visit http://whatismyip.com/ to find out) but you want to run locally, perhaps on 192.168.0.100. Therefore you need to tell your router to map 174.3.23.255 to 192.168.0.100. But you must also set a port. So you will see that in the example below. configuring your router to server your web site

This allows external computers to find the web site you are running from your laptop.

Configure Facebook App to your computers IP address

Now configure Facebook to go to your local computer to get your app. I assume you already know how to setup a FB app. So go to the setup screen for the app and enter your external IP like so: configuring your facebook app to find your home computer

Configure Google App Engine

I would assume you already have GAE installed but if not do so. The key here is to setup your GAE app for your local IP and a port different from your Apache port.
Open GAE
Select your installed GAE app from the list.
In the menu choose "Edit">"Application Settings...".
Choose a port from which to serve your GAE server. This port MUST be different from the port you setup for your Apache server. I think 8080 is a good one.
Under "Launch Settings">"Extra command line flags:" enter a line for the IP you set your router.
example: "--address=192.168.0.100" (without that quotes)




Setup crossdomain.xml Policy File

If you don't know what a cross domain file is, Google it. You need one to inform a Flash app that it is allowed to read data from the specified server. In other words, if your Flash app isn't running from the correct IP, then it cannot access your GAE server. Therefore your GAE must serve your crossdomain.xml file. To do this you must tell GAE how to serve the crossdomain.xml file in your app.yaml file.

  1. In your apps GAE folder, create a new folder called "static"
  2. Put your crossdomain file into the /static folder
  3. In app.yaml, under "Handlers:" add a section like:
    
    - url: /crossdomain.xml
      static_files: static/crossdomain.xml
      upload: static/crossdomain.xml
      		

Actionscript code

Now you need to tell your actionscript code what to do. Remember this is just a test/debug setup. So have a static variable specifying what IP to use to access your GAE database, ex: GAEUrl="http://192.168.0.100:8080/". All your calls to your data will then hit your GAE server.

PHP code

This is important but very subjective. Most likely you'll be server your HTML page out as PHP. That will include code to manage and show your SWF file. Be sure to remember our setup.
GAE calls are made to "http://192.168.0.100:8080/"
Facebook callbacks use your external IP http://174.3.23.255" (with port if set)

Conclusion

To summarize, you are running 2 servers on your local machine. GAE and Apache. Apache serves our your webpage to Facebook. Facebook knows about it, because you gave Facebook your machine's external IP. You configured your router to map your external IP to a local internal IP on a different port than GAE runs. GAE is setup on the local internal IP on a different port than Apache runs. Once these are setup the software (Actionscript, PHP) just need to correctly call the appropriate addresses.



Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/GAE-facebook-win7.html'>Google App Engine on Facebook</a>