Webhooks for Github & Jenkins Integration - CI/CD Pipeline

In this post we will look at how we can use Webhooks feature of GitHub to Integrate Github with Jenkins.

Webhooks is a really a cool feature which helps to Integrate GitHub with Jenkins on the Push Events in Github.

There is a feature in Jenkins to Poll SCM for every configured number of Minutes/hours for change in the code. This way Jenkins is polling on SCM. Better/Preferred way is to use Webhooks for this integration where Whenever there is a Push in Github, a Payload is sent to Jenkins with Push/Commit details and New Pipeline is Initiated.

Pre Requsites

1. Jenkins Server Installed on any IaaS or Local VM.
2. Github Login Credentials
3. Code Repository in GitHub with Sample Code. I have forked a code in my repo and added JenkinsFile which you can use as it is MyGitHubRepo.  Or You can also fork from Original Repo

Architecture Diagram

Lets Get Started

Configuring Jenkins

First Step in Configuring Jenkins is to Install GitHub Integration Plugin. Log into Jenkins Server and Click Manage Jenkins. Click Manage Plugins.

Click on Available Tab and Filter with Github.

Click Download Now & Install after Restart.

Create & Configure New Pipeline

Click Create New Item and Click Pipeline. Give a name to the new pipeline & Click OK.

Under General, Click on Github Project and give the url of GITHUB project. You can use below url if using my github forked project. https://github.com/rohanwalia/simple-node-js-react-npm-app

Under Build Triggers select : GitHub hook trigger for GITScm polling

Under Pipeline Section, Seclect Pipeline Script from SCM in Definition TAG. Need to use this if Jenkins file is in Code Repo.

Select GIT in SCM drop down.

In Repositories, provide the link to Repo Url : https://github.com/rohanwalia/simple-node-js-react-npm-app.git

Add credentials of GitHub.

Default Branch is Master Branch.

Script Path is name of Jenkinsfile which is same name in our repo.

Click Save and We are done with Jenkins Side of Configuration.

Configure Webhooks on GitHub

We will create a new Webhook.

Click on Settings inside the Repo.

Click Webhooks and Click Add Webhook.

In Payload URL Add : http://IpaddressofJenkinsServer:PORT/github-webhook/

Content Type : You May Select - application/json

Click Add Webhook.

Once completed, you will see below page with Webhook as Success. If there is error on the webhook, we need to analyze and fix the error.

We are All Done.

Lets Test now by changing / Pushing some code in our Code Repo. Added one comment on registerServiceWorker.js

Commit The Changes

Open Jenkins and Your Pipeline. It Kicks Off and Starts Executing/Building.

It shows the Comment added while Commit in GitHub.

Below is the Details of the Build Once Completed.

And we are all done.

Do let me know your views or comments on this post.

Thanks