Technical Articles
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.
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