Integrating Jenkins with Slack and Email Notification

Integrating Jenkins with Slack and Email Notification

   January 27, 2020       Codez Tech

---

Continuous Integration is a process in which all development work is integrated as early as possible, with the resulting artefacts automatically built and tested. This blog walks through integrating Jenkins with Slack and email notifications, so your team is notified of every build on a Slack channel, and you get an email whenever a build fails.

Jenkins CI with Slack and Email Notification

The below topics are covered in this blog -

1) Introduction to Jenkins continuous integration
2) Creating a Slack account and incoming webhook
3) Configuring the Slack Notification plugin in Jenkins
4) Configuring email notification in Jenkins
5) Testing the setup

1. Introduction

Jenkins is an open-source continuous integration tool written in Java, used for building, testing, and reporting on isolated changes in a larger codebase in real time. It lets developers find defects and fix them rapidly through automated testing.

2. Create a Slack Account and Incoming Webhook

Slack is a chat platform that provides incoming webhooks, which let external systems post messages into a channel. We will use one so Jenkins can send build notifications into your Slack channel.

If you haven't created your Slack account yet, sign up first, then visit:

https://slack.com/signin?redir=/apps/manage

Or: Channel Administrator -> Manage Apps -> Create Incoming Webhooks

Once you have an account, go to Slack → Administration → Manage Apps.

Slack Manage Apps

Search for Incoming WebHooks:

Search for Incoming WebHooks

You will get the screen below:

Incoming WebHooks

Click Add to Slack and select the channel you want build notifications posted to:

Select Channel Name

Click Add Incoming WebHook Integration. You will get a Slack webhook URL that looks like this:

https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXX

Treat this URL as a secret. Anyone who has it can post messages into your channel. Never commit it to a repository, paste it in a screenshot, or publish it.

You can test it with a curl command:

curl -X POST --data-urlencode \
  'payload={"channel": "#codeztech-jenkins", "username": "webhookbot",
   "text": "This is posted to #codeztech-jenkins from a bot named webhookbot.",
   "icon_emoji": ":ghost:"}' \
  https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXX

Slack Webhook URL

3. Configure the Slack Notification Plugin in Jenkins

Make sure the Slack Notification plugin is installed from Manage Jenkins → Manage Plugins. You can download it directly from:

https://updates.jenkins.io/download/plugins/slack/

Then go to Manage Jenkins → Upload Plugin and restart Jenkins. I have made a full video on this, linked at the bottom of this post. Feel free to comment on my YouTube channel or here if you run into any issue.

Once restarted, go to Manage Jenkins → Configure System and scroll to the Slack section.

Base URL        https://hooks.slack.com/services/
Team Subdomain  your Slack workspace subdomain
Credential      the webhook token, stored as a Jenkins secret
Channel         #your-channel-name

You can find the team subdomain in your Slack URL path:

Slack - Incoming WebHook Team Subdomain

Add the credential and enter your channel name prefixed with # — the channel where you want all build notifications sent. Click Test Connection to confirm the setup works.

Configure Slack on Jenkins

4. Configure Email Notification in Jenkins

To configure email notification in Jenkins, go to Manage Jenkins → Configure System → E-mail Notification and use the following settings:

SMTP Server           smtp.gmail.com
Default user e-mail   your-address@gmail.com
SMTP Authentication   checked
Username              your-address@gmail.com
Password              your app password (see below)
Use SSL               checked
SMTP Port             465
Reply-To Address      an alternate address

Do not use your normal Gmail password — Google will reject it. Generate an app password instead:

Step 1 — Sign in to Gmail and go to Manage your Google Account
Step 2 — Open the Security tab and find the sign-in section
Step 3 — Click App passwords and select the device or app
Step 4 — Generate the password and copy it

Paste that app password into the Jenkins password field, then click Test configuration to send a test email.

Configure Email Notification on Jenkins

5. Video Walkthrough

---

About the Author
Atique Ahmed — Principal AI Architect. 7x Microsoft MVP and Guinness World Record holder for Programming Excellence. Founder of Codez Tech.
Portfolio  |  LinkedIn  |  GitHub

Read More

Jenkins: How to Create Builds with the Jenkins Freestyle Project

Jenkins: How to Create Builds with the Jenkins Freestyle Project

   January 26, 2020       Codez Tech

---

A Jenkins freestyle project is a repeatable build made up of build steps and post-build actions. You choose what runs at each stage, and there are dozens of standard plugins available to extend it. This blog walks through creating a freestyle job from scratch, pointing it at a Git repository, compiling a Java program, and checking the console output.

Jenkins create & build freestyle project

The below topics are covered in this blog -

