UI5 Mobile SplitApp Boilerplate


There are different approaches to start a new project with SAP UI5 or OpenUI5 (let’s call it simply UI5). One way is to use the SAP UI5 Eclipse Tools described in the blog post „SAP UI5 – Quickstart“.  The generated UI5 Application Project is very, very basic and you are bound to Eclipse to do your development, which is not everybody’s favorite IDE of course.

On the other hand there are already some really nice UI5 Tools, which can help you. For example the Yeoman generator for OpenUI5, which is based on node.js and can generate a nice application structure or only single components. Another example is the Sublime Text 2 Package for UI5/OpenUI5, which contains Snippets and Templates and is very useful.

So whatever your favorite IDE is, either Eclipse, Sublime Text, WebStorm, IntelliJ, Xcode, Visual Studio, emacs, notepad or vi, you should be able to use Git and clone the UI5 Mobile SplitApp Boilerplate from GitHub (if not, you should try hard) resulting in a nice app structure with base feature, which can be used as starting point for development:

Get UI5 Mobile SplitApp Boilerplate from GitHub

The Boilerplate can be found under the following Github Location: https://github.com/6of5/UI5SplitApp-Boilerplate

Open a terminal/console and run the following command to clone the source to your local file system.

git clone https://github.com/6of5/UI5SplitApp-Boilerplate.git

A new folder „UI5SplitApp-Boilerplate“ is generated which contains the app source code with the following file structure:

Run UI5 Split App with Node.js

Assuming you have node.js (with npm) already installed on your local computer, you now have to do the following steps within the „UI5SplitApp-Boilerplate“ folder. This will install express and open as node modules and finally  start a static server web server (More Infos on SCN Blog Post from John Patterson):

npm install express
npm install open
node static_server.js

You now can access the App unter the following URL:


Run directly from file system (in Chrome)

The most easiest way without the need of a web server, is running the app directly from the file system. Therefore you need to start Chrome with some start parameters to disable web security and enable File Access:

On Windows

chrome.exe --disable-web-security --allow-file-access-from-files

On Mac

open /Applications/Google\ Chrome.app --args --disable-web-security --allow-file-access-from-files

With this in place you can open the index.html from the file system and start the app via (Chrome Menu File -> Open File).


Comments are closed.