Multi-Target Application (MTA): SAP Fiori Application using the Application Frontend Service

Diagram

Description

This an example of a multi-target application (MTA) including a SAP Fiori application that is deployed to the Application Frontend service via the Generic Application Content Deployer. The Application Frontend service comes with the capabilities of the application router, so applications must include an xs-app.json file (also see minimal requirements).

This sample comes with the option of using either the Northwind OData service or a self-hosted backend service. By default, the Northwind OData service is used. If you want to use the self-hosted backend instead, go into the ui5.yaml file and use the ui5-middleware-cap (currently commented out) instead of the fiori-tools-proxy. Also make sure to change the destination url in the mta.yaml file to point to your (deployed) self-hosted backend service.

Download and Deployment

Follow the initial setup guide for the Application Frontend service.

Download the source code:

git clone https://github.com/SAP-samples/multi-cloud-html5-apps-samples
cd multi-cloud-html5-apps-samples/application-frontend-mta

Build the project:
```
npm install
npm run build
```
Login to Cloud Foundry using the Cloud Foundry CLI (see tutorial):
```
cf login -a <API Endpoint>
```
Deploy the project:
```
npm run deploy
```

Check the Result

List the Deployed HTML5 Apps

You can find a list of all deployed HTML5 applications for the Application Frontend service in the SAP BTP Cockpit:

Check the SAP Fiori Application

Click on the link of the deployed HTLM5 application in the SAP BTP Cockpit to open it. You are redirected to a sign-on page before you can see the app.