I recently had to work on a UI5 application hosted on a NetWeaver system (as a BSP application). Making changes to the UI code was quite irritating. I was using the ABAP plugin for Eclipse to sync the files on my local file system with the server. After every code change, I had to “submit” the new code to the server, and then I had to open the link to the BSP application in my browser to see the changes in action.
Not only did I have to click a million times after I had finished making the changes (right-click on the project > Team > Submit > Okay), the upload to the server took around 5 seconds to complete. Also, sometimes the changes wouldn’t be reflected in the BSP application as soon as the upload was done. In some cases, I even had to empty my cache and hard-reload the page to fetch the latest code.
I thought of using the Eclipse UI5 plugin to run the application on my local system. Eclipse creates a temporary Jetty on which the UI5 application is served (If you’ve used the Eclipse UI5 plugin, this is what happens when you right-click a UI5 project > Run As > Web App Preview). The only problem with this approach was that to route my backend calls to the proper system, I’d have to use the Eclipse proxy servlet. For the Eclipse proxy servlet to know that it has to re-route a certain request, the request URL has to begin with “proxy/”. So, to use it in my application, I would need to concatenate “proxy/” with the URL of each and every web service call. Moreover, this URL would work only with the proxy servlet. On the NetWeaver system, I don’t need the “proxy/” prefix. So I would need to add a check at every backend call – If the domain of the application is “localhost”, only then concatenate “proxy/” at the beginning of the request URL.
I didn’t find this solution very convincing. I didn’t want to modify any of the existing code that I had. I wasn’t convinced with the idea of changing my application code to enable it to run on different servers.
Enter: Node.js – a lightweight server-side javascript runtime environment. I had worked with Node.js before so it didn’t take time to write a server using the express and http-proxy modules:
var express = require('express');
var app = express();
app.use(express.static('WebContent'));
app.use(express.static('./'));
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({
target: "http://ifd.wdf.sap.corp:1080"
});
var resourceProxy = httpProxy.createProxyServer({
target: "http://ifd.wdf.sap.corp:1080/sap/public/bc/ui5_ui5/1/"
});
app.route('/sap/*$').all(function(req, res) {
proxy.web(req, res);
});
app.route('/resources/*$').all(function(req, res) {
resourceProxy.web(req, res);
});
var server = app.listen('8080', function() {
console.log("Listening on localhost:8080");
});
This little server I coded was doing the same thing that the Eclipse proxy servlet does – reroute requests to other systems. But with the server I created, I could control exactly which requests to route, and where to send them.
Lines 4 and 5 serve the ‘WebContent’ folder in my project statically. What that means is that whenever a request is made for a resource in the WebContent folder, my server will serve those files from the file system. All the application specific files (Views, Controllers, Components, etc.) will be inside this folder and served statically.
Line 9 creates a proxy server to which I will re-route my backend calls. The job of this proxy is to change the target host of my requests from ‘localhost’ to the development system URL.
I create another proxy server on Line 12 to re-route the request to the backend for the UI5 library, since the path to this library is different. You can also re-use the first proxy server created for this.
Line 16 will capture all requests starting with ‘/sap’ and send them through the ‘proxy’ webserver I created, to the back-end. Line 20 will send all requests starting with ‘/resources’ and send them through the ‘resourceProxy’ to fetch the UI5 resources from the development system.
Now all I need to do after making changes to the UI5 application, is hit Ctrl+S to save the changes, and refresh the page at “localhost:8080” which is where my server is listening. As soon as I refresh the page, the files on my local file system will be served, and since they are updated I will get the latest code on my browser. After I’m done with everything, I just submit all the code to the NetWeaver server at once!
Node.js is awesome! If you want to learn Node.js I recommend the following resources:
