IntelliJ IDEA 2016.2 Help

Creating and Running Your First Web Application

This tutorial illustrates developing a simple Java Web application and deploying it to the Tomcat application server.

The application will consist of a JSP page and a Java class. However, the IntelliJ IDEA features discussed here are applicable to Java Web applications of any complexity.

Before you start

Make sure that the following software is installed on your computer:

  • Make sure you are using IntelliJ IDEA ULTIMATE Edition.
  • Install the Java SE Development Kit (JDK), version 1.8 or later, see Download Oracle JDK.
  • Download the Tomcat application server, version 8.0 or later, see Download Tomcat.
  • Make sure a web browser is available on your computer.

Configuring the Tomcat server in IntelliJ IDEA

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or IntelliJ IDEA | Preferences for OS X, and click Application Servers under Build, Execution, Deployment.
  2. On the Application Servers page that opens, click add above the central pane and choose Tomcat Server from the list.
    web_tomcat_configure_app_server_step_1.png
  3. In the right-hand pane, specify the Tomcat installation folder in the Tomcat Home field. Type the path to it manually or click browseButton and choose the installation folder in the dialog box that opens. IntelliJ IDEA detects the version of the application server and automatically fills in the Name field as follows: Tomcat <version>. In our example it is Tomcat 8.5.4.
    web_tomcat_configure_app_server_step_2.png

    The other fields are filled in automatically or are optional, so just click OK.

Configuring the JDK

  1. Press Ctrl+Shift+Alt+S or choose File | Project Structure on the main menu.
  2. In the Project Structure Dialog that opens, choose SDKs under Platform Settings.
  3. On the SDKs page that opens, click add above the central pane and choose JDK.
    rest_ws_glassfish_configure_jdk_step_1.png
  4. In the right-hand pane, specify the installation folder of the Java SE Development Kit (JDK) to use. Type the path manually or click browseButton and choose the installation folder in the dialog box that opens. IntelliJ IDEA detects the version of the JDK and automatically enters it in the Name field. In our example it is 1.8.
    rest_ws_glassfish_configure_jdk_step_2.png

    All the mandatory fields in the other tabs are filled in automatically, so just click OK.

Creating a project

  1. Click Create New Project on the Welcome screen, or choose File | New | Project on the main menu.

    The New Project wizard opens.

  2. On the first, Project Category and Options page of the Wizard:
    1. In the left-hand pane, select Java Enterprise.
    2. From the Project SDK list, select the JDK to use. In our example, it is 1.8.
    3. From the Application Server drop-down list, choose Tomcat 8.5.4.
    4. From the Java EE Version drop down list, choose Java EE 7.
    5. In the Additional Libraries and Frameworks area, select the Web Application check box.
    6. Click Next.
    web_tomcat_create_project_step_1.png
  3. On the second, Project Name and Location page of the Wizard, specify the name for your new project, in our example it is web_tomcat_hello_world.

    Click Finish and wait while IntelliJ IDEA is creating the project.

    web_tomcat_create_project_step_2.png

Exploring the project structure

When the project is created, you will see something similar to this in the Project tool window:

web_tomcat_project_structure.png

  • web_tomcat_hello_world is a module folder (which in this case coincides with the project folder).
  • The .idea folder and the file web_tomcat_hello_world.iml contain configuration data for your project and module respectively.
  • The folder src is for your Java source code.
  • The folder web is for the web part of your application. At the moment this folder contains the deployment descriptor WEB-INF\web.xml and the file index.jsp intended as a starting page of your application.
  • External Libraries include your JDK and the JAR files for working with Tomcat.

Developing source code

