Github gist + Github pages

Abhishek Singh — Sat, 02 Nov 2019 11:00:12 +0000

I host my personal website on Github pages, Every time whenever I wanted to update website I had to update code, because data was part of repo.

Recently I learned that we can access gist by api, So now I am hosting my data on gists and loading it dynamically with API call. Which is pretty cool.

Without Database and backend now I can update website anytime without actually updating code.

Here is sample code

let url ="https://api.github.com/gists/9052ef9a070e0d5ab046fa3464d026c4";
fetch(url).then(response => {
   response.json().then(data => {
     let profileData =JSON.parse(data.files["personalData.json"].content)
   })
 })

Abhishek Singh

@abvishek

Github Gist + Github pages = Awesome

github.com/AbhishekCode/A…

10:22 AM - 02 Nov 2019

0 0

Publish react app on Facebook Instant Game

Abhishek Singh — Wed, 22 Aug 2018 18:00:56 +0000

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.

Hi, I'm Abhishek Singh

Abhishek Singh — Mon, 02 Jan 2017 08:34:41 +0000

I have been coding for 4 years.

You can find me on Twitter as @Abvishek

I live in Mumbai.

I work for Tekhne.

I mostly program in these languages: JavaScript.

I am currently learning more about ReactJS and NodeJs.

Nice to meet you.

DEV Community: Abhishek Singh

Github gist + Github pages

Publish react app on Facebook Instant Game

Hi, I'm Abhishek Singh