How to use Maven to build your SAPUI5 application

[Former Member]

Introduction

At the moment I am working as a QA officer on a SAPUI5 project at a customer. The customer has a development and QA environment containing Jenkins for CI and Sonar for quality inspection. As a QA officer I want to use these tools to ensure code quality. To be able to do so I needed to convert my standard SAPUI5 project to a Maven project. Below is a step by step guide how I achieved this.

Install Maven

Installing Maven is pretty straight forward. Follow the link below and you should be ready to start in five minutes:

http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html

Install SAPUI5 Eclipse Plugin

• Download the latest version: http://scn.sap.com/community/developer-center/front-end , at the time of writing this was version 1.16.3
• Howto install in eclipse
  • Extract folder “tools-updatesite”
  • Open eclipse -> Help -> Install New Software…
  • Select “Add…” -> “Local…” -> Browse to the “tools-updatesite” folder

Add SAPUI5 libraries to local Maven repository

To be able to use SAPUI5 libraries with Maven you have to add the jar files to your local Maven repository. If you use Nexus as a repository you can add the jar files there. For this example the jar files are added locally.Open a command prompt and cd to the “\tools-updatesite\plugins” folder. Execute the following commands (version numbers may vary):

• mvn install:install-file -Dfile=com.sap.ui5.core_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.core -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.commons_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.commons -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.table_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.table -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.ux3_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.ux3 -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.visualization_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.visualization -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.richtexteditor_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.richtexteditor -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.mobile_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.mobile -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.makit_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.makit -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.viz_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.viz -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.mobile-ext_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.mobile-ext -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.themelib_sap_goldreflection_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.themelib_sap_goldreflection -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.themelib_sap_ux_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.themelib_sap_ux -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.suite.suite-ui-commons_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.suite.suite-ui-commons -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.resource_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.resource -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.utils_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.utils -Dversion=1.16.3 -Dpackaging=jar
• mvn install:install-file -Dfile=com.sap.ui5.layout_1.16.3.jar -DgroupId=com.sap.ui5 -DartifactId=com.sap.ui5.layout -Dversion=1.16.3 -Dpackaging=jar

Create POM

A POM file has to be created to be able to build the project and to be able to create an eclipse project for it. Also a “org.eclipse.wst.common.project.facet.core.xml” should be created in the .settings folder in your project if you want to share the project using a version control system (like SVN). This file describes the project facets to use. In my project I have started with a standard SAPUI5 application project and added the files in the project folder. I have attached both files as a reference.

Build

Now that everything is in place the project war file can be built, this is done by executing the following command:

“mvn clean install package”

Create eclipse project <optional>

This is an optional step. If you want to use eclipse as your IDE and share the project using a version control system you don’t want to checkin your project definition files. When you have checked out the project execute the following command to create a project definition file:

“mvn eclipse:eclipse”

This creates a project for you which you can import in Eclipse. After you import the project you still have to convert the project to faceted form by opening the project properties:

After selecting “Convert to faceted form…” you have to deselect “SAPUI5 application” from the list and press “Apply”. This will update your project to use the facets. Unfortunately the SAPUI5 facet only works if it was deselected first.

After pressing “Apply” you can now select the “SAPUI5 application” item from the list and press “Apply” again.

Now you can run your application with “Web App Preview” which was not available before.

Congratulations, you are now ready to use Maven to build your project!