Testing fb-instant-games through https://localhost:8080

I have created a simple game using cocos creator. When i test the game the games works fine both in browser and in the simulator. After building for fb-instant-games i upload the .zip file. the game works on the facebook platform. Great! Ok so now i try to implement some of the instant game functions. To start i just want to get the users name. I have followed these steps to set up and start an https server on the port 8080. (http://cocos2d-x.org/docs/creator/manual/en/publish/publish-fb-instant-games.html) no problem there. Then i navigate to https://localport:8080 and i have to (as described in the instructions) bypass the ssl error. The game doesn’t load. But at that point i didn’t worry because the docs say you need to embed the facebook game for it work using this url https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080. But then i get the same issue. The index.html file loads, all the resources load. Bu the game doesn’t initialize. So i thought id see if just running it without ssl would work by going directly to the build\fb-instant-games\ folder in my browser. Again it doesn’t load. If i right click and go to view source, the html is there. it is loading index.html. But the game doesn’t initialize and there is no errors in chrome console. I am stuck for where to look or what to do. The game works fine if i upload to facebook. but on my local machine the game does not load. so i can’t test the facebook integration without having to upload the files to facebook every time.

in chrome dev console while on this page https://www.facebook.com/embed/instantgames/my game id/player?game_url=https://localhost:8080 i get this error in chrome repeating itself over and over
project.js:1 Uncaught TypeError: Cannot set property ‘string’ of null
at CCClass.start (project.js:1)
at CCClass.eval [as _invoke] (eval at o (cocos2d-js-min.js:1), :3:65)
at CCClass.invoke (cocos2d-js-min.js:1)
at CCClass.startPhase (cocos2d-js-min.js:1)
at e.mainLoop (cocos2d-js-min.js:1)
at t (cocos2d-js-min.js:1)

if i just go to https://localhost:8080 i don’t get any errors. but as i say the game wont load either.

So it is because the problem about the Uncaught TypeError ?
Can you use debug mode to see what’s wrong with the project.dev.js?

I gave up on testing on my local machine. Just too many problems. I’ve gotten used to just build and upload via command line and then test on facebook.

But if you do get things sorted out I’d like to know what you did.

I could not find a fix to this error. However, What i did is; started a brand new empty project in cocos. Copied the scripts into the new folder. created the prefabs and set the scene tree again. Hey presto it worked. Sadly i cant tell you exactly what caused it or how to fix it. I discovered this by simply creating a hello world project and doing the exact same process. It worked. So i simply renamed the hello world project to my game and rebuilt all the prefabs and it worked fine. I’m going to make a video how to do it because i’ve wasted 2 days on this lol

1 Like

I tested Facebook Instant games with regular version of cocos2-hml5(not cocos creator). It worked great and all features were ok. Try to unminify your js file an check what causes the error.

Hey all,

@jare
For me it’s a different kind of issue.
when I try to run the local server

It opens up a page as the below image.
Does anyone know a fix for this ?

Ok… gotcha :slight_smile:

Remember the .zip file you’ve added to the FB web hosting, you need to click on the *(star) mark button to push it from standby mode to production mode.
It works fine then.

Also, for me I had to create the permissions file like this -
$ cd fb-instant-games
$ sudo openssl genrsa -out server.key 2048
$ sudo openssl req -x509 -days 1000 -new -key key.pem -out cert.pem

Just an FYI for anyone looking. :slight_smile:

I have the same issue and stuck it right now. Can you share me your solution to fix it.
And i have 1 more issue, my game just only run on computer browser (in facebook messenger of facebook.com), not run on mobile facebook messenger. Can anyone help me?

I’ve mentioned the fix for my issue above.
You need to click the star button to change mode from standby to production.

If you are not able to run in facebook for mobile, probably adding a platform is required.
Dig deep into their documentation.

You mean if i want to test on local, i have to up .zip file on FB web hosting? I just only want to test on local and do not upload anything to FB hosting.

Yes, you need to upload your build.zip file
As you can see in the documentation, to run the game in your local servers
you need to hit the below link right ?

https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080

So, you would get your ID after creating an instant app.
and the build binary will be taken from fb.
Don’t worry, at this point of time your app will only be visible to you, it’s not live in the market.
Unless you make it.

So, run the game follow this link:
https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080
it means the code which upload to host is running, not local code. Each time i want to change code, i have to upload and wait. That is so inconvenient.

So, for continuous testing and integration, use the simulator/browser play feature of cocos creator.

Testing build using the localhost, by uploading the build to FB, is more of a pre-production test, to simulate the stage environment of your application.
Everything cocos side you can do in creator, things which may involve the app to take FB help
e.g - Fetching FB data etc, there you may use the localhost option :slight_smile:

@pabitrapadhy thank a lot.
@jare Do you have any experience with black screen in mobile app messenger while playing normally in desktop browser messenger?

hello brother when i open my instant game i show this , please give me solve brother :heart: