Pipelines automatically build and test code projects to make them available to others. Pipelines work with just about any language or project type.
Pipelines do not just help us make our code easier to manage and deploy. They also save us a tremendous amount of time. With a pipeline, we can build an IDE in 20 minutes or less and get our code into an IDE optimized to run on modern OSs.
As we move forth with this article, we shall look at the step-by-step process of building a CI/CD pipeline using Jenkins. We will build a web app using the jQuery UI UI library. jQuery UI is a modern web UI framework that enables us to create a mobile web experience.
We’re also going to use the IndexedDB storage framework to store our data, query it, and update it easily without cluttering up our JavaScript.
What is DevOps?
DevOps is a software engineering approach or culture that unifies the Development and Operations team under an umbrella of tools to automate every stage. The Development team is responsible for coding or scripting the software and integrating all the components needed to run that software. Meanwhile, the Operations team is responsible for managing the organization's diverse workforce to ensure effective and efficient daily operations.
There are various milestones that DevOps helps in achieving:
- Frequent Release of Deliverables
- Team Collaboration
- Build Management of Unplanned Work
- Faster Resolution of Issues
Now, let's have a look at the Pipeline that is making DevOps so popular today.
What is a CI/CD Pipeline?
CI/CD pipeline refers to the Continuous Integration/Continuous Delivery pipeline. Before we dive deep into this segment, let's first understand what is meant by the term ‘pipeline’?
A pipeline is a concept that introduces a series of events or tasks that are connected in a sequence to make quick software releases. For example, there is a task, that task has got five different stages, and each stage has got some steps. All the steps in phase one have to be completed, to mark the latter stage to be complete.
Now, consider the CI/CD pipeline as the backbone of the DevOps approach. This Pipeline is responsible for building codes, running tests, and deploying new software versions. The Pipeline executes the job in a defined manner by first coding it and then structuring it inside several blocks that may include several steps or tasks.
Before we tell you how to build this CI/CD pipeline using Jenkins, let us look into a brief meaning of these two terms - Continuous Integration and Continuous Delivery.
What is Continuous Integration (CI)?
Continuous Integration is a practice that integrates code into a shared repository. It uses automated verifications for the early detection of problems. Continuous Integration doesn't eliminate bugs but helps in finding and removing them quickly.
What is Continuous Delivery (CD)?
Continuous Delivery is the phase in which the changes are made in the code before deploying. The team in this phase decides what is to be deployed to the customers and when. The final goal of the pipeline is to make deployments.
When both these practices come together, all the steps could be referred to as automated, and this process is CI/CD. Implementation of CI/CD enables the team to deploy codes quickly and efficiently. The process makes the team more agile, productive, and confident.
The DevOps tool that is most commonly used for a CI/CD pipeline is Jenkins. So, we must have a look at the basics of Jenkins and understand why it is the most sought after tool to build this pipeline.
What is Jenkins?
Jenkins is an open-source automation tool used to build and test software projects. The tool makes it more convenient for developers to integrate changes to the project. Jenkins achieves Continuous Integration with the help of plugins.
Jenkins turns out to be the best fit for building a CI/CD pipeline because of its flexibility, openness, plugin-capabilities, and simple to use nature.
Building CI/CD Pipeline with Jenkins
There are six steps to building a pipeline with Jenkins. But, before you begin those six steps, make sure you have the following in your system.
- Java Development Kit
- Knowledge to execute some basic Linux commands
The steps to build CI/CD pipeline with Jenkins are:
1. Download Jenkins
- Download Jenkins from the Jenkins downloads page ‘https://www.jenkins.io/download/’.
- Download the file ‘Generic Java package (.war)’.
2. Execute Jenkins as a Java binary
- Open the terminal window and enter cd <your path>.
- Use the command java –jar ./Jenkins. war to run the WAR file.
3. Create a Jenkins Job
- Open the web browser and open localhost:8080.
- The Jenkins dashboard opens creates new jobs there.
4. Create a Pipeline Job
- Select and define what Jenkins job that is to be created.
- Select Pipeline, give it a name and click OK.
- Scroll down and find the pipeline section.
- Either directly write a pipeline script or retrieve the Jenkins file from SCM (Source Code Management).
5. Configure and Execute a Pipeline Job With a Direct Script
- Choose Pipeline script as the Destination and paste the Jenkins file content in the Script from the GitHub.
- Click on Save to keep the changes.
- Now click on the Build Now to process the build.
- To check the output, click on any stage and click Log; a message will appear on the screen.
6. Configure and Execute a Pipeline With SCM
- Copy the GitHub repository URL by clicking on Clone or download.
- Now, click on Configure to modify the existing job.
- Scroll to the Advanced Project Options setting and select Pipeline script from the SCM option.
- Paste the GitHub repository URL here.
- Type Jenkinsfile in the Script, and then click on the Save button.
- Next, click on Build Now to execute the job again.
- There will be an additional stage, in this case, i.e., Declaration: Checkout SCM.
- Click on any stage and click on Log.
After you have understood all the essential steps to build a CI/CD pipeline using Jenkins, a hands-on demonstration will serve as a cherry on the cake.
Demo - To Build a CI/CD Pipeline With Jenkins
Go to your Jenkins Portal:
- Click on ‘Create a job’.
- In the item name dialog box, you may enter the ‘pipeline’.
- Select the pipeline job type in the list below.
- Click on OK.
A configuration related to the pipeline opens on the screen.
- Scroll down on that page.
- There in the dialog box, choose GitHub+Maven.
Some steps will appear on the screen. The next step is to integrate the Jenkins file into the Version Control system.
So, for that
- Select ‘Pipeline script from SCM’.
- Then in the SCM dialog box, select Git.
- ‘Jenkins file’ is the name of the Script.
- Add the Git repository URL.
- You can add the credentials if any.
The credentials can be added with the help of the ‘Add’ option.
- Then save the configuration
A page now comes on the screen that gives you various options like ‘Build Now’, ‘Delete Pipeline’, ‘Configure’, etc.
- Click on the Build Now option.
The pipeline will start downloading. The checkout will be visible on the screen and you can see the build being complete on the screen.
You can go to the console output option to check the log that is taking place.
You will soon be able to see that all the segments of the pipeline are completed. The artifact will be present to download. The war file can be downloaded using that link.
The entire process helps us understand how the whole Pipeline is configured. Using similar types of steps, different kinds of automation pipelines can be configured.
Using CI/ CD Pipelines and IndexedDB for a jQuery UI Web Application
Using a simple PostgreSQL database, we’ll be storing some client-side data in IndexedDB storage. This technique can be a convenient and robust solution for storing some data in the browser.
Using IndexedDB is a much better alternative to the Document Object Model (DOM) for storing and querying client-side data because of how easy it is to manage and query data. Let’s get started with our project.
Creating a New Project in Pipelines
If you’re not familiar with Pipelines, a pipeline is a logical approach to building, testing, and deploying your code. James Morris invented it.
You want to build a pipeline that you can use to make a jQuery UI web app (described in another article), so let’s get started.
Creating a New Project
First, create a new directory for our project in a new directory and run this command:
git init
You should see something similar to the following:
$ mkdir jquery-ui-pipeline-demo $ cd jquery-ui-pipeline-demo $ bin/pipeline create
The “Pipeline create” command lets you specify the template in which your code will be built and tested. This method is similar to how you use Yarn but using the web toolbelt instead of yarn.
The only difference is that you won’t need to use your own build environment to run tests. The web toolbelt will do this for you automatically.
That’s all you need to do to create a new project.
Building a jQuery UI Web App Using a Pipeline
To use the pipeline to build your sample app, we will open a new terminal window and type:
$ bin/pipeline build
This command will take a while because it’s building and testing the app on our local development machine.
After the build process is complete, you can see that the completed project is stored in our index.html file. We can use these files in other apps or even deploy the app to a server to test it out.
Check out the Jenkins Certification Training Course to learn server automation, continuous integration, build pipelines, configuration tools, and more. Enroll now!
Summary
Hopefully, you’re familiar by now with the concept of pipelines, and you can see the advantage they have when working with the web. Pipelines allow you to focus on the app and the business logic while the tooling handles the rest.
There are lots of other resources available on the internet that can help you further understand pipelines. Simplilearn also offers courses and programs that will improve your skills with pipelines and other DevOps tools and platforms. Our CI/CD Pipelines with Jenkins Certification Training Course is specifically geared towards using pipelines. If you want to develop a comprehensive set of DevOps skills, our Post Graduate Program in DevOps, offered in collaboration with Caltech CTME, has a complete curriculum with live virtual classroom instruction, hands-on labs, and a capstone project suitable to add to your portfolio.