1) What is a freestyle project in Jenkins?
2) Creating a new freestyle build job
3) Configuring source code management with Git
4) Adding a build step
5) Running the build and reading the console output

1. Freestyle Project in Jenkins

A Jenkins project consists of build steps and post-build actions. The actions you can perform fall into three places: the build step, the post-build action, or a Jenkins pipeline. There are a large number of standard plugins available to cover most common requirements.

2. Creating a Freestyle Build Job

To create a Jenkins freestyle job, log in to your Jenkins dashboard. If Jenkins is hosted locally, visit http://localhost:8080. If it is hosted elsewhere, use that URL instead.

Step 1

Click New Item in the top left corner of your dashboard.

Jenkins New Item

Step 2

Enter the name of the item, choose Freestyle project, and click OK.

Freestyle Project

Step 3

Enter the details of the project you want to set up.

Jenkins Project Details

Step 4

Under Source Code Management, enter your repository URL so Jenkins can clone it. For this example the URL is:

https://github.com/kriru/firstJava.git

Jenkins Setup Git Project

Step 5

Click Add build step → Execute Windows batch command and add the commands you want to run. In our case:

javac HelloWorld.java
java HelloWorld

On a Linux or macOS agent, use Execute shell instead of Execute Windows batch command — the two commands themselves stay the same.

Jenkins Build Windows Batch Command

Step 6

Click Apply & Save, then Build Now to check whether the build succeeds.

Jenkins Build Now

Jenkins Build Successful

Step 7

If you want to explore further, click Console Output to see the detailed result.

Jenkins Console Output

Congratulations — we have executed our HelloWorld program from Jenkins.

3. Video Walkthrough

---

About the Author
Atique Ahmed — Principal AI Architect. 7x Microsoft MVP and Guinness World Record holder for Programming Excellence. Founder of Codez Tech.
Portfolio  |  LinkedIn  |  GitHub

Read More

Jenkins : How to download and install Jenkins

Jenkins : How to download and install Jenkins

   January 26, 2020       Codez Tech

---

A Jenkins freestyle project is a repeatable build made up of build steps and post-build actions. You choose what runs at each stage, and there are dozens of standard plugins available to extend it. This blog walks through creating a freestyle job from scratch, pointing it at a Git repository, compiling a Java program, and checking the console output.

Jenkins create & build freestyle project

The below topics are covered in this blog -

1) What is a freestyle project in Jenkins?
2) Creating a new freestyle build job
3) Configuring source code management with Git
4) Adding a build step
5) Running the build and reading the console output

1. Freestyle Project in Jenkins

A Jenkins project consists of build steps and post-build actions. The actions you can perform fall into three places: the build step, the post-build action, or a Jenkins pipeline. There are a large number of standard plugins available to cover most common requirements.

2. Creating a Freestyle Build Job

To create a Jenkins freestyle job, log in to your Jenkins dashboard. If Jenkins is hosted locally, visit http://localhost:8080. If it is hosted elsewhere, use that URL instead.

Step 1

Click New Item in the top left corner of your dashboard.

Jenkins New Item

Step 2

Enter the name of the item, choose Freestyle project, and click OK.

Freestyle Project

Step 3

Enter the details of the project you want to set up.

Jenkins Project Details

Step 4

Under Source Code Management, enter your repository URL so Jenkins can clone it. For this example the URL is:

https://github.com/kriru/firstJava.git

Jenkins Setup Git Project

Step 5

Click Add build step → Execute Windows batch command and add the commands you want to run. In our case:

javac HelloWorld.java
java HelloWorld

On a Linux or macOS agent, use Execute shell instead of Execute Windows batch command — the two commands themselves stay the same.

Jenkins Build Windows Batch Command

Step 6

Click Apply & Save, then Build Now to check whether the build succeeds.

Jenkins Build Now

Jenkins Build Successful

Step 7

If you want to explore further, click Console Output to see the detailed result.

Jenkins Console Output

Congratulations — we have executed our HelloWorld program from Jenkins.

3. Video Walkthrough

---

About the Author
Atique Ahmed — Principal AI Architect. 7x Microsoft MVP and Guinness World Record holder for Programming Excellence. Founder of Codez Tech.
Portfolio  |  LinkedIn  |  GitHub

Read More

Amazon EC2 Tutorial : Hosting Mean Stack Application

Amazon EC2 Tutorial : Hosting Mean Stack Application

   January 05, 2020       Codez Tech

---

Amazon EC2 is one of the most used and most fundamental services in AWS, so it makes sense to start there when you are new to the platform. But the first question is: what is EC2 in AWS?

Amazon EC2 — Hosting a MEAN Stack Application

The below topics are covered in this blog -

