Develop Facebook apps from the comfort of localhost with Forward

Forward gives you a public URL for your local dev site, letting you easily develop Facebook Canvas and Page Tab apps without having to deploy to a test server hundreds of times.


Using Forward to develop a Facebook app locally

Once you've got your project running locally with PHP, Rails, Django, or whatever you're using, all you need to do is get Forward, and update your Facebook App's settings.

  1. Get Forward

    First, create a Forward account if you haven't already (it's quick and painless—no credit card required).

    Now to install Forward.

    Forward needs Ruby and RubyGems to run. They come pre-installed on Macs, but if you're on Windows and haven't installed them yet, check out our Ruby installation guide for Windows.

    Once you have Ruby, open your Terminal (or Command Prompt), and enter:

    gem install forward

    That's it! Forward will install and you're ready to go.

  2. Start Forward

    In your Terminal, enter:

    forward 3000

    Forward will start and give you a Forward URL. If you have a Solo account, your URL should look like example.fwd.wf, and if you're on Business or Small Business account, it should look like x3y-example.fwd.wf. If your local dev server is running on a port other than 3000 (like 8888 or 8000), pass that in to the forward command instead. If you're using virtual hosts, you can pass in the virtual host name instead of a port: forward example.dev.

    Now let's pick a specific prefix to be used in the Forward URL for our Facebook app. Press control + c, to stop Forward. And now, enter:

    forward 3000 fbapp

    And you should get a Forward URL that looks like fbapp-example.fwd.wf. We'll use this whenever we want to Forward our Facebook app so we won't have to keep changing our Facebook app settings. By default, if you're on a Business or Small Business account (or you already have a Forward tunnel open on a Solo account), Forward will add a random prefix to your Forward URLs. But if you specify your own prefix, Forward will use that instead.

    If your local dev server is running on a different port (e.g. localhost:8888 or :8000), replace 3000 with the port you're using.

    Now we just need to plug our Forward URL into our Facebook App settings.

  3. Update Facebook App Settings

    Head over to developers.facebook.com and edit the settings for your test app (or create a test app if you haven't yet).

    Canvas Apps

    Click to expand "App on Facebook", and put your Forward URL in for both "Canvas URL" and "Secure Canvas URL", using http for the Canvas URL, and https for the Secure Canvas URL.

    You're all set! Now you should be able to open your test app on facebook.com and see what's running on your local dev server.

    Page Tab Apps

    Configuring a Page Tab app is more-or-less the same as a Canvas App. In the screenshot below, we've configured both a Page Tab app and a Canvas app to run off the same local dev site: