"Configure destinations to facilitate fast development with SAP Business Application Studio project templates. Create the MTA project with Fiori application and Application Frontend deployment configuration. Preview Fiori application without deploying it. Build and deploy MTA project. Find the link to deployed Fiori application and run it. Re-deploy UI static resources with CLI."

"What do I need before I start?"

" SAP Business Technology Platform subaccount Cloud Foundry environment enabled in subaccount Subscription to Application Frontend service Subscription to SAP Business Application Studio "

Deploy MTA based application to Application Frontend

Overview

You will learn

✔Configure destinations to facilitate fast development with SAP Business Application Studio project templates.
✔Create the MTA project with Fiori application and Application Frontend deployment configuration.
✔Preview Fiori application without deploying it.
✔Build and deploy MTA project.
✔Find the link to deployed Fiori application and run it.
✔Re-deploy UI static resources with CLI.

V Vadim Tomnikov August 21, 2026

Created on October 23, 2025

Contributors

More from Vadim Tomnikov

TUTORIAL Make Your Application Variant (created in an SAPUI5 Adaptation Project) Available to Business Users in SAP S/4HANA Cloud Public Edition (3 of 3) ⏱ 30 min. TUTORIAL Work with SAPUI5 Adaptation Projects to extend the source code of an application variant to be deployed to SAP S/4HANA Cloud Public Edition (2 of 3) ⏱ 30 min. TUTORIAL Work with SAPUI5 Adaptation Projects to generate and make simple changes to an application variant of an SAP Fiori application in SAP S/4HANA Cloud Public Edition (1 of 3) ⏱ 30 min.

See all 4 tutorials by Vadim Tomnikov →

Prerequisites

SAP Business Technology Platform subaccount
- Cloud Foundry environment enabled in subaccount
- Subscription to Application Frontend service
- Subscription to SAP Business Application Studio

Steps

Step 1 Configure Destination

—

Navigate to BTP Cockpit subaccount.

Navigate to Destinations.

UI5

Click Create.

Select From Scratch.

Fill the Destination Details form:

Nameui5TypeHTTPProxy TypeInternetURLhttps://ui5.sap.comAuthenticationNoAuthentication

<li>Click <strong>Create</strong>.</li>
<p><strong>Northwind</strong></p>
<li>Click <strong>Create</strong>.</li>
<li>Select <strong>From Scratch</strong>.</li>
<li>Fill the <strong>Destination Details</strong> form:</li>
<table></table>
    <tbody></tbody>
        <tr><th>Name</th><td><strong><code>northwind</code></strong></td></tr>
        <tr><th>Type</th><td><strong><code>HTTP</code></strong></td></tr>
        <tr><th>Proxy Type</th><td><strong><code>Internet</code></strong></td></tr>
        <tr><th>URL</th><td><strong><code>https<span>://</span>services.odata.org/northwind/northwind.svc/</code></strong></td></tr>
        <tr><th>Authentication</th><td><strong><code>NoAuthentication</code></strong></td></tr>
    

<li>Use <strong>Add Property</strong> button to configure additional destination properties:</li>
<table></table>
    <tbody></tbody>
        <tr><th>WebIDEEnabled</th><td><strong><code>true</code></strong></td></tr>
        <tr><th>WebIDEUsage</th><td><strong><code>odata_gen</code></strong></td></tr>
        <tr><th>WebIDEAdditionalData</th><td><strong><code>full_url</code></strong></td></tr>
        <tr><th>HTML5.DynamicDestination</th><td><strong><code>true</code></strong></td></tr>
    

<blockquote><p>The additional destination properties above are only required to enable relevant SAP Business Application Studio capabilities. Add them to destinations used in development, but not in production.</p></blockquote>
<li>Click <strong>Create</strong>.</li>

Step 2 Create SAP Business Appication Studio Dev Space

Step 3 Create Fiori Application From Template

Open the dev space created at the previous step.

Click on New Project from Template button of Get Started page. Alternatively, in the menu select:

☰ > File > New Project from Template

Select SAP Fiori generator card and click Start.

Select List Report Page card and click Next.

At Data Source and Service Selection step enter the following and click Next:

Data SourceConnect to a SystemSystemnorthwindServicehttps://services.odata.org/northwind/northwind.svc/

At Entity Selection step enter the following and click Next:

Main EntityProductsNavigation EntityNoneTable TypeResponsive

At Project Attributes step enter select:

Add Deployment ConfigurationYes

<p>Leave the rest of the fields without modification. Click <strong>Next</strong>.</p>

At Deployment Configuration step enter the following and click Finish:

Please choose the targetCloud FoundryDestination Namenorthwind - https://services.odata.org/northwind/northwind.svc/Add Router ModuleAdd Application to Application Frontend Service

Click Open folder.

Step 4 Preview Application

Step 5 Build & Deploy MTA

Step 6 Run Application

Step 7 Re-deploy Application with CLI

This step of tutorial is optional. It shows how you can shorten the UI development cycle by skipping the build and re-deploy of the whole MTA. The technic below allows to re-deploy only static resources of UI application.

Navigate to BTP Cockpit subaccount.

Navigate to Services > Instances and Subscriptions.

In the Subscriptions table click on Appication Frontend Service link.

Copy the URL from Application Frontend CLI section of opened welcome page.

Navigate to <string>SAP Business Application Studio (same Dev Space that you worked with during previous steps).

Open webapp/index.html and change the title of the page:

Open integrated Terminal in the root of the project.

Build UI:

Shell

npm run build

Shell

afctl login --sso -a '<URL>'

Re-deploy build results of the UI:

Shell

afctl push dist

Click on the link in CLI command output or refresh the browser page with UI application to which you navigated from BTP Cockpit.

See the title of application (browser tab label) changed.

Resources

Next Steps

Discussion

Share feedback on this tutorial or join the conversation in SAP Community.

Submit detailed feedback

Discuss in Community

Deploy MTA based application to Application Frontend

Overview

You will learn

More from Vadim Tomnikov

Prerequisites

Prerequisites

Steps

Resources

Next Steps

Related Tutorials

Discussion

Joule

AI Notice