Spring MVC on VSCode - Tomcat Deploy
Tags: java, vscode
Published: 2020-10-30 14:09:12

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](https://dev.to/spaceofmiah/spring-mvc-on-vscode-maven-project-50g8). To follow along, you can get source code from [github](https://github.com/spaceofmiah/springblog)
>
> The processes on this guide was done on windows platform, but you should be able to follow along

#### [Tomcat Installation](#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](#needful-vscode-extension)

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](#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](#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](https://dev.to/spaceofmiah/spring-mvc-on-vscode-maven-project-50g8) 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](https://dev.to/spaceofmiah/spring-mvc-on-vscode-maven-project-50g8#build-and-compile-task) 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