Publish react app on Facebook Instant Game

#react #javascript #showdev #gamedev

Background:

I'm frontend developer and I use ReactJS at my day job but before all this I was a game developer, I still love making games, specially small html5 games which I can make quickly. For this instead of using a game engine I generally prefer create-react-app, It is good for making small game.

So I made this game. I wanted to share it on facebook and while searching I came across facebook instant game feature, where you can publish html5 games and users can play it directly from messenger and facebook. So I decided to publish it there.

Facebook instant game setup and issues with CRA build

Setup is very straightforward, As per official documentation just include to SDK and initialise the script and start loading game.

But by default create-react-app generates one index.html and minified JS file. where JS file is directly called, so by default this doesn't work on Instant Game.

In instant game we have to first initialise sdk then only we can load our app's javascript.

Solution

So I played around build files generated by create-react-app, and did following changes in index.html file to make it work on Instant game.

1) Remove script tag which loads minified JS file.
Generally it is at end of index.html. Mine looked like this

<script type="text/javascript" src="/static/js/main.34f1754e.js"></script>

PS: main.34f1754e.js this was name of generated file, it will be different every time new build is generated.

2) Include Instant Game SDK in head

<script src="js/mock/fbinstant.6.0.mock.js"></script>

3) Initialise and start loading minified JS.
Here is how i did it, when i get success callback for initialisation I start loading minified JS bundle generated by create react app.

 <script>
    window.onload = function () {
        FBInstant.initializeAsync().then(function () {
            function loadScript() {
                return new Promise(function (resolve, reject) {
                    var s;
                    s = document.createElement('script');
                    s.src = "static/js/main.34f1754e.js";
                    s.onload = resolve;
                    s.onerror = reject;
                    document.head.appendChild(s);
                });
            }
            loadScript().then(res => console.log(res)).catch(err => console.log(err));
        }).catch(err => {
            console.log(err)
        });
    };

</script>

Conclusion

So this way we can publish ReactJS app created by CRA to facebook's instant game. If you are interested in Game development and find learning Game engines hard(I actually find phaser/Cocos really really hard) please start with CRA or just plain JS is also good. Good thing about CRA is you can directly start using ES6-:). Unless you are going to make graphics heavy game You don't really need a game engine

I didn't publish my game to FB Instant Game, because later i figured out in order to actually publish you need to provide apple id and I didn't had that (:-
I think facebook should allow instant game on android and Web without apple Id, iOS I can understand, But anyways it was fun doing all this.

Thank you for reading this. Let me know your thoughts in comment sections.

Top comments (6)

Dwight • Sep 17 • Edited

That's a great approach to using create-react-app for game development! If you're looking to explore more about publishing games on Facebook, you might find some useful resources on facebookgamers for optimizing your HTML5 games for the platform. It covers everything from SDK integration to handling issues with game setup. Best of luck with your game publishing!