Customizing build badges to display a Node.js project status

- By Abhijit Kini

BACK TO BLOG HOME

Badges are often a convenient utility to track the status of a software project. One can configure a badge to show the project's last build status in a convenient location. Shippable provides its own API for badges. This API has default badges for pending completion, failed & successful builds.

In the previous tutorial, I configured a build badge for a Node.js project on Shippable. However, I would like to customize the build badge display to my specifications by changing the color and label of these badges. In this tutorial, I'll walk through customizing these badges to achieve the same by using a third party service - shields.io.

tutnode104b_custom_label.png

Before you begin

Ensure you have -

  • Have signed into Shippable using your GitHub or BitBucket credentials
  • Completed the previous tutorial of configuring the build badge for the 'nodejs' project
  • Have an enabled project on Shippable platform, to run continuous integration

I'll continue to use my enabled project - Node.js app (available for download on GitHub) for this tutorial.


Get the Project ID

Shields.io provides an API that generates a badge with the text of my choice for a given Project ID. I have to provide Project ID of the Shippable project that I want to track the build status and query parameters to get my badge from Shields.io. To get my 'nodejs' Project ID:

  • From your home page, select your 'Subscription'.
    • 'Shippable-Demo' in this case.
  • In your subscription select your enabled project that you want to configure build badges.
    • 'nodejs' in this example.
  • Review the URL and copy the part after 'projects/'
    • Project ID in this case is: 573b4f972a8192902e2064c5

Getting the Project ID for a Continuous Integration Project


Customize your Badge

Refer the table below,  pick the Field and configure the value for it.

Field Purpose Default Value
label left text in badge run
colorA left side color in badge #555555`
successLabel label when build is passing shippable
successColor color when build is passing #44CC11
failLabel label when build is failing failing
failColor color when build is failing #DC5F59
cancelledLabel label when build is cancelled cancelled
cancelledColor color when build is cancelled #6BAFBD
unstableLabel label when build is unstable unstable
unstableColor color when build is unstable #CEA61B
pendingLabel label when build is pending pending
pendingColor color when build is pending #5183A0
skippedLabel label when build is skipped skipped
skippedColor color when build is skipped #F8A97D
noBuildLabel label when there is no build none
noBuildColor color when there is no build #A1ABAB
inaccessibleLabel label when Shippable API is inaccessible inaccessible
inaccessibleColor color when Shippable API is inaccessible #A1ABAB

 

I am going to pick the following fields & values:

  1. label = My Label
  2. colorA = #3128C7E
  3. successLabel = Success Label
  4. successColor = #44CC11

Use the shields.io URL & replace the characters using the Project ID & the above fields

https://img.shields.io/shippable/:projectId/:branch.svg?field1=value1&field2=value2&field3=value3

IMPORTANT:

Since # is an special character, you need to encode it while passing in the url. To encode it replace it with %23. For example, to use the color #3128C7E you need to use label=%233128C7E in the URL. Similarly space ( ) is a special character as well. Replace it with %20 while using it in the URL.

Using the above logic, the URL I have is:

https://img.shields.io/shippable/573b4f972a8192902e2064c5.svg?label=My%20Label&successLabel=Success%20Label&colorA=%233128C7E&successColor=%2344CC11

Copy this URL and paste it in a browser, you will see the output below:

Customized build badge

With this customized URL,  I can successfully use it in any application/location and get the output of my project status in a desired format.


Try Shippable 

Topics: continuous integration (CI), nodejs, badges