Developing and Deploying Vaadin Applications on Oracle Cloud

Published in

Oracle Developers

7 min readNov 1, 2017

This blog helps you to understand build and deployment automation for Vaadin applications using Developer Cloud Service. It would focus on the development, build and deployment of a web application using Vaadin Framework.

Note: For details on how to develop Vaadin applications please check this link, which provides details about the framework and its components.

Tech Stack Used

Eclipse: IDE for Vaadin Application Development
Application Framework: Vaadin
Build Tool: Maven
Oracle Developer Cloud Service: for DevOps automation
Oracle Java Cloud Service: Java EE app server for deploying the Vaadin application

About Vaadin

Vaadin is a web framework that offers all the tools needed to easily build a web app. It consists of Vaadin Framework and Vaadin Elements. We can use the included Polymer based Vaadin Elements with a framework of our choice or integrate it seamlessly with Vaadin Framework and deploy it on a Java Server. For more information on Vaadin, please visit — https://vaadin.com/

Why Vaadin?

Server Driven: The framework is server driven, so all logic is handled on the server side.
Secured: Since all the logic resides at the server side and the client only sends message and thus the application is more secured.
UI Components: Has rich set of UI components as part of Vaadin Elements.
Integration: Its components are decoupled from the Vaadin framework, so can be used along with any other framework as well.
Multi Language Support: Supports writing business logic and UI n any language running on the JVM such as Java, Scala or Kotlin

Vaadin framework bootstrap application

We can generate the sample application, which we will be using for the blog, by using maven archetype. Maven archetype is also supported in eclipse, so the project scaffold can also be generated from the eclipse directly. Else you can generate the project scaffold and then import it in Eclipse. Below is the maven command for generating the Vaadin UI application scaffold.

mvn -B archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=8.1.5 -DgroupId=org.test -DartifactId=vaadin-app -Dversion=1.0-SNAPSHOT

About Vaadin based UI Application

The Vaadin UI application has a MyUI class, which is the entry point for the application where you can add the UI components as per your requirement.

Project Structure for Vaadin Application in Eclipse

Salient Files from Vaadin UI Project

