This Story contains these topics:
Jenkins Installation, Git Connection, Configuration of Angular project and deployment on Tomcat Server.
Please follow step by step procedure for configuration.
Step 1: Go to https://www.jenkins.io/download/
Step 2: Download Generic Java Package (.jar)
Step 3: After download, go to your download directory, copy jenkins.war to any location.
Step 4: Jenkins is one of the java application. So before starting, confirm that you have installed java on your machine.
How to check java is installed or not?
command: java -version
here my java version is 1.8.0_xx
Step 5:
Go to your directory where jenkins.war is.
Open command prompt (for Windows, for Ubuntu and Mac you have to open terminal).
hit command: java -jar jenkins.war
Step 6: Jenkins configuration
Copy password from CMD/terminal
Open any web browser.
go to http://localhost:8080/
Now you have opened Jenkins UI.
The first time you will see a page like this.
Install all suggested packages:
Click on Continue as admin Button (You can do this later)
Now you can see the dashboard like this :
Step 7: Install “Deploy to container plugin”
open: http://localhost:8080/pluginManager/
Click on Available
Select Deploy to Container Plugin
Click on Download now and install after restart.
Restart Jenkins.
Step 8: Tomcat Configurations
We will deploy this angular project on any tomcat. In this case, I am deploying on my local tomcat.
So first thing, create a user in tomcat who has all permissions.
So open “xx\apache-tomcat-xx\tomcat-users.xml”
Add user in that file and save it
<user username=”admin” password=”yourPassword” roles=”manager-gui,manager-script,manager-jmx,manager-status”/>
Make sure your tomcat’s running port should be different than Jenkins port if you are deploying on the same device.
You can see your tomcat’s running port in “xx\apache-tomcat-xx\server.xml”. If your tomcat runs on 8080 then open this file in notepad and replace all 8080 to 9090 because now your Jenkins is running on port 8080. You may change Jenkins port to 9090 just by changing Jenkins run command to “java -jar jenkins.war -httpPort=9090”.
Step 9: Configuring Project
We are configuring Angular project so make sure you have Node and CLI installed on your device.
Check node version:
command: node --version
Check the CLI version:
command: ng --version
Now open Jenkins on the web browser
Click on a new item from the left menu
OR navigate to http://localhost:8080/view/all/newJob
Enter Project Name.
and click on the Freestyle Project.
Click on OK.
Now you will be on Item configuration screen.
Paste your project’s git URL here.
Enter your Source Control Credentials here
Now click on Add Build Step -> Select Execute Windows batch command. For Mac Execute Shell.
Repeat this step for 3 times so we will have 3 input boxes.
Add First Command: npm i
Add Second Command: ng build --prod
In the third box add post-build commands
cd dist
cd myAngularProjectName
jar -cvf myAngularProjectName.war *
Now go to Post Build Actions
Click on Deploy war/ear to a container.
Now add Context Path and WAR/EAR files like this
Here I am converting my angular build into a war file in the above command “jar -cvf myAngularProjectName.war”. So I have given “myAngularProjectName” as the war file name. So I am giving the same name as Context Path.
Add a container :
Click on Add Container Button
Select Appropriate tomcat version.
Now click on Add button
Select Jenkins
Add your tomcat credentials which are given in tomcat-users.xml.
Click Add.
Select Entered Credentials.
Now Click on Save.
Now you will be navigated on the Dashboard.
So Finally you have Configured an Angular Project in Jenkins.
Step 9: Building and Deploying Project
Start Tomcat
Go to Jenkins dashboard.
Click on your project.
Click on Build Now
Now you can see your project is building. Click on it.
Now Click on Console Output
Now you can see output like this:
So Congratulations!! You have successfully configured the Angular Project in Jenkins and deployed on Tomcat just in one click!
Now you can check your application is deployed on your tomcat.
In my case, its URL is http://localhost:9090/myAngularProjectName.
Thank You!!!