1) What is EC2 in AWS?
2) The MEAN stack CRUD application
3) Architecture of the application
4) Installing MongoDB on an EC2 instance
5) Hosting the MEAN stack with PM2

1. What is EC2 in AWS?

To keep it simple:

1. EC2 is basically a virtual machine with its own CPU, RAM, and storage.
2. It lets you choose a platform — Windows, Linux, Ubuntu, and so on — when you launch the machine in the cloud.
3. Each virtual machine is called an instance, and you can start, stop, or terminate it whenever you like.

2. AWS EC2 MEAN Stack Application Screens

Here are a few screens from the MEAN stack CRUD application we are going to host on AWS EC2.

Insert

MEAN Stack CRUD Application — Insert

Update

MEAN Stack CRUD Application — Update

Delete

MEAN Stack CRUD Application — Delete

3. Architecture of the MEAN Stack Application

The diagram below shows the architecture we are setting up across two AWS instances. The frontend uses Angular, and every user interaction — create, read, update, delete — goes through Node.js.

MEAN Stack Application Architecture

Node.js acts as the mediator that talks to the MongoDB database and returns data to the frontend. We use two instances — one for the frontend and one for the backend.

MEAN stack frontend project:

git clone https://bitbucket.org/atique12/mongocrud_application_frnt_end.git

MEAN stack backend project:

git clone https://bitbucket.org/atique12/mongocrud_application_back_end.git

If you want to learn more about the MEAN stack, see my related blog post: MEAN Stack Angular CRUD Application.

4. Installing MongoDB on an AWS EC2 Instance

If you haven't registered on AWS yet, do that first. Then launch an Ubuntu instance, download the PEM key, and open your terminal:

ssh -i yourkey.pem ubuntu@your_ec2_public_ip

Once you are logged in, install MongoDB. Reference links:

MongoDB — Install MongoDB Community Edition
GUI client — Robo 3T (formerly Robomongo)

Reference repository for this tutorial:

git clone https://bitbucket.org/atique1224/aws-ec2-tutorial.git

5. Hosting the MEAN Stack with PM2

On the second Ubuntu instance, install Node.js, NVM, the Angular CLI, and PM2, then clone the code onto the instance.

Install Node.js

sudo apt update
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Install NVM (to switch Node.js versions)

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.profile
nvm ls-remote

Install the Angular CLI

sudo npm install -g @angular/cli

Install PM2 (to keep the app running)

sudo npm install -g pm2

Clone both projects

git clone https://bitbucket.org/atique12/mongocrud_application_frnt_end.git
git clone https://bitbucket.org/atique12/mongocrud_application_back_end.git

Point the code at your instances. By default the projects use localhost. You need to replace that with your EC2 public IPs:

• Backend — in db.js, set the MongoDB instance's public IP; in index.js, set the backend instance's public IP.
• Frontend — in src/app/shared/person.services.ts, change localhost to the backend instance's public IP:

vi src/app/shared/person.services.ts

One important note: pointing the frontend at a raw EC2 public IP hardcodes an address that changes every time the instance restarts, unless you attach an Elastic IP. For anything beyond a demo, put the backend behind a stable hostname or load balancer rather than baking the IP into your source.

6. Video Walkthrough

More videos in this series:

---

About the Author
Atique Ahmed — Principal AI Architect. 7x Microsoft MVP and Guinness World Record holder for Programming Excellence. Founder of Codez Tech.
Portfolio  |  LinkedIn  |  GitHub

Read More

Mean Stack Angular Crud Application Tutorial

Mean Stack Angular Crud Application Tutorial

   January 05, 2020       Codez Tech

---

The term MEAN stack refers to a collection of JavaScript-based technologies used to build web applications. MEAN stands for MongoDB, Express.js, Angular, and Node.js.

MEAN Stack Application

The below topics are covered in this blog -

1) Overview of the MEAN stack
2) What does CRUD stand for?
3) Architecture of the MEAN stack application
4) Building the Node.js backend
5) Building the Angular frontend

1. Overview of the MEAN Stack

MongoDB — MongoDB is a schema-less NoSQL database. It stores data in a binary JSON (BSON) format, which makes it easy to pass data between client and server. If you haven't seen my MongoDB tutorial yet, see my related post: Complete Guide to MongoDB.

Angular — Angular is a JavaScript framework developed by Google. It provides features like two-way binding, routing, sharing data between components, RxJS, and observables. In short, it is a complete solution for rapid frontend development.

Node.js — Node.js is a server-side JavaScript execution environment built on Google Chrome's V8 runtime. It helps you build highly scalable, concurrent applications quickly. See my related post: Complete Guide to Build a RESTful API with Node.js.

