From time to time the developers face the situation that they have a UI5 application developed on their laptop which needs to be copied to the customer or another machine where the required components are not available, e.g. Eclipse, UI5 Addon, etc are missing. The purpose could be, for example, a demonstration of an early phase UI5 prototype locally (which might not be uploaded to the server for various reasons).
This post describes how you can export your UI5 application as a war-file, and what needs to be done on the other machine to make the UI5 application running there in the test mode.
Exporting the UI5 application
In Eclipse we select the project in the Project Explorer perspective and choose in the context menu the “export” function. In the export dialog window we select the Web / WAR export destination; next we select the project name as a Web Project, and the destination name for our war-file.
Once export is finished, we copy the war-file to another machine. Basically the war-file contains everything we need, including our application and UI5 libraries.
Installing HTTP Server Jetty
We will use the HTTP server Jetty that can parse the war-files out of the box. In this step we assume, that “the demo-machine” has not yet the Jetty server installed. Otherwise, we can skip this step.
We used the Jetty version 7.x, as some later versions (e.g. version 9) had some configuration issues. So we downloaded the Jetty archive from here: http://download.eclipse.org/jetty/7.6.10.v20130312/dist/ and unpacked it to the user directory, e.g. C:\Users\<user-name>\jetty\
We need to copy the war-file to the subfolder webapps of our Jetty installation.
Starting Jetty Server
In the Start menu run cmd, in the cmd-window switch to the Jetty main folder
and start the Jetty server:
java -jar start.jar
The Jetty server is now up and running. By default it is listening to the port 8080. The cmd-window must stay open while you are testing your application.
Testing UI5 app in the browser
Now we start the browser and specify the link to our UI5 application
Note, the war-filename should be provided without “.war” extension.
Congrats! The app is now up and running.
Note, be careful with the external links (e.g. gateway services). The browser can detect them as violating the cross-site-scripting security policy. For that, we used either local data samples stored as a JSON array, or we could configure the Jetty reverse proxy, or temporarily disable the XSS policy in the browser (e.g. chrome has a special property).
About the authors
Vladislav Bezrukov is Development Architect at SAP Consulting focusing on integration technologies, Web and REST Services in ABAP NetWeaver platform (ABAP WS, Gateway). His further professional interests extend to SAP UI5 and HANA technologies, which he is using in his projects in the past couple of years. Email: email@example.com
Florian Backfisch is Development Consultant at SAP Consulting. His professional interests are ABAP and UI technologies. Email: firstname.lastname@example.org
Johannes Demund is Development Consultant at SAP Consulting. He focuses on ABAP technologies and user interfaces, including NetWeaver Business Client, WebDynpro ABAP, and SAP UI5. Email: email@example.com
This blog does not represent nor substitute the official SAP documentation. The views expressed by the authors do not necessarily reflect the views of their employer.