Bitrise Build dashboard

CI/CD is an important one in modern development which helps us to speed up the development and deploy it to the desired user group. There are many CI/CD tools available in the market, this write-up is not to explain about the CI/CD. Here we are going to see the simple build dashboard for Bitrise.

Introduction:

Assume that, we are working in a workspace where many developers are working on a product or shared components, in that case if we want to see the build statuses for all the builds, we need to click over multiple builds and see the build status for that corresponding build. Wouldn’t be nice if we have one build dashboard which can show the statuses of all the builds?. Some CI/CD tools have the flexibility to configure/display this kind of build dashboard easily. Whereas, in Bitrise I could not find anything in this use case. (or at-least i don’t know about the existence). Hence, i started to build one simple build dashboard for Bitrise as below in the image.

This writeup assumes that folks who reads this has knowledge in node js, pug js, express js, socket io.

How this simple Bitrise build dashboard is built:

Bitrise is providing the list of APIs which can be used for multiple purposes. Here is the documentation for Bitrise APIs, please have a look to explore their APIs. As ours is simple dashboard, we just use their GET end point which provides the build status for an application.

To start with we need to have a simple js file to make http connection. Below is the simple snippet with host as api.bitrise.io

and our server.js file is as below

One important thing here is, we need to give authorization Bearer token in the headers. We can get the token from Bitrise Account settings, validity of the token also can be set over there.

var headers = {

‘Content-Type’: ‘application/json’,

‘Authorization’: ‘’

};

and next we will have to call this connection method from our manager or wrapper file as below.

Here, few key things are there to highlight,

appId -> application id of your Bitrise, we can easily find it in the browser when we are checking the build in Bitrise.
noOfDaysBuild -> We can specify the day limit to get the build results. E.g last 7 days build

These two parameters are being sent in url query parameters.

/apps/${appId}/builds?after=${last7daysTimeStamp}

Bitrise GET call provides ’n’ number of builds for a particular branch, most probably we would need only the latest build status, so we are taking only the latest build for each branch.

Realtime update?

So far, we just fetched the build statuses using a GET call, but what would happen if new commit is made and build is triggered in Bitrise. How that can be reflected in our Build dashboard?. One simple idea is to refresh every ‘x’ seconds, but thats not the efficient one. So, we use ‘webhook’ here in order to refresh the build dashboard page only when certain commits or events is made.

This webhook url can be configured in Bitrise, and our server js file will listen for this webhook. When the data comes into our POST request, we just refresh the build statuses again by making the same GET call.

app.post(“/buildwebhook”, (req, res) => {

io.sockets.emit(‘refreshme’, ‘{id}’);

res.status(200).end()

});

Dashboard UI?

Ok, we have seen so far the server side work, you can use any of your frontend knowledge to display the build dashboard, i have used simple grid layout using ‘pug.js’ to show our build dashboard.

Hope this would help or give some idea about building the simple Bitrise build dashboard. Thanks!!!.