Spring MVC on VSCode - Tomcat Deploy

#java #vscode

In this post, I'll explain how I was able to deploy maven web project with supports for spring mvc using apache tomcat server on vscode.

NOTE
This post is a continuation of spring mvc on vscode - maven project. To follow along, you can get source code from github

The processes on this guide was done on windows platform, but you should be able to follow along

Tomcat Installation

To serve your web app, so it is accessible from your browser, you'll need a web server. Apache Tomcat will help you do just that. To install tomcat, visit tomcat's download page https://tomcat.apache.org/download-10.cgi. There you'll find download links for various platform, choose which ever platform that applies (I'm on 64bit windows operating system, so i used the appropriate download link for my platform).

This guide uses tomcat version 9.0.39

Unzip the downloaded file and set it's installation path (location to unzip tomcat's folder) to home directory C:\Users<username>\apache-tomcat-9.0.39

NOTE:
There is a placeholder on above path <username>. Replace with your system username.

Needful VSCode Extensions

Open up vscode, click the extension icon on the sidebar (or use Cntrl + Shift + X). Search for Community Server Connectors extension and install it. You'll also need to install Remote Server Protocol UI extension as Community Server Connectors depends on it.

Configuring Tomcat on VSCode

With above dependencies installed, click file explorer icon (or Cntrl + Shift + E). From the explorer you should find Servers pan. Toggle Servers pane to open it if not opened. You should see a default Community Server Connector instance on the pane. Right click on it and choose start option, which will start the RSP connector.

To add Tomcat to the RSP connector, click on add new Server icon on Servers Pane (Hover mouse on Servers pane to see it), this will open a palette at the top of vscode code area. This palette contains a search field and some options. Select No, use server on disk option. This will open up file explorer. Navigate to and select the installation path for apache tomcat in your home directory C:\Users<username>\apache-tomcat-9.0.39. If right apache tomcat path is given, you'll be prompted to either change the name or continue with the default (I changed apache tomcat server name to tomcat).

Run web project using Tomcat

To run your project so it can be accessed from the web, you'll need to add the .war file to tomcat's deployment. This you can do by right clicking on your tomcat server on the Servers pane and select Add deployment option. This should open a palette at the top of vscode code pane, having options to select deployment from your file system or exploded. Choose File option from the list. You should be presented your file explorer to select the .war file you want to deploy. Select your file to add it to tomcat's deployment.

NOTE:
If you're following along from spring mvc on vscode - maven project you'll find the .war file in target directory on project's root.

In case you can't find .war file or not sure where it is. It's always situated in target folder on project root. This folder ( target ) is auto generated on successful build & compilation of project sources/class files. I already addressed how you can build and compile a maven project.

Start your tomcat server by right clicking on tomcat from the Server's pane on file explorer and choose Start Server option. This should launch your tomcat server if served & successfully configured and you can confirm this from vscode inbuilt terminal.

To confirm that tomcat is running, open up your browser and navigate to localhost:8080 which is where tomcat is served by default. You should see tomcat's welcome page.

To view your project deployed on tomcat in the browser, navigate to localhost:8080/blog, you should see our blog app Hello World page served by tomcat.

NOTE
If you're using a separate project, kindly add your project's artifactId value as the path(i.e if you’ve not configured it otherwise) e.g localhost:8080/<project artifactId>.

You've successfully deploy a web app with apache tomcat server on vscode. Stay tuned for the next guide which will take this a step further. Drop your thoughts, questions or suggestions in the comment sections below. Click on the like button and share article with a friend. Thanks