Develop and deploy a HTML (Angular/Vue/React) app on SAP BTP (Cloud Foundry) access S/4 On-premise, Part I
When we talk about SAP BTP, it is always a fancy idea to write Frontend app using modern technologies, like React/Angular/Vue. And it will be great that our new Frontend app can access On-premises system.
To avoid the misunderstanding (at least I was lost in first two weeks), it is not possible to access On-premises in a pure HTML (Angular/Vue/React) app. And it is only allowed to access backend system in a HTML (Angular/Vue/React) app with certain ways. This post will show one of the possible ways to achieve so.
Also, modern browsers restrict the call by CORP (Cross-Origin Resource Policy).
Diagram for A static-file based HTML app
- You need a SAP BTP Account (A trail account is sufficient)
- Destination created to SAP Cloud Connector, and connection tested ok
- Your SAP On-Premise System (S/4 OP)
- You need a SAP Cloud Connector, and
The detail information of prerequisites above can be easily found in related help documentation and/or blogs, which won’t be converted by this post.
Before going deep with ‘Development Steps’, it is crucial to understand the concepts provided by SAP BTP, especially the service provided to communication with On-premise system.
The important part of the destination service is the destination configuration.
The SAP Cloud Connector connect the Cloud (SAP BTP) with your S/4 On-premise system, and give it a virtual URL.
The Destination is defined in SAP BTP account side for the specified S/4 On-premise system.
The connectivity service is mandatory to access SAP S/4 On-premise system. It is working as a proxy which translate the call to destination to real S/4 On-premise system.
User Account and Authorization Service (UAA)
UAA service provides the authorization related service.
App router is a Node.js module which worked as a proxy for frontend application to route their calls to related destination (via Connectivity services).
The App Router here provides a Node.js wrapper to the HTML application where can help redirect HTML application to related destination and make it invisible to end user. It just send out HTTP calls to the API points with ‘nickname’ which hides the detail of backend system.
For instance, the HTML app we would like to create use ‘/erp’ as the start point to call the backend system, which app router will direct to the Connectivity Service and Destination Service for a real call.
Put all together
It is old diagram still using ‘SAP Cloud Platform’ but the story is the same:
Please visit Part II (Develop and deploy a HTML (Angular/Vue/React) app on SAP BTP (Cloud Foundry) access S/4 On-premise, Part II | SAP Blogs) which come with detail development steps.