Express.js — Express is a lightweight framework for building web applications in Node.js. It provides a robust set of features for single- and multi-page apps and was inspired by the Ruby framework Sinatra. We use Express in Node.js as our web application framework.

2. What Does CRUD Stand For?

CRUD stands for Create, Read, Update, and Delete — the four basic operations of persistent storage.

CRUD Stands For

We are going to build an application that performs all four operations using the MEAN stack.

3. Architecture of the MEAN Stack Application

The diagram below shows the architecture of the application we are building. The frontend uses Angular, and every user interaction — create, read, update, delete — goes through Node.js.

MEAN Stack Application Architecture

Node.js acts as the mediator that talks to the MongoDB database and returns data to the frontend.

4. Building the Node.js Backend

Step 1 — Generate a package.json. Create a folder, then run:

mkdir meanstack_backend
cd meanstack_backend
npm init          # press enter through the prompts
npm install body-parser cors express mongoose nodemon --save

Step 2 — Create the entry file, index.js:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const mongoose = require('./db.js');
const personController = require('./controllers/personController.js');

var app = express();
app.use(bodyParser.json());
app.use(cors({ origin: 'http://localhost:4200' }));

// Application testing API
app.get('/app/testing', (req, res) => {
  res.send({
    "message": "App is working fine",
    "status": 200
  });
});

app.use('/person', personController);

app.listen(3000, () => console.log('Server connected to port: 3000'));

db.js — the database connection:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/firstdb', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}, (err) => {
  if (!err) {
    console.log('MongoDB connected ....');
  } else {
    console.log('Error in DB connection: ' + JSON.stringify(err, undefined, 2));
  }
});

module.exports = mongoose;

model/person.js — the data model:

const mongoose = require('mongoose');

var Person = mongoose.model('Person', {
  name:  { type: String },
  mail:  { type: String },
  class: { type: Number }
});

module.exports = { Person };

controllers/personController.js — the CRUD routes:

const express = require('express');
var router = express.Router();

var { Person } = require('../model/person.js');
var ObjectId = require('mongoose').Types.ObjectId;

// Get all users
router.get('/', (req, res) => {
  Person.find((err, doc) => {
    if (!err) { res.send(doc); }
    else { console.log('Error retrieving persons: ' + JSON.stringify(err, undefined, 2)); }
  });
});

// Insert a user
router.post('/', (req, res) => {
  var per = new Person({
    name:  req.body.name,
    mail:  req.body.mail,
    class: req.body.class
  });

  Person.findOne({ 'mail': req.body.mail }, (err, docs) => {
    if (!docs) {
      per.save((err, doc) => {
        if (!err) {
          res.status(200).send({ auth: true, doc, message: '1 document inserted' });
        } else {
          console.log('Error inserting data: ' + JSON.stringify(err, undefined, 2));
        }
      });
    } else {
      console.log('User already exists: ' + req.body.mail);
      res.status(400).send({ message: 'User already exists: ' + req.body.mail });
    }
  });
});

// Update a user
router.put('/:id', (req, res) => {
  if (!ObjectId.isValid(req.params.id))
    return res.status(400).send(`No record with given id: ${req.params.id}`);

  var per = {
    $set: {
      name:  req.body.name,
      mail:  req.body.mail,
      class: req.body.class
    }
  };

  Person.findOneAndUpdate({ mail: req.body.mail }, per, { new: true, useFindAndModify: false }, (err, doc) => {
    if (err) {
      console.log('Something went wrong when updating data.');
    } else if (doc) {
      res.status(200).send({ auth: true, message: '1 document updated' });
    } else {
      res.status(404).send({ message: 'Resource not found. Please register first.' });
    }
  });
});

// Delete a user
router.delete('/:id', (req, res) => {
  if (!ObjectId.isValid(req.params.id))
    return res.status(400).send(`No record with given id: ${req.params.id}`);

  Person.findByIdAndRemove(req.params.id, { useFindAndModify: false }, (err, docs) => {
    if (!err) { res.send(docs); }
    else { console.log('Error deleting person: ' + JSON.stringify(err, undefined, 2)); }
  });
});

module.exports = router;

You can also clone the finished backend:

git clone https://bitbucket.org/atique12/mongocrud_application_back_end.git

5. Building the Frontend with Angular

The frontend uses Angular with Angular Material for the design. You can clone the finished frontend:

git clone https://bitbucket.org/atique12/mongocrud_application_frnt_end.git

6. Video Walkthrough

---

About the Author
Atique Ahmed — Principal AI Architect. 7x Microsoft MVP and Guinness World Record holder for Programming Excellence. Founder of Codez Tech.
Portfolio  |  LinkedIn  |  GitHub

Read More