Practical-2: Full Stack Application Deployment using Jenkins
Required Installations: SpringToolSuite, MySql, Git, Jenkins, Maven, Apache Tomcat
Download the project from the repository Practical 3.zip from
https://github.com/srithars/cloud-devops
It consists of 2 folders and one pipeline script file as follows.
Open the crud_frontend project in the vscode and install vite as follows in the
commad prompt.
$npm i vite
Open the App.jsx file and update the BASE_URL line as follows and save it:
Then run the project by : npm run dev
You will get output like this
Now Import crud_backend project into the springboot and verify the project name
is cruddemo as follows:
Open the application.properties file, where
database name is mentioned: cicd
server.port=8081
Verify username and password. Change as per your credentials.
Hence open the MySql workbench and create a new schema/database named: cicd
as follows:
Click on Plus symbol
Provide conncetion name: DB1, username: root, password: root and click on “Test
connection”
Then open the frontend output , enter the given fields and click on Insert Button, if
insertion successful, then same record will be display under the product List and
also will be updated in the MySql.
Verify the inserted record in the mysql as follows:
Now create two repositories in the github named
crud_frontend
crud_backend
Now push both projects into the above repositories respectively using the following
commands.
git init
git add .
git commit –m “Initaial commit”
git branch -M main
git remote add origin https://github.com/lakshmixxxxx/xxxxend.git
git push -u origin main
Now we need deploy the above projects in to the Apache server.
Hence Open the Apache server, by : localhost:9090
If it has not been opening, go to the path: "C:\Program Files\Apache Software
Foundation\Tomcat X.Y\bin" and click on Tomcat9 Application. Then try from the
browser: localhost:9090
Click on Manager App
Open Jenkins and Click on Tools (Manage Jenkins)
Install node.js if you not install yet using option.
Plugins -> Available Plugins -> search for “node” and select NodeJs, then click on
Install Button to install.
For me it was installed already as follows:
Configuring jdk, mave and node paths
Goto Manage Jenkins -> Tools
Click on Toos -> Add JDK -> Provide jdk path and its Name as provided in the
Environment variable. (case sensitive)
Uncheck “Auto Installation” option.
Make sure above 3 paths (JAVA_HOME, MAVEN_HOME, NODE_HOME) must be
same as in Environment System Variables as follows:
Goto Jenkins Home page and Click on “New Item”, provide Item name and click on
“pipeline” as follows:
Scroll down and click on “Poll SCM” and enter five starts with space between them.
Meaning for five stars as follows:
Scroll down to “Pipeline” and copy paste the following code
pipeline {
agent any
tools {
jdk 'JDK_HOME'
maven 'MAVEN_HOME'
}
environment {
TOMCAT_URL = 'http://localhost:9090/manager/text'
TOMCAT_USER = 'admin'
TOMCAT_PASS = 'admin'
BACKEND_REPO = 'https://github.com/lakshminarayana-kodavali/crud_backend.git'
FRONTEND_REPO = 'https://github.com/lakshminarayana-kodavali/crud_frontend.git'
BACKEND_DIR = 'backend'
FRONTEND_DIR = 'frontend'
BACKEND_WAR = 'backend/target/springapp1.war'
FRONTEND_WAR = 'frontend/frontapp1.war'
}
stages {
stage('Clone Repositories') {
steps {
dir("${env.BACKEND_DIR}") {
git branch: 'main', url: "${env.BACKEND_REPO}"
}
dir("${env.FRONTEND_DIR}") {
git branch: 'main', url: "${env.FRONTEND_REPO}"
}
}
}
stage('Build React Frontend') {
steps {
script {
def nodeHome = tool name: 'NODE_HOME', type: 'jenkins.plugins.nodejs.tools.NodeJSInstallation'
env.PATH = "${nodeHome}\\bin;${env.PATH}"
}
dir("${env.FRONTEND_DIR}") {
bat 'npm install'
bat 'npm run build'
}
}
}
stage('Package React as WAR') {
steps {
script {
def warDir = "${env.FRONTEND_DIR}\\war_content"
bat "if exist ${warDir} rmdir /S /Q ${warDir}"
bat "mkdir ${warDir}\\META-INF"
bat "mkdir ${warDir}\\WEB-INF"
bat "xcopy /E /Y /I \"${env.FRONTEND_DIR}\\dist\\*\" \"${warDir}\\\""
bat "jar -cvf ${env.FRONTEND_WAR} -C ${warDir} ."
}
}
}
stage('Build Spring Boot App') {
steps {
dir("${env.BACKEND_DIR}") {
bat 'mvn clean package'
bat 'rename target\\*.war springapp1.war'
}
}
}
stage('Deploy Spring Boot WAR') {
steps {
bat "curl -u ${env.TOMCAT_USER}:${env.TOMCAT_PASS} --upload-file \"${env.BACKEND_WAR}\"
\"${env.TOMCAT_URL}/deploy?path=/springapp1&update=true\""
}
}
stage('Deploy Frontend WAR') {
steps {
bat "curl -u ${env.TOMCAT_USER}:${env.TOMCAT_PASS} --upload-file \"${env.FRONTEND_WAR}\" \"${env.TOMCAT_URL}/deploy?
path=/frontapp1&update=true\""
}
}
}
}
In the above code, modify the two lines which are 14 and 15 lines with your github
frontend and backend URLs as follows:
Click on SAVE button.
Now click on “Build Now” button
Got Build Success (Green Tick mark)
Now to verify output, go to tomcat server and click on deployment links.
/frontapp1 and /springapp1 are the deployment links.
Now enter data and click on Insert Button, it will insert from the deployment link.
To verify CI/CD pipeline process, do the modification in both github projects and
click on “commit changes” button, then automatically Jenkins triggers the pipeline
and perform Build and Deployment operations.
Modify the 2 files in backend project.
Modify the 1 file in frontend project.
In the backend, open the file AppController.java file, click on pen symbol to edit and
uncomment the lines which are in the comment. (lines 12,13,37,40)
Then click on the “Commit Change” button which appear on top right corner with
Green color.
Then open service.java file and uncomment the lines 30,39. Click on “Commit
changes” button.
In the frontend project, open the file App.jsx, uncomment the lines 50,58, 171,178
only. Then click on “Commit changes” button.
For each commit you did from github, in Jenkins “Build” operation will perform
automatically.
Now again click on the /frontend deployment link from the Apache, now you can
able to see the “Delete” Button in the output (Product List). It was not there earlier.
So successfully able to performing CI/CD with Jenkins as intermediate between
frontend and backend.
