Setting up Your Development Environment

Welcome to the Facebook Instant Games SDK Tutorials. This series of tutorials covers many aspects of using the Facebook Instant Games SDK.

In this tutorial we will take a look at setting up your development environment to work with the Facebook Instant Games SDK.

What you will need

In order to test locally you will need to set up your own server on localhost. You are going to need:

  • A valid Facebook Instant Game App ID (you can see this at the top of the page in the developer dashboard for your app)
  • OpenSSL (to generate a certificate)
  • Node.js (to run the server)

Creating a Local Server

I created a small test server that supports SSL locally which you can download from here. The only things that you need to do are:

  • Install OpenSSL
  • Install Node.js
  • Download and unzip the zip file you downloaded into a folder
  • Run the “gencert.bat” batch file to generate the SSL certificate files needed by the server
  • Open a Node.js command line prompt, switch to the folder containing server.js and run “npm install” to install node module dependencies
  • Run the “run_server.bat” batch file to run the server

You should now have a local server with https support working.

Running your Game Locally

To run your game locally ensure that the local server is running then:

  • Copy your HTML, CSS, JS and assets files into public sub folder of the server folder
  • visit the following URL in your browser:
    https://www.facebook.com/embed/instantgames/{YOUR APP ID GOES HERE}/player?game_url=https://localhost:8080/

Replace {YOUR APP ID GOES HERE} with your app ID as shown in the developer dashboard.

Note that you may be presented with a 0% loading bar initially. If this happens then visit https://localhost:8080 in your browser and authorise access and re-launch your instant game.

Running your Game on a Mobile Device

To run your game on a mobile device you need to firstly zip up your html / css / js and asset files (NOT the server part) and upload this zip file under the Web Hosting section of your instant Game in the Facebook developer portal. Once uploaded click the Push to Production button. You can then find your game on mobile in the games section of Messenger and run it.

Adding a Bundle Config File

The Bundle Config File (fbapp-config.json) is now a required file which must be added to the zip file before you can upload it. This file has some basic information about your app. A minimal file is shown below:

[sourcecode language=”js”]
{
"instant_games": {
"platform_version": "RICH_GAMEPLAY",
}
}
[/sourcecode]

Create this file, add the above and add it to your zip file. Note that there are many options that can go into this file. See https://developers.facebook.com/docs/games/instant-games/bundle-config/ for more details.

Debugging

Probably the easiest way to debug your game is to run it in a desktop web browser such as Chrome or Firefox and use the developer tools to examine the debug console etc.. This isn’t however possible for mobile devices as they have no web developer tools built in. You can however on Android use Android Debug Bridge (ADB) to view console output from your game. To get this to work, plug your Android device into a desktop via a USB cable and run “adb logcat”. Note that you will need to enable developer mode on the Android device and install the Android SDK platform tools to your desktop in order to use ADB.

Unfortunately on iOS there is no such tool so you will either have to use event logging with Facebook Analytics or write you own local server to which you can send messages to log.

Leave a Reply