Skip to Content
Technical Articles
Author's profile photo Pierre Godart

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

 

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.

 

Assigned tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Anand Rai
      Anand Rai

      Hi @0001916606,

       

      Thanks a lot for this blog.

      I am new to this nginx, so can you please let me know how can i run my app once I created all the conf file as per your blog.

      I have a VS Code and developed the project as per this blog. But I am wandering how to run this nginx file now.

       

      Regards,

      Anand