Developing UI5 application locally using Nginx ((http) reverse proxy server)

Overview

This is about developing an UI5 application with access to OData layer on a local machine thanks to a local HTTP server.

You can find different htttp servers on the web but some have advantages for the current context.

But first of all, you can ask yourself:

Why a local http server instead of the SAP solution (SAP Web IDE + Cloud connector for example)?

• in case of you cannot use the SAP solution (SAP could connector is not installed on your environment)
• in case of your web connection is too slow/bad: local server can speed-up application development
• in case of you prefer another development tool (more advanced like MS-Visual Studio or more simple like Sublime text)
• ….

Simple case

For some developments, I use Microsoft IIS Express server. This solution is just fine if your OData layer remains on the same server as your pages.

This server is

• simple
• can host ASP.NET pages / OData services (working nicely with Entity framework and linq)
• can work in a standalone mode (no need extra administrator rights to use it)

Configuration of the server

Given this context:

• IIS Express installed in  => C:\Temp\_WebServer\IIS_Express_10.0
• Local configuration file => C:\Users\godartp\Documents\IISExpress\config

Edit the local configuration file applicationhost.config like this:

!! IIS will restrict access to some file extensions by default… this is annoying for UI5 library files, to enable the access:

You can now launch IIS so that your pages can be requested:

C:\Temp\_WebServer\IIS_Express_10.0\iisexpress.exe   /siteid:MySapUI5App

Issue

The simple case below  is working fine..BUT a common issue arise when you want to consume services that are hosted in another server that the one hosting your pages… Typically when you are  consuming (OData) services from a SAP Netwevear GateWay (NGW).

This is the “Cross-Origin Resource Sharing” issue (CORS): the browser security will detect cross-origin requests and will not allow them.

You can avoid CORS issues using tricks like launching browser in specific mode and configuring servers responses… but theses solutions seem to me a bit wobbly.

So, I looked forward the reverse proxy solution. I found a web server having  the same advantages as IIS but supporting reverse proxy functionality: NginX.

NginX solution

Architecture

Installation of the server

• Download the NginX server on http://nginx.org/en/download.html
• Install it on the local machine

The situation

• WebServer:  C:\Temp\_WebServer\nginx-1.17.10\
• UI5 Librairies: C:\Temp\Applications\OpenUI5_1.60.24\resources
• UI5 Application: C:\Temp\Applications\webapp

Configuration of the server

I want first:

http://localhost/index.html … =>

…to give access to C:\Temp\Applications\webapp\index.html

http://localhost/resources/… =>

…to give access to C:\Temp\Applications\OpenUI5_1.60.24\resources

and then OData services are first requested to NginX server and then are forwarded to the NWG web application server.

So, let’s proceed:

Edit the file nginx.conf

In the server section:

The section “location /sap/…” specify to the server the reverse proxy set-up.

Conclusion

This simple solution allows you to bypass the SAP solution when needed and uses a better approach for developing end-to-end SAP solutions.