Creating a Web Application using Gradle

Gradle has an available war plugin that allows you to package your Java web application into a .war file.

In this tutorial you will learn how to create a .war file. The .war file will be deployed twice: locally (through a Jetty web server) and remotely (through IBM Bluemix).


Prerequisite:

You are required to do the Gradle's Unit Testing Tutorial.

You are not required (but recommended) to do the Jetty Basics Tutorial.

  • However, ensure that your machine has the Jetty web server set-up as discussed in Jetty Basics Tutorial.

You are not required (but recommended) to do the Bluemix Basics Tutorial.

  • However, ensure that you have a Bluemix account.
  • Your account should have the space dev under the region US-South. The creation of the space dev is discussed in Bluemix Basics Tutorial.
  • Make sure that the cf tool is installed. The installation of cf tool is discussed in Bluemix Basics Tutorial.


Copy Sample Codes from Git repository

  1. Open a terminal window and create the directory gradletemp in the root directory. Go to the created directory.

    > mkdir gradletemp
    > cd gradletemp
    


  2. Clone the git repository https://github.com/pong-pantola/gradle-web-application.git and go to the created gradle-web-application directory.

    > git clone https://github.com/pong-pantola/gradle-web-application.git
    > cd gradle-web-application
    

    The gradle-web-application directory has a subdirectory src.

    gradle-web-application/
    |
    |----build.gradle
    |
    |----src/
         |
         |----main/
         |    |
         |    |----java/net/tutorial/
         |    |             |
         |    |             |----Math.java
         |    |             |----Calculator.java
         |    |
         |    |----resources/
         |    |    |
         |    |    |----log4j.properties        
         |    |
         |    |----webapp/
         |         |
         |         |----calculator.jsp
         |       
         |----test/
              |
              |----java/net/tutorial/
                            |
                            |----MyTest.java
                            |----TestRunner.java    
    

    The subdirectories and files are exactly the same as the one you used and created in Gradle's Unit Testing Tutorial. However, an additional file is added: src/main/webapp/calculator.jsp.

    calculator.jsp is the .jsp version of Calculator.java.

    The logical errors present in Math.java in the Gradle's Unit Testing Tutorial are already corrected in this tutorial's version of Math.java.


Review some of the Java classes and Build script

  1. As mentioned, Math.java logical errors in Gradle's Unit Testing Tutorial are already corrected.

    Source code of src/main/java/net/tutorial/Math.java:

    package net.tutorial;
    
    public class Math{
    
      //will be used in the multiply method to simulate that
      //the multiply method is taking too long to execute
      private void delay(){
        try{
          Thread.sleep(3000);//3000 msec. or 3 sec. delay
        } catch(InterruptedException ex) {
          Thread.currentThread().interrupt();
        }
      }
    
      public int add(int a, int b){
        return a+b;
      }
    
      public int sub(int a, int b){
        return a-b;
      }  
    
      public int multiply(int a, int b){
        return a*b;
      }
    }
    

    Remember that in the Gradle's Unit Testing Tutorial, the method add had a logical error (i.e., instead of a+b;, the return statement is a-b;). In addition, a delay is inserted in the method multiply to demonstrate the timeout mechanism of JUnit. These two issues are already resolved in this tutorial's version of Math.java.


  2. build.gradle has the same content as the one you created in Gradle's Unit Testing Tutorial.

    Please review the text below for the current content of build.gradle:

    apply plugin: 'java'
    
    repositories {
        mavenCentral()
    }
    
    dependencies {
        compile 'log4j:log4j:1.2.17'
        testCompile 'junit:junit:4.12'
    }
    
    jar {
        from { configurations.compile.collect { it.isDirectory() ? it : zipTree(it) } }
        manifest {
            attributes 'Main-Class': 'net.tutorial.Calculator'
        }
    }
    

    Note that the contents of the above script are the same as the contents of build.gradle file that you completed in Gradle's Unit Testing Tutorial.

    In this tutorial, entries related to web application (e.g., use of .war file) will be added to build.gradle.


  3. As mentioned, calculator.jsp is the .jsp version of Calculator.java.

    Source code of src/main/webapp/calculator.jsp:

    <!DOCTYPE html>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ page import="net.tutorial.Math" %>
    <html>
    <head>
        <title>Calculator</title>
    </head>
    <body>
    <%
    Math m = new Math();
    %>
    
    <%="5 + 9 = " + m.add(5, 9)%>
    <br>
    <%="8 - 2 = " + m.sub(8, 2)%>
    <br>
    <%="4 x 7 = " + m.multiply(4, 7)%>
    <br>
    
    </body>
    </html>
    

    Note that similar to Calculator.java, calculator.jsp uses Math.java:

    <%@ page import="net.tutorial.Math" %>
    


