Creating a simple Web application and deploying it to Tomcat

Creating a simple Web application and deploying it to Tomcat

Current revision (unreviewed)

Contents

[hide]

• 1 Introduction
• 2 Prerequisites
  • 2.1 Integrating Tomcat Server with IntelliJ IDEA
• 3 Creating a New Project
• 4 Exploring a Web Application
• 5 Creating Elements of Your Application
  • 5.1 Creating a HelloWorld Class
  • 5.2 Defining a styles.css Style sheet
  • 5.3 Developing an Application index.jsp Home Page
• 6 Packing the Application Data to Deploy
• 7 Getting Ready for Deployment
• 8 Running a Web Application on a Local Tomcat Server
• 9 More Information

Introduction

IntelliJ IDEA supports integration with the Apache Tomcat servlet container and makes it possible to develop and deploy Web applications right from within the IDE. This spares you from the need to download any libraries and create a deployment descriptor manually. IntelliJ IDEA also arranges the sources of your application so they comply with the requirements to the runtime application organization.

IntelliJIDEA helps:

• Integrate IntelliJ IDEA and the local Tomcat server.

• Create a Web application using the New Project Wizard and get all the facilities required for Web development.

• Explore a Web application as a tree-view of files and folders.

• Create elements of a Web application.

• Pack the data to deploy. For this purpose, IntelliJ IDEA uses an artifact which defines the files and resources to be packed and where to put them after packing.

• Create a run configuration.

Prerequisites

• You are working with IntelliJ IDEA Ultimate Edition version 9 or higher.

• Tomcat 6 server is installed on your machine and integrated with IntelliJ IDEA. Let us configure this integration in the next section.

 

Integrating Tomcat Server with IntelliJ IDEA

Before we start working on an application, let’s integrate Tomcat server and IntelliJIDEA using the application server configuration. This can be done even without an open project, because application server settings belong to the level of your workspace.

To do that, press Ctrl+Alt+S, and then under the IDE Settings, click Application Servers. On the Application Servers page, click (1), and select Tomcat Server. In the Tomcat Server dialog box, specify two things:

• Tomcat home (2) – a directory where your Tomcat server is installed.

• Tomcat base directory (3) - a directory where Tomcat config files are located (by default the Tomcat installation directory is used).

Having defined the paths for your local Tomcat server, click OK and return to the Application Servers page. Let’s assign some meaningful name to our server configuration – let it be Tomcat 6.

If you so need, you can extend the configuration with the various additional libraries, but for our example they are not required.

That is all; your local Tomcat server is ready for running applications from IntelliJ IDEA, and we’ll now start with the project.

Creating a New Project

The first step in developing a Web application in IntelliJ IDEA is to create a project:

Choose File | New Project on the main menu or click the Create New Project icon on the Welcome screen.

On the first page of the New Project wizard, make sure that the option Create project from scratch is selected.

On the second page of the wizard, specify the name of the project. Select the Create module check box, and choose Java Module as the module type. The name of this module will be Hello_world.

On the third page of the wizard, choose the Create source directory option and accept the default name src for it.

On the fourth page of the wizard, we’ll enable Web development through the dedicated Web facet. To do that, let’s select the Web Application check box.

Note: The term facet is used exclusively in IntelliJ IDEA. A facet determines the way IntelliJ IDEA treats the contents of a module, the set of components to be downloaded and configured, and the descriptors to be generated.

Now the skeleton of our application is ready. First, let’s look deeper into its structure.

Exploring a Web Application

To explore our Web application, we’ll use the Project tool window that shows the following files and folders:

The .idea (1) folder contains a number of subfolders, mainly with internal IntelliJ IDEA information.

The web (2) folder contains a WEB-INF subfolder with the web.xml (3) application descriptor.

index.jsp file (4) generated by IntelliJ IDEA represents the home page of your application.

The External Libraries (5) folder contains all the libraries required for Web development.

Besides generating the above structure and data, IntelliJ IDEA has produced an artifact to deploy. So we can start the application straight away: in the Project tool window, right-click index.jsp and choose Run index.jsp on the context menu. IntelliJ IDEA creates a temporary run configuration index.jsp on the fly and launches the application.

Your default browser displays the following page:

Congratulations! You have created and launched a Web application. Now it is just a stub, and we are going to expand its functionality, which is described in details in the following section.

Creating Elements of Your Application

To illustrate the mainstream Web development workflow in IntelliJ IDEA, let’s develop a simple “Hello world!” application that will consist of the following elements:

