Deploy MTA based application to Application Frontend

1. Navigate to BTP Cockpit subaccount.
2. Navigate to Destinations.

UI5

3. Click Create.
4. Select From Scratch.
5. Fill the Destination Details form:

Name	ui5
Type	HTTP
Proxy Type	Internet
URL	https://ui5.sap.com
Authentication	NoAuthentication

6. Click Create.

Northwind

7. Click Create.
8. Select From Scratch.
9. Fill the Destination Details form:

Name	northwind
Type	HTTP
Proxy Type	Internet
URL	https://services.odata.org/northwind/northwind.svc/
Authentication	NoAuthentication

10. Use Add Property button to configure additional destination properties:

WebIDEEnabled	true
WebIDEUsage	odata_gen
WebIDEAdditionalData	full_url
HTML5.DynamicDestination	true

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.

11. Click Create.

1. Navigate to BTP Cockpit subaccount.
2. Navigate to Services > Instances and Subscriptions
3. In the Subscriptions table click on SAP Business Application Studio link.

4. Click CreateDevSpace.
5. Enter Dev Space name (e.g. MyDevSpace).
6. Select SAP Fiori kind of application.
7. Select Application Frontend Service CLI additional SAP extension.
8. Click Create Dev Space.

1. Open the dev space created at the previous step.
2. Click on New Project from Template button of Get Started page. Alternatively, in the menu select:

☰ > File > New Project from Template

3. Select SAP Fiori generator card and click Start.

4. Select List Report Page card and click Next.

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

Data Source	Connect to a System
System	northwind
Service	https://services.odata.org/northwind/northwind.svc/

6. At Entity Selection step enter the following and click Next:

Main Entity	Products
Navigation Entity	None
Table Type	Responsive

7. At Project Attributes step enter select:

Add Deployment Configuration	Yes

Leave the rest of the fields without modification. Click Next.

8. At Deployment Configuration step enter the following and click Finish:

Please choose the target	Cloud Foundry
Destination Name	northwind - https://services.odata.org/northwind/northwind.svc/
Add Router Module	Add Application to Application Frontend Service

9. Click Open folder.

1. Press F1 to open command menu.
2. Select:

Fiori: Preview Application

3. Select:

start fiori run --open "test/flp.html#app-preview"

4. In the opened application preview click on the gear button and select columns to display in the table:

5. Click OK.
6. Click Go button to see the data.

1. Right click on mta.yaml file in project explorer and select Build MTA Project.

2. Wait until MTA project build process is finished.
3. Right click on mta_archives/project1_0.0.1.mtar file in project explorer and select Deploy MTA Archive.

4. If prompted, sign in to Cloud Foundry.
   • Click Open a new browser page to generate your SSO passcode link.
   • Proceed with authentication to generate passcode.
   • Fill the Enter your SSO Passcode field with generated passcode.
   • Click Sign in.
   • Select organization and space.
   • Click Apply.

5. Wait until MTA archive is deployed.

1. Navigate to BTP Cockpit subaccount.
2. Navigate to HTML5 > Application Frontend.

3. Click on the link with application name project1 and see the application running.

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.

1. Navigate to BTP Cockpit subaccount.
2. Navigate to Services > Instances and Subscriptions.
3. In the Subscriptions table click on Appication Frontend Service link.
4. Copy the URL from Application Frontend CLI section of opened welcome page.
5. Navigate to SAP Business Application Studio (same Dev Space that you worked with during previous steps).
6. Open webapp/index.html and change the title of the page:

3. Open integrated Terminal in the root of the project.
4. Build UI:

npm run build

5. Log in to Application Frontend service with CLI, using copied from welcome page URL. When prompted, click Open.

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

6. Re-deploy build results of the UI:

afctl push dist

7. Click on the link in CLI command output or refresh the browser page with UI application to which you navigated from BTP Cockpit.
8. See the title of application (browser tab label) changed.