Update Build script to support Web Application

  1. Update build.gradle to include .war related entries:

    apply plugin: 'java'
    
    apply plugin: 'war'
    
    war {
        archiveName 'calcuapp.war'
    }
    
    repositories {
        mavenCentral()
    }
    
    dependencies {
        compile 'log4j:log4j:1.2.17'
        testCompile 'junit:junit:4.12'
    }
    
    jar {
        from { configurations.compile.collect { it.isDirectory() ? it : zipTree(it) } }
        manifest {
            attributes 'Main-Class': 'net.tutorial.Calculator'
        }
    }
    

    Take note that the following were added in the script above:

    apply plugin: 'war'
    
    war {
        archiveName 'calcuapp.war'
    }
    

    The apply plugin: 'war' entry will provide capability to Gradle to create a war file.

    The entry containing archiveName 'calcuapp.war' is added so that when the .war file is created, its name is calcuapp.war. If you omit this entry, the name of the .war file is the name of the directory containing the project. As an example, if archiveName 'calcuapp.war' is omitted, the .war file will be named gradle-web-application.war.


  2. Assemble the Gradle project.

    Make sure that you are in the gradle-web-application directory before issuing the command below.

    > gradle assemble
    

    Output:

    :compileJava
    :processResources
    :classes
    :war
    :assemble
    
    BUILD SUCCESSFUL
    
    Total time: 9.289 secs
    

    The build directory and its subdirectories and files are created.

    In this tutorial, the most important file that was created is the `build/libs/calcuapp.war` file.  This is the `.war` file containing the web application.
    


Deploy the Web Application in Jetty

  1. Copy calcuapp.war found in the build/libs/ subdirectory to Jetty's webapps subdirectory.

    Refer to Jetty Basics Tutorial if your machine do not have the Jetty web server.

  2. Make sure that the Jetty web server is running.

    To start the Jetty web server - open another terminal window - go to Jetty's home directory - issue the command java -jar start.jar.

  3. On a web browser, go to http://localhost:8080/calcuapp/calculator.jsp.

    Output:

    5 + 9 = 14
    8 - 2 = 6
    4 x 7 = 28 
    

    You have successfully deployed the calculator application in Jetty.


Deploy the Web Application in Bluemix

  1. Login to your Bluemix account using the cf tool.

    Make sure that you are in the gradle-web-application directory before issuing the command below.

    > cf login -a https://api.ng.bluemix.net -s dev
    


  2. Upload the web application to your Bluemix account.

    > cf push calculator-<your_name> -m 256M -p build/libs/calcuapp.war
    

    Example:

    > cf push calculator-pong -m 256M -p build/libs/calcuapp.war
    


  3. On a web browser, go to http://calculator-<your_name>.mybluemix.net/calculator.jsp.

    Output:

    5 + 9 = 14
    8 - 2 = 6
    4 x 7 = 28 
    

    You have successfully deployed the calculator application in Bluemix.


Clean up

  1. Delete your Bluemix application calculator-<your_name>.

  2. Delete calcuapp.war from Jetty's webapps subdirectory.

    You may need to stop the Jetty web server to delete calcuapp.war.


End of Tutorial

Go back to the List of Tutorials.

What's next?

Bluemix DevOps Services Basics Tutorial

Written on