Detailed explanation of the ui5.yaml file in the SAP Fiori Elements application

In the fourth article of this tutorial, we introduced three modes for launching SAP Fiori Elements applications locally.

• 4. Analysis of three modes of SAP Fiori Elements local application startup

After starting in the default way, the command line yarn start, the files in the project folder ui5.yamlwill 默认be loaded and parsed.

ui5.yamlThis file will also be encountered when developing Freestyle UI5 ​​locally. I have introduced it in another set of tutorials , a step-by-step learning tutorial suitable for SAP UI5 developers :

• SAP UI5 Application Development Tutorial Ninety-Nine - In-depth discussion of package.json and ui5.yaml in the SAP UI5 local development environment

• One hundred and forty-five of SAP UI5 application development tutorials - analysis of the impact of ui5.yaml files on building the Release version application directory during local development of SAP UI5

This article continues to introduce this ui5.yamlfile and knowledge related to local development of Fiori Elements.

So far, the scenario of the Fiori Elements application we have developed is that the Fiori Elements application running locally, that is, localhost:8080calls the OData service deployed on the SAP ES5 server, and displays the result of the OData service call in the browser.

• The protocol of the local application is http, the host name is localhost, and the port number is 8080
• The address of the remote ES5 OData service: https://sapes5.sapdevcenter.com, the protocol is https, the host name is sapes5.sapdevcenter.com, and the port number is 80.

Therefore, this is a typical browser cross-domain access scenario. Directly accessing the ES5 OData service through JavaScript cross-domain in the local Fiori Elements application will be blocked by the browser security policy.

Since browser cross-domain access is an extremely common scenario, there are various solutions to solve this problem:

• SAP UI5 application development tutorial twenty-four extra chapters - use the proxy server that comes with SAP Fiori Tools to solve cross-domain problems encountered by locally running SAP UI5 applications accessing remote services

• SAP UI5 Application Development Tutorial 25 - Use a self-developed proxy server to solve the cross-domain problem of SAP UI5 application accessing remote OData services

• One hundred and eleven of SAP UI5 application development tutorials - SAP UI5 FileUploader control implements local file upload, and encounters cross-domain access errors when receiving server-side responses

• One hundred and twelve of the SAP UI5 application development tutorial - using a self-developed proxy server to solve cross-domain access errors encountered when uploading files by SAP UI5 FileUploader

• One hundred and twenty-one of SAP UI5 application development tutorials - One-click deployment of out-of-the-box proxy servers to solve cross-domain problems in accessing remote OData services during SAP UI5 application development

fiori-tools-proxyThe method used in this tutorial is to configure this proxy server solution in ui5.yaml .

We observed the OData request url initiated by the Fiori Elements application in the network panel of the Chrome developer tool:

http://localhost:8080/sap/opu/odata/sap/SEPMRA_PROD_MAN/

As you can see, this url also http://localhost:8080starts with , thus avoiding cross-domain problems.

However, the OData service does not exist on the host localhost:8080 /sap/opu/odata/sap/SEPMRA_PROD_MAN/because the service is deployed on the SAP ES5 server.

This is fiori-tools-proxywhere proxy servers come into play.

The following are the details of this article .