Java Web Application with Embedded Tomcat

August 31, 2018 |

Purpose

This is to create a web application in Java. The Apache Tomcat will be emddeded to the JAR (not WAR), called uber/fat JAR. Other dependencies, if there is any, will also be included.

We will create a page with the following URL:

http://localhost:8080/app/

This page will display an introduction about embedding Tomcat with Java Web application. This also include button that is link to Books page.

Book page is a list of books with columns: ID, Title, Edition and Action button that when clicked will display a modal consisting more information about selected book.

Requirements

  • JDK 8
  • Maven
  • an IDE - Eclipse (Or NetBeans, Intellij IDEA, if you prefer)

Build with Maven

First, we'll create a Java Maven project. Open your terminal and cd to your preferred workspace and run the following commands:

Note: you can choose your own package instead of io/github/julianjupiter/app (io.github.julinjupiter.app)

The project structure should now be:

    java-web-app-with-embedded-tomcat
    └── src
        └── main
            └── java
                └── io
                    └── github
                        └── julianjupiter
                            └── app
            └── resources
            └── webapp
                └── WEB-INF
    └── pom.xml

Open pom.xml using your favorite editor (mine is Visual Studio Code). Copy and paste the following XML.

Take note that our packaging is jar and we are using Maven Shade Plugin here to package our application into JAR. From its website, it reads: This plugin provides the capability to package the artifact in an uber-jar, including its dependencies and to shade - i.e. rename - the packages of some of the dependencies.

Another thing worth to mention is the mainClass tag where we define our class with main method.

Lastly, we include at least two dependencies for embedding Tomcat: tomcat-embed-core, tomcat-embed-jasper.

Import to Eclipse

To import the project:

Eclipse - File > Import... > Maven > Existing Maven Projects > Browse ... (for Root Directory) > Finish

Let's Start Coding

Server

Create a package server under app. Under this package, we will have an interface Server and class TomcatServer. The interface will have one abstract method, run which will serve as entry point to start our Tomcat server. This opens a possibility to add more servers other than Tomcat, either from scratch or use existing ones (Jetty, Undertow).

Server.java
TomcatServer.java
Main.java

We will now create our main class as defined by mainClass in pom.xml.

As this class contains main method, this will serve as entry point to start our application and the server. Here, we instantiate the TomcatServer class and call run method. We pass in args argument from main method to run method. By default, the server will listen on port 8080 but we can override it by passing desired port number to our main method. This is optional, though (stick to 8080).

With the codes above, we can now build and run our application, but since there is no Servlet handler or default JSP page, it will just error page.

To test our application, create a index.jsp file inside webapp folder.

To build and run the application, run the following commands under the root directory of the project:

If the application starts successfully, open your browser: http://localhost:8080/app.

Add Servlet, JSPs and Other Classes

Domain Model

Book.java

This class is simply a POJO as state container of our data.

Repository

These serve our repository. However, the data is just a dummy for this demo.

BookRepository.java
BookRepositoryImpl.java

Service

These serve as intermediary between our controller and repository.

BookService.java
BookServiceImpl.java

Controller

BaseController.java

We'll create a base controller that will contain common properties and methods to be used by our controller. We extends this class with HttpServlet so that any class (controller) that extends it becomes an Servlet too.

BookController.java

The BookController extends BaseController class to become a Servlet. This will serve as the controller. Since our application will only display list of books and individual book, only doGet method will be implemented. This method intercepts all HTTP GET request.

Templates

Our templates will be written in JSP.

Let's create first templates folder under /webapp/WEB-INF. Under this new folder, we'll create four (4) folders - book, components, error, and includes.

The new structure of our Maven project:

    java-web-app-with-embedded-tomcat
    └── src
        └── main
            └── java
                └── io
                    └── github
                        └── julianjupiter
                            └── app
                                └── controller
                                └── domain
                                └── repository
                                └── server
                                └── service
                                └── util
            └── resources
            └── webapp
                └── WEB-INF
                    └── templates
                        └── book
                        └── components
                        └── error
                        └── includes
    └── pom.xml
includes

These are the common parts of a page.

init.jsp
header.jsp
footer.jsp
error
404.jsp
components

These are components used by our pages - modal, table.

bookModal.jsp
viewBookTable.jsp
book

This template will be used by our page pertaining to Book in our application.

list.jsp

Default Page

index.jsp

This is the default page in our application if we access http://localhost:8080/app.

Remember the index.jsp that we created earlier to test our application? We just need to modify that file.

Static Files

Our pages will make use of JavaScript and CSS. It includes Bootstrap CSS framework, hence, the need to import them.

Let's create assets folder under /webapp. Under this new folder, we'll create three (3) folders - css, js, and vendor.

Our custom styling and JavaScript files will, obviously, be put inside css and js folders, respectively, while the third-party ones, Bootstrap, jQuery, Popper.js, will be in vendor folder.

The new structure of our Maven project:

    java-web-app-with-embedded-tomcat
    └── src
        └── main
            └── java
                └── io
                    └── github
                        └── julianjupiter
                            └── app
                                └── controller
                                └── domain
                                └── repository
                                └── server
                                └── service
                                └── util
            └── resources
            └── webapp
                └── assets
                    └── css
                    └── js
                    └── vendor
                └── WEB-INF
                    └── templates
                        └── book
                        └── components
                        └── error
                        └── includes
    └── pom.xml
css
main.css
js
main.js
vendor

For the Bootstrap, jQuery, and Popper.js, you can download them from their respective sites.

Check header.jsp and footer.jsp files how these frameworks/libraries structured in our project.

Re-build and Run our Application

Run the following commands and open http://localhost:8080/app in our browser.

Screenshots

Home Page

List of Books

View a Book

Conclusion

We're able to create a Servlet application in which we use Embedded Tomcat Server. We build this application into a single JAR file, called Uber or Fat JAR.

With this, we no longer need a standalone web server to deploy our application to. We achieved this mechanism by using Maven Shade Plugin.

You can download complete source code here.