Overview

Skill Level: Intermediate

Requires basic understanding of Maven, Vaadin 8, Java EE, Eclipse and WebSphere.

Vaadin is a productive UI framework for Java web applications. While it can be simply deployed on modular application servers, deploying it on WebSphere traditional requires some additional configuration. Details are provided in this recipe.

Ingredients

This recipe was performed with Vaadin 8.8.2, WebSphere Application Server 8.5.5.15 traditional, Eclipse 2019, Java 8 and Windows 10. This recipe also works with WebSphere Application Server 9.0.0.11 and Ubuntu Linux 16.

Step-by-step

  1. Prepare application server instance

    Federated application servers do not support tight Eclipse integration needed for productive development, therefore a standalone application server is needed. For this example, create a profile named vaadinDevNode1, which will also be the node name, with server being named vaadinDevServer1: Managing profiles using the graphical user interface

    The development optimization option should be selected for this server instance. The version of WAS for this recipe already runs on Java 8 by default.

     

  2. Prepare Eclipse

    To avoid any problems, it is best to run Eclipse with the same OS user as the one used to run WAS:

    1. Download and install Eclipse,
    2. install IBM WebSphere Application Server V8.5x Developer Tools,
    3. configure IBM JRE as default Eclipse JRE
      ibm_jre
    4. define a new Eclipse server target for WAS 8.5.x: Creating a server
      define_a_new_server

      new_server

    5. run server with resources from the workspace for faster publish:
      run_server_with_resources_from_workspace
    6. verify that the Maven Central catalog is available in your Eclipse workspace: http://repo1.maven.org/maven2/archetype-catalog.xml
      maven_central

    7. make sure that Eclipse uses the same JRE as the application server; update the eclipse.ini file as follows:

      -vm
      C:/IBM/WebSphere/AppServer85/java/jre/bin
      # C:/Program Files/Java/jre1.8.0_211/bin

      This is required for correct functionality of IBM tools and debugger.

    8. restart Eclipse.
  3. Prepare projects

    1. Create a non-simple Maven project,
    2. use filter vaadin-archetype-application and select the example for our version:
      vaadin_archetype_application_example

      maven_keywords

    3. if you are getting an XSD/XML validation error regarding MyAppWidgetset.gwt.xml, you can safely remove the error marker,
    4. update Maven projects to download dependencies:
      maven_update_project
    5. first compile the test-widgetset project with the following Maven goal sequence:

      compiler:compile

      vaadin:compile

      You can list available Maven lifecycle goals as follows:
      maven_lifecycle

      This step is required so that the Vaadin widgetset is available for Eclipse build and publish activities. Without this step, Vaadin will report that the widgetset can’t be found.

    6. add the ui project to an EAR:
      new_ear

      ear_deps

    7. start the server in debug mode and add workspace resources:
      server_debug_mode

      add_resources

  4. Configure and publish Vaadin application

    1. OPTIONAL: Modify the MyUI.java and remove the following code:

          @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
          @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
          public static class MyUIServlet extends VaadinServlet {
          }

      Instead, create a separate class as follows:

      package com.was.vaadin.test;

      import com.vaadin.server.VaadinServlet; 

      public class MyUIServlet extends VaadinServlet {
      }

      my_ui_servlet

      The sample will work without refactoring as well.

    2. create WEB_INF folder as follows:
      web_project_structure
      1. beans.xml
        <?xml version="1.0" encoding="UTF-8"?>
        <beans xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/beans_1_0.xsd">

        <!-- The presence of this files enables CDI 1.0, as supported by WebSphere 8.5.5.15. -->
        </beans>
      2. ibm-web-bnd.xml
        <?xml version="1.0" encoding="UTF-8"?>
        <web-bnd
        xmlns="http://websphere.ibm.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://websphere.ibm.com/xml/ns/javaee
        http://websphere.ibm.com/xml/ns/javaee/ibm-web-bnd_1_2.xsd"
        version="1.2">

        <virtual-host name="default_host" />

        </web-bnd>
      3. ibm-web-ext.xml
        <?xml version="1.0" encoding="UTF-8"?>
        <web-ext
        xmlns="http://websphere.ibm.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://websphere.ibm.com/xml/ns/javaee
        http://websphere.ibm.com/xml/ns/javaee/ibm-web-ext_1_1.xsd"
        version="1.1">

        <reload-interval value="3"/>
        <context-root uri="/test"/>
        <enable-directory-browsing value="false"/>
        <enable-file-serving value="true"/>
        <enable-reloading value="true"/>
        <enable-serving-servlets-by-class-name value="false" />

        </web-ext>
      4. web.xml
        <?xml version="1.0" encoding="UTF-8"?>
        <web-app id="WebApp_ID" version="3.1"
        xmlns="http://xmlns.jcp.org/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
        http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
        <display-name>test-ui</display-name>

        <!-- SECTION_1 The following section is required when NOT using the @WebServlet annotation. -->
        <servlet>
        <servlet-name>MyUIServlet</servlet-name>
        <servlet-class>com.was.vaadin.test.MyUIServlet</servlet-class>
        <init-param>
        <param-name>UI</param-name>
        <param-value>com.was.vaadin.test.MyUI</param-value>
        </init-param>
        <async-supported>true</async-supported>
        </servlet>
        <servlet-mapping>
        <servlet-name>MyUIServlet</servlet-name>
        <url-pattern>/*</url-pattern>
        </servlet-mapping>

        <context-param>
        <description>Vaadin production mode</description>
        <param-name>productionMode</param-name>
        <param-value>false</param-value>
        </context-param>
        <!-- SECTION_1 -->
        </web-app>
    3. clean and build the ui project (do not clean the widgetset project or you will have to run related Maven tasks again) and publish. This will publish

      the testEAR to the application server: 

      6/6/19 18:43:19:060 CEST] 0000004e ApplicationMg A   WSVR0221I: Application started: testEAR

      [6/6/19 18:43:19:061 CEST] 0000004e CompositionUn A   WSVR0191I: Composition unit WebSphere:cuname=testEAR in BLA WebSphere:blaname=testEAR started.

      [6/6/19 18:45:19:334 CEST] 00000091 DefaultDeploy W  

      =================================================================

      Vaadin is running in DEBUG MODE.

      Add productionMode=true to web.xml to disable debug features.

      To show debug window, add ?debug to your application URL.

      =================================================================

      [6/6/19 18:45:19:455 CEST] 00000091 ServletWrappe I com.ibm.ws.webcontainer.servlet.ServletWrapper init SRVE0242I: [testEAR] [/test] [MyUIServlet]: Initialization successful.

  5. Run and debug Vaadin application

    1. You may now test on localhost:<http transport port>/test:
      vaadin_crud
    2. since the server is already running in debug mode, simply insert a breakpoint and trigger it:
      vaadin_debug
    3. for the example project, to update the code and see the updated results in the browser, simply edit the code, Eclipse-build edited projects, republish and refresh the page. Run Maven goals if editing the widgetset project.
  6. Conclusion

    Author: Aleksander Kovač

Join The Discussion