Build and deploy your simple web app using Jenkins, GitHub and Tomcat

In this post we are going to create a simple "Hello World" maven web app project in Eclipse, push the project into GitHub repository, build & deploy to Tomcat using Jenkins. Lets start by creating a sample web application and placing it in GitHub.

Create a maven project and push it into GitHub

(Skip this if you already have your project in GitHub)

Step 1:

File à New à Maven Project àClick Next in the below “New Maven Project” dialog.

Step 2:
Select “maven-archetype-webapp” à Click Next.

Step 3:
Enter Group Id (say "com.demo.webapp"), Artifact Id (say "mywebapp") à Click Finish.

Step 4:
Open "Git Repositories View" through Window à Show View à Other à Git à Git
        Repositories à Click OK

Step 5:
Login to GitHub and create a new repository checking option "Initialize this repository with a README” as shown below.

Step 6:
Copy the repository URL clicking on Clone or download button.

Step 7:

In eclipse “Git Repositories” view click on Clone a Git repository link. In the "Clone Git        Repository" dialog paste the copied URL in the URI field, enter authentication information and click Next.

Step 8:
Keep the default branch selection and click Next

Step 9:
Browse the local storage directory for the cloned repo or keep default selection and click Finish. Cloned repo will be displayed in the "Git Repositories" view.

Step 10:  
Right click on your project name in eclipse à Team à Share Project..  Select the cloned repository from dropdown and click Finish.

The project will now be shared and repo name and branch name will be displayed beside project
name as shown below.

Step 11:

Window à Show View à Other à Git à Git Staging à Click OK to open Git Staging view.        Select the “Working Tree” in “Git Repositories” view. All the project files are displayed under “Unstaged Changes” section in the staging view as shown below.

Step 12:
Right click on the Working Tree and select “Add to Index”. All the project files are now          displayed under “Staged Changes” section in the staging view as shown below.

Step 13:
Enter a commit message and click Commit and Push. Enter GitHub account access details and click OK.

Click OK on the next dialog.

Step 14:

Open GitHub repository and now the project contents will be displayed there. We have our project in GitHub finally...

 

Add a new Maven project in Jenkins and configure it to build and deploy

Step 1:

Through "Manage Jenkins" à "Manage Plugins",  install below plugins if not already installed:

Git, GitHub, Deploy to container Plugin, Maven Integration plugin

Step 2:

In Jenkins add a new item of type Maven project

Step 3:

In the project configuration page check “GitHub project” checkbox and enter the GitHub repository URL as shown below:

In the “Source Code Management” section again enter the same repository URL.

Click Add à Click Jenkins to open “Jenkins Credentials Provider” dialog as below.

Enter GitHub Username and Password, enter a description (say GitHub) and click Add

Select the newly added credentials from the "Credentials" dropdown.

In the "Build Triggers" section check "Poll SCM" and enter H/5 * * * *  in the "Schedule" text area [which will poll GitHub every 5 min]

In the "Build" section enter below information:

Root POM: mywebapp/pom.xml 

Goals and options: clean package

In the "Post-build Actions" section enter a post-build action of type "Deploy war/ear to a container" and enter the below information.

WAR/EAR files: **/*.war

Context path: mywebapp

Container: Tomcat 8.x

Credentials: Add a new Jenkins credentials with the Username and Password of  a user having tomcat "manager-script" role access.

Tomcat URL: http://localhost:8080 [Enter your tomcat URL]

Click Apply and click Save.

Step 4:

Run a new build of the newly created project in Jenkins. If the build is a "Success" open your browser and get to the URL "http://localhost:8080/mywebapp/".  "Hello World!" will be displayed in the browser. We have built and deployed our new web project using Jenkins and Maven.

Step 5:

Now make some changes in our web application source code by adding "Better" to "Hello World!" in the index.jsp, commit and push the changes.

Wait for few minutes [less than 5 min] and a new Jenkins build of our project will be kicked off automatically. Once the new build gets completed refresh your browser and now "Hello Better World!" will be displayed.