Utilize Github Pages as JSON API

|by

Imagine that you as a sole mobile developer, need to test your app with some JSON data. Some developer may save and read that data locally within the app. Although this approach is the easiest for the data part, it faces a new challenge. Whenever the API is ready, a developer needs to ditch this all and change to network call to retrieve their data. The second way is to set up a web server and host the JSON files there. It can be hard especially if the developer doesn’t have much knowledge about web server or there’s still so much to do in the client/app side. However, by using this whenever the API is ready, a developer only needs to change the URL string. There’s a third way, which you can still host your API but without the hustle to set up a web server. By using Github, we can host our JSON files data there, and also use the advantage of Git whenever there are changes in our static JSON files. Because it is a static site, the only limitation is only GET operation is accepted.

Setup Github Pages

Create a new repository in Github. Then open the Settings tab, and scroll to Github Pages. In the source drop-down, select the master branch. Press save. Next, select a theme for our page. After selecting this page, Github will generate _config.yml in your repository; it is a Jekyll configuration for your page. Although you will not use the page/theme, this step is essential to access JSON files inside the root directory. Your new GitHub pages for this repository is ready. The URL for this repository will be https://your_username.github.io/your_repository_name. However, nothing is exciting to see there.

Preparing JSON files

Clone the above repository, or if you already have JSON files saved locally, run git init in that folder and add the above remote repository. Commit and push your changes. After you push your files there, you can access your JSON in https://your_username.github.io/your_repository_name/json_file.json. Github Pages also works with a folder. Thus if your file is located at / myfolder/json_file.json, it will have an URL of https://your_username.github.io/your_repository_name/myfolder/json_file.json

Accessing JSON in app

To access those JSON files is the same as when you read request from a real API.
Using iOS & Alamofire :

Alamofire.request("https://your_username.github.io/your_repository_name/myfolder/json_file.json").responseJSON { json in
    print("Hi I have the \(json)")
}

Because Github Pages already has HTTPS, a developer doesn’t need to deal with creating a network call exception inside info.plist

Using Android & Retrofit :

aRetrofitService.getMyFile().enqueue(object: Callback<ResponseModel> {
    override fun onFailure(call: Call<ResponseModel>?, t: Throwable?) {
           //
      }

      override fun onResponse(call: Call<ResponseModel>?, response: Response<ResponseModel>?) {
           //
      }
})

App Example

We have created an example API using Github pages, Android, and iOS project. You can clone these repositories: