Develop and deploy a HTML (Angular/Vue/React) app on SAP BTP (Cloud Foundry) access S/4 On-premise, Part I

[Hongjun_Qian]

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.

 

Conclusion first

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.

Why?

A pure HTML app, not matter which UI framework is using, normally served as 'Static Files' on server side, hence the communication between frontend and backend are 'transparent' to the end user. The term `transparent` means the communication detail can be easily figure out in browser's Development tools, such as 'Network' of Chrome/Edge. It is known challenge to a static-file based HTML app, the logon credentials to access backend system may visible to end user, that's why we normally using Access Token to access backend system. But On-premises system may not support OAuth2 or OpenID protocol. 

Also, modern browsers restrict the call by CORP (Cross-Origin Resource Policy).

Diagram for A static-file based HTML app

 

Prerequisites

• 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.

 

Concepts

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.

Destination Service

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.

 

Connectivity Service

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

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, ...) which come with detail development steps.