Run and Debug Java Web Application in Tomcat using VS Code | Use VS Code Community Server Connector

in this lesson we are going to learn how to debug a maven-based Java web application using vs code let me first download Tomcat now in order to download Tomcat what we need to type in Google is download Tomcat so Type download Tomcat press enter go to this particular website now if I scroll down I have all the versions of the Tomcat available here so what I am going to do I am going to download the Z version this one let me click now the download is complete I can see over here this is my Apache Tomcat 9.0.68 let me extract it right click extract here what I'm going to do here I am going to place it in a custom directory this is the directory I'm going to put it you can put it in any directory you want now inside this Tomcat directory I need to add some additional users I need to go to this contradictory and there I have this tomcatusers.xml let me open this and once it is opened if you scroll down you can see there are multiple roles and users are defined but those are commented now I'm going to add a custom user and I'm going to use that in the Tomcat UI so for that let me paste some entries so this is my entry over here role name manager admin and finally I am creating one user called admin with password admin rules is admin and manager both now I'm going to run this tomcat and see whether the entry that I have given over here whether that is useful or not so for that this is my Tomcat directory let me move over here and under the bin we have the Tomcat startup script so I am copying this location now I am going to open the command prompt here and I am going to the location where Tomcat is installed inside the bin directory specifically let me try to run the startup.bat server startup is done let me maximize this no errors as such so now I am going to run the Tomcat UI over here so this is my Tomcat UI and click on manager app here the user ID and password is required that is why I added the Tomcat users so I'm going to enter admin admin both as user as well as password okay we have made a small mistake the role should be managed GUI instead of manager no issues I am going to stop the Tomcat let me shut down the Tomcat it's shut down going back to the users over here what was the error let me see once again it should be manager hyphen GUI I am going to change this change the role name here also I am going to change fine let me start again startup now get run successfully now go back to browser press back manager app now it's not asking for user ID and password we have entered it earlier now directly it's showing me the Tomcat manager page the tomcatware application manager page so Tomcat is up and running the user is also configured now what we need to do we need to get a sample Java based web application which is Maven based also for that you can go to this particular URL that is github.com j2e expert 2015 simple web app so this is a maven-based Java application let me click on this button click on download zip download is complete let me go to the downloads location this is my project right click extract here now I'm going to rename this to simple web app right now it's having the branch name over here this is fine now I'm going to put it in a custom location where actually I put all my Java projects so this is the location where I'm going to paste my code it's here now I'm going back to vs code from vs code I need to open that particular folder so file open folder select the location for me this is the location this is the project folder click on select folder now vs code is trying to identify the maven-based project let's wait for a while now what we need to do we need to install an extension that is community server connector extension so let me go to extension and type Community server connector so this is the one Community server connectors if you see this is from Red Hat click on the install currently it is installing wait for a while to get it installed so if I go to the Explorer in the meantime this is my simple web application my source directory and here I have the Java folder I have a simple code structure couple of java classes and few HTML pages and here if you see we have the Java project view we have the maven project view as well so right now what I can do by the time this extension is getting configured or installed anyways it is already installed let me build the maven project what I'm going to do I can right click over here and these are the different options let me click on install so what will happen the project jar would be created inside the target directory once the install is done the maven install is going on currently and if I go to this extension this extension is also installed let me close this and if I go to Explorer now let me close this this is the server view let it open so under the server view there is an already existing Tomcat setup that is being shown because I have used it earlier you can ignore that what we need to do we need to go here and click on create new server so I am not going to download server no use server on disk I need to point to the directory where my Tomcat is installed this is my Tomcat say like this click on select desired server location here I am going to change the server name scroll down click finish now this is my Tomcat this old one I don't want I can stop it this one I can start start server okay there is already a port conflict because the Tomcat that I have run that is already running on the Old Port let me stop this go back to vs code let me remove the old one this is the one I'm going to use again right click start server now you can see over here it is up and running so how to run the Java web project now the maven-based project there are multiple ways one is from here you can right click and you can click on ADD deployment so if I do add deployment what type of deployment do you want to add file or explode it if I say file then I have to point to the war file so this is my file the war file inside the target directory if I want to show you here let me go to this simple web app under the target here the war file is generated so that is one way from here I can do add deployment and I can point to the file another simpler way is you directly go to the war file right click and run on server let me try that and there it gives you the option you select this new Tomcat do you want to edit optional deployment parameters no now you see at the bottom this war file deployment is done if I go back to the browser here this was my manager location if I refresh it and if I scroll down here I have my sample web app so click over here this is a page now we have run the war file we have deployed it it's running on Tomcat now I want to debug it that's the main purpose right what I can do over here right click debug on server select this one no unable to deploy so let me do one thing remove this deployment full publish required right click publish server so I have removed the deployment now again I am going to the war file right click debug on server select the new Tomcat click on no now it is running on debug mode so the entire thing is now running on debug mode but I need to place some breakpoints so that I know that I can debug so I'm opening this login servlet before that I just want to see whether the application is functioning properly or not refresh yeah it's functioning go back to vs code so this is the method when I try to log in that gets called I am going to place a breakpoint over here wherever I am taking the username and password let me place a breakpoint and I go to the browser click on login and I am going to enter the input as admin admin click submit now you can see this application page is paused and our vs code this icon is blinking if I go back here you can see the breakpoint is hit and this parameters like user ID password I can see the value that is passed the maven-based Java web application is running on debug mode on tomcat and we are able to place the breakpoint and able to debug so this is the way you can run and debug a Java based maven-based web application using vs code in Tomcat so at a high level what we have used we have used this particular extension this is called Community server connectors so this is the extension we need to use and it is very handy whenever we are using Tomcat from vs code

Channel: LearningFromExperience

Views: 26,772

Keywords: visual studio code deploy to web server, Community Server Connectors, community server connectors vscode, community server connectors tomcat, community server connector vscode tomcat, java web aplication debug vscode, java web application vscode, java debug vscode, java web aplication vscode, visual studio code java, java web aplication debug visial studio code, debug java code in vscode, java web application debugging vscode, vs code community, vscode community server connectors

Id: RiPot1ne8rI

Length: 10min 28sec (628 seconds)

Published: Mon Dec 05 2022