Running UI5 Apps on local node.js server

[htammen]

Introduction

As far as I know most of the UI5 developers use a Tomcat server to host their UI5 applications and run them locally. If they don't only work with the mockserver but also connect a real backend system from their local pcs they have to configure a proxy servlet on this Tomcat server additionally.

In this blog I show you how to avoid the installation, configuration and starting of a local Tomcat server but therefore use a lightweight node.js server. This server starts in approximately < 30 ms and eats up less memory than Tomcat.

Step-by-Step guide

This documentation is written for Unix and Mac OS but can easily be adapted to Windows. I also described the usage of OpenUI5. See the remarks at the end if you have to use SAPUI5.

1. Install node.js if not already done. Check it by running

   node --version

   at the command line. If node is already installed you should get something like
   

   
   
   v0.12.7
   
   

2. Download OpenUI5 and extract it to a directory of your choice at your harddisk (e.g. /Users/me/UI5/release_1_30_8)
3. Download static_server.js file from my github repository and save it in your project folder (read the README file of the repository if you want to know what the file does).
4. Create a symbolic link with name resources in your project folder that links to the resources folder of your OpenUI5 download.
   

   
   
   ln -s /Users/me/UI5/release_1_30_8/resources resources
   
   

   The second parameter (here: resources) has to be identical with the src-setting (line 02) in your UI5 bootstrap
   

   <script id="sap-ui-bootstrap"
   
     src="resources/sap-ui-core.js"
   
     data-sap-ui-libs="sap.m"
   
     data-sap-ui-theme="sap_bluecrystal"  data-sap-ui-xx-bindingSyntax="complex"  data-sap-ui-resourceroots='{
   
     "shambles.blog": "./"
   
     }'>
   
     </script>

5. Open a Terminal / Commandline window and move into your project folder (cd...)
6. Download package.json from my github repository into your project directory
7. Call the node package manager npm to install the http-proxy package that is needed by the following script.
   

   npm install

8. Run the static_server.js with node
   

   
   
   node static_server.js
   
   

9. Open your browser and type

   http://localhost:8888/index.html

   

Code adjustments when using life Backend

This is nearly everything you have to do. But if you run your UI5 application against a life backend gateway server or other OData provider you need to adjust one line of code in your UI5 sources and one to three lines in the static_server.js file.

UI5 code

In your UI5 code you have to tell sapui5 that it should load the OData service from your localhost instead of the real backend server. If you don't do that you won't get any result because of SOP (Same Origin Policy). So change the URL to your OData service in your Component.js file like shown below.

serviceConfig : {

  name : "Northwind",

  // serviceUrl : "http://services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc/"

  serviceUrl : "http://localhost:8888/proxy/V2/(S(sapuidemotdg))/OData/OData.svc/"

}

As you see I not only changed the hostname and port but also prepended the term /proxy to the URL. This is needed in the static_server.js file to differentiate between request that have to be send to the backend system and those that can be processed locally.

static_server.js

In the static_server.js file you have to tell the node.js server process which request should be forwarded to the backend server and which backend server to use. You do that with the following lines quite at the beginning of the script.

///////////////////////////////////////////////////////////////////////////

// Adjust this settings to your needs for proxying the backend requests  //

///////////////////////////////////////////////////////////////////////////

proxy_cfg = {

  // the prefix you use to call your backend functions via the proxy server

  prefix: "/proxy/",

  // the host of your backend server

  host: "services.odata.org",

  // port of your backend server

  port: ""

};

In line 06 I tell the server that all requests that have the prefix /proxy/ should be send to the backend OData provider. The host and proxy parameters define the backend system to use.

Using SAPUI5

If you are working with SAPUI5 instead of OpenUI5 because you make use of the additional controls of the licensed version you cannot retrieve the sources from a central server on the internet like this is possible for OpenUI5. You can either download them via Service Marketplace, extract the corresponding jar files from the Eclipse plugins, download them from your ABAP server, ...

I personally prefer unpacking the Eclipse plugins. Have a look here for setting up your Eclipse IDE and installing the plugins. It goes beyond the scope of this document to describe how to extract the sources from the plugins but usually a Java developer will know it.

Limitations

The static_server.js currently does not support https calls. If you need to call your backend via https you have to adjust the script. Please have a look at node http-proxy package for details.

Credits

When I explored the way to use node.js as my UI5 server I was inspired by several resources on the internet. Therefore I would like to thank the following people for their contributions.

• I basically copied the static_server.js from Ryan Florence's github repositiory and enhanced it.
• The http-proxy can be found at the nodejitsu repositiory
• The idea with the symbolic link to manage my UI5 sources I got from this great blog of dj.adams that is really worth reading.