Our application will consist of an index.jsp page and a HelloWorld.java class. Its only function will be to output the text Hello World

  1. Create a package for the HelloWorld.java class. We need to do that because referencing default packages from .jsp files is suppressed.
    1. In the Project tool window, select the src folder and choose New | Package on the context menu of the selection:
      web_tomcat_create_package.png
    2. In the dialog box that opens, type Sample in the Enter new package name field. The new Sample package is added.
  2. Create a HelloWorld.java class:
    1. In the Project tool window, select the Sample package and choose New | Java Class on the context menu of the selection:
      web_tomcat_create_java_class.png
    2. In the Create New Class dialog box that opens, type HelloWorld in the Name text box and click OK.
    The new class is added:
    web_tomcat_create_class_added.png
  3. Open HelloWorld in the editor by double clicking it in the Project tool window. As you can see, IntelliJ IDEA has generated a stub of the HelloWorld class:
    web_tomcat_class_stub_created.png
    Type the following code in the HelloWorld class:
    public static String getMessage() { return "Hello, world"; }
    The HelloWorld.java class now looks as follows:
    web_tomcat_class_completed.png
  4. Update the index.jsp page:
    1. Open index.jsp for editing: select the file in the Project tool window and press F4 or just double click index.jsp.
    2. Inside the <title></title> tag, replace &Title& with Simple jsp page.
    3. Inside the <body></body> tag, replace &END& with <h3><%=HelloWorld.getMessage()%></h3>. As you can see, the code HelloWorld is highlighted red as an unresolved reference. However, IntelliJ IDEA suggests a solution in the blue pop-up message.
      web_tomcat_jsp_updated_step_1.png
    4. Press Alt+Enter and choose Import Class on the context menu:
      web_tomcat_jsp_updated_step_2.png
      IntelliJ IDEA adds the following string at the top of index.jsp:
      <%@ page import="Sample.HelloWorld" %>
      Now index.jsp looks as follows:
      web_tomcat_jsp_updated_step_3.png

The code of our application is ready.

Examining the generated artifact configuration

Besides building a Java web-specific project structure, IntelliJ IDEA has also configured an artifact for us.

The word artifact in IntelliJ IDEA may mean one of the following:

  • An artifact configuration, i.e. a specification of the output to be generated for a project;
  • An actual output generated according to such a specification (configuration).
Let's have a look at this configuration.

  1. Open the Project Structure dialog by pressing Ctrl+Shift+Alt+S or choosing File | Project Structure on the main menu.
  2. Under Project Settings, select Artifacts.

    The available artifact configurations are shown in the central pane under add and delete. Currently there is only one configuration web_tomcat_hello_world:war exploded, it is a decompressed web application archive (WAR), a directory structure that is ready for deployment onto a web server.

  3. The artifact settings are shown in the right-hand pane of the dialog:

    web_tomcat_artifact.png
    Learn more about artifacts at Working with Artifacts and Artifacts.

    IntelliJ IDEA has already filled in all the mandatory fields, no changes are required from our side, so just click Cancel to leave the dialog.

Exploring and completing the run configuration

In IntelliJ IDEA, any application is launched according to a dedicated run configuration. During the project creation, we have specified the Tomcat server as the application server for running our application. Based on this choice and the annotations from the code, IntelliJ IDEA has created a run configuration and filled almost all the mandatory fields.

  1. Choose Run | Edit Configuration on the main menu. Alternatively, click Shift+Alt+F10 and select Edit Configuration from the pop-up menu.
  2. In the Edit Configuration dialog box that opens, expand the Tomcat Server node and click Tomcat 8.5.4. The right-hand pane shows the settings of the automatically generated run configuration.
    web_tomcat_run_config_server_tab.png
    • The Application Server field shows Tomcat 8.5.4, which is the installation of the Tomcat server that was chosen during the project creation. The Name field also shows Tomcat 8.5.4, IntelliJ IDEA has automatically named the generated configuration after the appointed application server.
    • In the Open browser area, the After launch check box is selected, so the page with the application output will be opened automatically.

      In the text box below, we need to specify the URL address of the page to open. In our example, it is http://localhost:8080/.

    • To have web_tomcat_hello_world:war exploded deployed automatically on launching the run configuration, the artifact has to be marked for deployment. If you have completed the project creation steps successfully, the artifact is marked for deployment automatically. If it is not, IntelliJ IDEA displays a warning No artifacts marked for deployment and a Fix button.
      rest_ws_glassfish_no_artifact_marked_for_deployment.png
      When you click Fix, IntelliJ IDEA opens the Deployment tab where the web_tomcat_hello_world:war exploded is added to the Deploy on the server startup list.
      web_tomcat_run_config_deployment_tab.png
    All the other fields are filled in automatically or are optional, so just click OK to save the run configuration.

Running the application

Click run on the toolbar. After that:

  1. IntelliJ IDEA compiles your source code and builds an application artifact.
  2. The Run Tool Window opens. IntelliJ IDEA starts the server and deploys the artifact on it.
  3. Finally, your default web browser starts and you see the application output Hello World there.
    web_tomcat_result_in_browser.png

See Also

Last modified: 12 April 2017