• A Java class with one method that returns a “Hello, world!” string.

• An application home page that displays the result of executing this Java code.

• A style sheet to define the layout of the homepage.

Creating a HelloWorld Class

Let’s start with creating a HelloWorld Java class inside a package.

Create a Sample package: right-click the src node, choose New | Package on the context menu, and type Sample in the New Package dialog box.

Right-click the Sample node, choose New | Java Class, and type HelloWorld in the Create New Class dialog box.

IntelliJ IDEA creates a stub class HelloWorld with the package statement and class declaration:

Type the following code of the getMessage method inside the stub class:

public static String getMessage() {

return “Hello, world!”;

}

Defining a styles.css Style sheet

Now let’s configure the layout of our home page by defining a style sheet. We won’t configure a sophisticated layout - defining the color and positioning for messages seem enough to illustrate the process.

Create a style sheet: right-click the web node, choose New | File on the context menu, and type styles.css in the New File dialog box. IntelliJ IDEA opens the new styles.css file in the editor.

Let’s make the messages green and centered – for this purpose, type the following code:

.message { color: green; text-align: center; }

Developing an Application index.jsp Home Page

On creating the project, IntelliJ IDEA has produced a stub index.jsp file which will be used as the home page of your application. Let’s add more flesh to its code, to show the result of executing the HelloWorld class.

• Open index.jsp in the editor (F4).

• Add a link to the style sheet:

<link rel="stylesheet" type="text/css" href="styles.css"/> (2)

• Replace the default text inside the <body></body> tag as follows (3):

<h3 class="message"><%=HelloWorld.getMessage()%></h3>

As you type, IntelliJ IDEA suggests you to import the Sample.HelloWorld class.

Press Alt+Enter. IntelliJ IDEA inserts the following import statement:

<%@ page import="Sample.HelloWorld" %>

Now we have a Java class, a style sheet and a JSP page ready. Our next step is to prepare the data to be deployed to the Tomcat server, which is discussed in the next section.

Packing the Application Data to Deploy

To tell the Tomcat server what to process and where to find the application data, you need to define an artifact. An artifact can be an archive (war) or an exploded directory. In our case, when the project output is stored and processed locally, it is enough to submit the data in the exploded form.

During the project setup, IntelliJ IDEA has created a default artifact Hello_world:war exploded.

Let’s examine the contents of this artifact more closely:

Press Ctrl+Alt+Shift+S and click Artifacts. In the Artifacts page, select the Show contents of elements check box (1).

According to this artifact definition, the following will be submitted to the server:

• The result of compiling the Hello_world module (2): the compiled class Sample.HelloWorld.

• The contents of the web folder (3): index.jsp and styles.css.

• The deployment descriptor web.xml (4).

The location of the application data to be processed by the Tomcat server is defined in the Output directory field (5).

Note: When you run Web applications on a local Tomcat server, the application sources are not copied to the Tomcat server installation folder. IntelliJ IDEA stores all the project output data required for running an application in a local folder which emulates the organization of a Web application on the server.

This artifact definition is enough to have our application successfully deployed. You do not need to change anything here, provided that all the required static content resources (.jpg, .png, .css, etc.) are stored in the web folder root.

We are getting closer to our goal – deploying Hello World application. In the next section, let us prepare everything for deployment.

Getting Ready for Deployment

Let us now create a run configuration, which will contain the parameters required to deploy and launch your application. To do that, choose Run | Edit Configurations.

In the Run/Debug Configurations dialog box, click , and from the list of available run/debug configurations, select Tomcat – Local:

The page for the Tomcat server consists of four tabs; in our example we’ll use just two of them.

In the Server tab, let’s specify the following:

• Name of the run configuration (1): Hello_world_local.

• Application server to use (2): Tomcat 6.

• URL address at which the home page of the application will be available (3): http://localhost:8080.

To have the default browser opened automatically upon the application start, select the Start browser check box (4).

Next, in the Deployment tab, let’s choose the artifact to be deployed: select the check box next to the Hello_world:war exploded artifact (1):

Next, specify the application context root. In the Application context field (2), leave the default / (slash).

Select the Build Artifacts' check box (3).

Now the run/debug configuration is ready, we can save it, and proceed with launching our application.

Running a Web Application on a Local Tomcat Server

From the Select Run/Debug Configuration drop-down list (1) on the toolbar, choose Hello_world_local, and click on the toolbar (2).

IntelliJ IDEA opens the http://localhost:8080/index.jsp page in the default browser:

Congrats! You have created and deployed a web application on a Tomcat server.