Fiori Deployment Part 2: Deploying to SAP BTP — HTML5 Repository and Managed Approuter
Full lesson currently free to read · AI practice limits apply separately
Deploy Fiori apps on SAP BTP: multi-target applications (MTA) that put apps in the HTML5 application repository, the managed approuter serving them through SAP Build Work Zone, destinations for back-end calls and xs-app. json routing.
Visual overview
Explanation
📌 KEY POINTS
✅ On BTP, UI apps are deployed to the HTML5 application repository, usually as part of an MTA.
✅ The managed approuter serves apps and handles authentication and routing.
✅ xs-app.json defines routes, for example sending /sap requests to a destination.
✅ Destinations connect to S/4HANA or other back ends, on-premise via Cloud Connector.
⚠️ Hard-coded back-end URLs in apps break when moving between subaccounts.
━━━━━━━━━━━━━━━━━━━━
▶ WHERE WE ARE
Part 1 deployed to ABAP. Part 2 deploys to SAP BTP.
━━━━━━━━━━━━━━━━━━━━
▶ 1. MTA AND HTML5 REPOSITORY
A multi-target application (mta.yaml) bundles UI modules and their deployer. Building it with the Cloud MTA Build Tool and deploying with the Cloud Foundry CLI puts the zipped apps into the HTML5 application repository of the subaccount. CAP projects often include UI modules in the same MTA.
━━━━━━━━━━━━━━━━━━━━
▶ 2. MANAGED APPROUTER
With SAP Build Work Zone, a managed approuter serves apps from the HTML5 repository, handles user authentication through XSUAA or identity services and applies routes. Teams no longer run their own approuter application for standard cases.
━━━━━━━━━━━━━━━━━━━━
▶ 3. ROUTING WITH XS-APP.JSON
Each app has xs-app.json defining routes: for example, requests starting with /sap are forwarded to a destination pointing to S/4HANA, and other paths serve static files. Authentication types and CSRF protection are configured per route.
━━━━━━━━━━━━━━━━━━━━
▶ 4. DESTINATIONS
Destinations in the subaccount hold back-end URLs, authentication (for example principal propagation) and proxy type. Apps reference destination names, not URLs, so the same app works in different subaccounts for DEV, QA and PROD.
━━━━━━━━━━━━━━━━━━━━
▶ 5. LANDSCAPE
Use separate subaccounts per stage, deploy the same MTA artefact through them via CI/CD or transport management service, and configure destinations per subaccount. Content then appears in Work Zone through the content channel of the HTML5 repository.
━━━━━━━━━━━━━━━━━━━━
▶ STEP BY STEP
- Add a deploy configuration for Cloud Foundry to an app.
- Build the MTA and deploy to a test subaccount.
- Configure xs-app.json routes to a destination.
- Add the app to a Work Zone site and test.
✅ CHECKPOINT: the app runs from the HTML5 repository through Work Zone and reaches its back end via a destination.
How the SAP process fits together
SAP PROCESS EXPLORER · Fiori: from service to user
ERPClimb.comDeployment and Lifecycle — process breakdown
Topic-specific conceptual flow: how key objects and decisions fit together. SAP configurations and exceptional cases can follow different paths.
Selected process stage
Build
Build the app and its preload bundles
What this specific lesson teaches
Deploy Fiori apps on SAP BTP: multi-target applications (MTA) that put apps in the HTML5 application repository, the managed approuter serving them through SAP Build Work Zone, destinations for back-end calls and xs-app.json routing.
Key lesson principle: On BTP, UI apps are deployed to the HTML5 application repository, usually as part of an MTA.
Representative SAP learning flow, not a guarantee of system runtime sequence in every scenario. The chapter-specific facts come from the published lesson text.
Real project scenario
An app worked in the development subaccount but failed in QA because its manifest contained the development back-end URL. Replacing it with a /sap route to a destination name, configured per subaccount, let the same artefact move through all stages.
Common mistakes
- Back-end URLs in app code.
- Running a custom approuter unnecessarily.
- Different artefacts per stage.
- Routes without proper authentication.
Best practices
- MTA-based deployment.
- Managed approuter with Work Zone.
- Destinations per subaccount.
- Same artefact through all stages.
Interview angle
Interviewers ask how Fiori apps are deployed on BTP, what the HTML5 repository and managed approuter do and how destinations make apps portable.
Practice this lesson
Original educational case studies for SAP consultants, not official SAP certification exam questions. Verify product edition and implementation details against the current SAP documentation.
Quick check
0 of 3 questions attempted
1. Where are UI5 apps stored when deployed to SAP BTP Cloud Foundry for Work Zone?
2. What does xs-app.json define?
3. Why reference destinations instead of URLs in the app?
Interview questions
1. How do you deploy and run a Fiori app on SAP BTP that reads data from on-premise S/4HANA?
Answer it in your own words first, then compare.
Check before use: lesson examples are educational, not a guarantee of correctness for your SAP edition or release. Sample code has not been executed on your SAP system. Confirm API availability, syntax, authorizations and business impact in an approved development or test environment.