MyUI.java — The Vaadin UI application will have a MyUI class, which is the entry point for the application where you can add the UI components in the init method. You can also define the servlet and the servlet configuration by using the respective annotations. In Vaadin application a UI may either represent a browser window or some part of an HTML page where a Vaadin application is embedded. UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be overridden to add component to the user interface and initialize non-component functionality.

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;@Theme("mytheme")
public class MyUI extends UI {@Override
protected void init(VaadinRequest vaadinRequest) {  final VerticalLayout layout = new VerticalLayout();
  final TextField name = new TextField();
  name.setCaption(“Type your name here:”);
  Button button = new Button("Click Me");
  button.addClickListener(e -> {
    layout.addComponent(new Label("Thanks"+name.getValue()+", it works!"));
  });
  layout.addComponents(name, button);
  setContent(layout);
}@WebServlet(urlPatterns="/*",name="MyUIServlet",asyncSupported=true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {}}

Mytheme.scss — This file contains the the theme for the applications. We can go ahead and add our own theme rules to it. It imports valo.css. There are other css files in addition to this one where the style sheet has been defined for the application. These files are, styles.css, styles.scss and addons.scss. The theme name given here is used in the MyUI.java by @theme annotation as shown above. As given in the code snippet given below, ‘mytheme’ is the name of the theme.

@import "../valo/valo.scss";@mixin mytheme {  @include valo;  // Insert your own theme rules here}

pom.xml — This xml file defines the package dependencies, prerequisites and plugins for Maven to build a war file for deployment on a Java Server.

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion>
<groupId>org.test</groupId>
<artifactId>vaadin-app</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>vaadin-app</name><prerequisites>
   <maven>3</maven>
</prerequisites><properties>
  <vaadin.version>8.1.5</vaadin.version>  
  <vaadin.plugin.version>8.1.5</vaadin.plugin.version>  
  <jetty.plugin.version>9.3.9.v20160517</jetty.plugin.version>   
   <project.build.sourceEncoding>UTF-8  
   </project.build.sourceEncoding>  
  <maven.compiler.source>1.8</maven.compiler.source>  
  <maven.compiler.target>1.8</maven.compiler.target><!-- If there are no local customizations, this can also be "fetch" or "cdn" -->
  <vaadin.widgetset.mode>local</vaadin.widgetset.mode>
</properties><repositories>
  <repository>
    <id>vaadin-addons</id>
    <url>http://maven.vaadin.com/vaadin-addons</url>
  </repository>
</repositories><dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>${vaadin.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement><dependencies><dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency><dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId
</dependency><dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-push</artifactId>
</dependency><dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-client-compiled</artifactId>
</dependency><dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-themes</artifactId>
</dependency>
</dependencies><build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration><failOnMissingWebXml>false</failOnMissingWebXml><!-- Exclude an unnecessary file generated by the GWT compiler. --><packagingExcludes>WEB-INF/classes/VAADIN/widgetsets/WEB-INF/**</packagingExcludes></configuration>
</plugin><plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>
<executions>
<execution>
<goals>
<goal>update-theme</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
<!-- Comment out compile-theme goal to use on-the-fly theme compilation -->
<goal>compile-theme</goal>
</goals>
</execution>
</executions>
</plugin><plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
version>3.0.0</version>
<!-- Clean up also any pre-compiled themes -->
<configuration>
<filesets>
<fileset>
<directory>src/main/webapp/VAADIN/themes</directory>
<includes>
<include>**/styles.css</include>
<include>**/styles.scss.cache</include>
</includes>
</fileset>
</filesets>
</configuration>
</plugin><!-- The Jetty plugin allows us to easily test the development build by running jetty:run on the command line. --><plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>${jetty.plugin.version}</version>
<configuration>
<scanIntervalSeconds>2</scanIntervalSeconds>
</configuration>
</plugin>
</plugins></build><profiles>
<profile>
<!-- Vaadin pre-release repositories -->
<id>vaadin-prerelease</id>
<activation>
<activeByDefault>false</activeByDefault>
</activation><repositories>
<repository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</repository>
<repository><id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
<releases>
<enabled>false</enabled>
</releases><snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories><pluginRepositories>
<pluginRepository>
<id>vaadin-prereleases</id>
<url>http://maven.vaadin.com/vaadin-prereleases</url>
</pluginRepository>
<pluginRepository>
<id>vaadin-snapshots</id>
<url>https://oss.sonatype.org/content/repositories/vaadin-snapshots/
</url>
<releases>
<enabled>false</enabled>
</releases><snapshots>
<enabled>true</enabled>
</snapshots></pluginRepository>
</pluginRepositories>
</profile>
</profiles>
</project>

Build Configuration:

Below are the screenshots for the build job configuration for the VaadinBuild, which will perform Maven build to build a war file and deploy it on Oracle Java Cloud Service.

Give a name of your choice to the build job. For this blog I have named it as ‘VaadinBuild’. Select the JDK 8 as the option from the JDK dropdown as shown in the screenshot below:

Select the repository in which the Vaadin UI application related files have been uploaded.

Here we set the SCM polling as the trigger. This ensures that, every time we upload code to the Git repository, it will trigger the ‘VaadinBuild’ build job, as shown in the build trigger diagram above in the blog.

We would use the Maven3 build step in the Build Steps tab pointing to the project pom.xml. Execution of the clean install maven command would build a war file for the Vaadin UI project.

And then to archive the war built by Maven build as part of the VaadinBuild job execution, using the following post build configuration.

On execution, of the ‘VaadinBuild’ build job the console log would look like:

On execution, of the ‘VaadinBuild’ build job the deployment war file is generated which can be seen in the ‘Vaadin Build’ build job dashboard.

Deployment Configuration

For deployment of the generated Vaadin UI war file, we will be configuring Oracle Java Cloud Service deployment configuration as below in the deploy menu of Oracle Developer Cloud.

Post the deployment of the war file on Oracle Java Cloud Service, vaadinappl would show deployment succeeded status, as in the screenshot below.

Below will be the URL for accessing the application. The IP would be the public IP address of the JCS instance you have configured in the deployment configuration.

https://140.xx.xx.251:7002/vaadinappl/

On accessing the URL in a browser, below application UI would come up: