4/9/22, 1:03 PM Building and Deploying Standalone Fiori Apps in SAP BTP Cloud Foundry | SAP Blogs

Building and Deploying Standalone Fiori Apps in SAP BTP Cloud

0 0 198

In many use cases it is required to build and deploy a Fiori app as a standalone webapp. This may be the case when you do
not want to buy SAP BTP Portal Service and the SAP BTP Launchpad Service or if you want to build a offline PWA app
among other reasons.

The major difference between standalone Fiori apps and Fiori apps accessed via SAP BTP Portal service or SAP BTP
Launchpad service is that standalone Fiori apps need standalone approuter. Whereas, apps accessed via portal or launchpad
do not need to have a approuter included as the portal and launchpad services provide a approuter out of the box (and that’s
why that option is called Managed approuter as it is managed by those two services and not you). You can read more about
the difference between the Managed approuter and Standalone approuter in this blog post.

In this blog, we will go through the steps to create a standalone Fiori app with it’s own approuter. This blog is supplemental
to my blog series on Building PWA apps where you can learn more about how to build offline PWA apps. Follow me to get
updates on more new content I’ll be publish on these topics.

Pre-requisite

You have setup and configured SAP Cloud Connector and destinations in SAP BTP.

You have at least one unit of Cloud Foundry Compute service, SAP Business Application Studio and Bandwidth service
available for you to use.

You have setup a cloud foundry organization and space successfully.

Steps to Build and Deploy

Open Business Application Studio and create a new project using “Start from Template” option. Select template “Basic
Multitarget Application” and click start.

Provide name as “OfflinePWA” and press finish. This will create an empty app in your workspace.

Right click on the file “mta.yaml” and select the option “Create MTA Module from Template” to add approuter module.

https://blogs.sap.com/2022/04/08/building-and-deploying-a-standalone-fiori-apps-in-sap-btp-cloud-foundry/ 1/6
4/9/22, 1:03 PM Building and Deploying Standalone Fiori Apps in SAP BTP Cloud Foundry | SAP Blogs

Right click on mta.yaml to Create MTA Module from Template

In the resulting Wizard, select approuter Configuration, select “Standalone Approuter” as the option. Do not select managed
approuter! Select “Yes” for “Do you want to add authentication”, and “Yes” for “Do you plan to add a UI?”

Press Finish.

Now, again right click on the file “mta.yaml” and select the option “Create MTA Module from Template” to add the UI5
module.

Select “SAP Fiori application” from the templates and press “Start”. If you are building an offline app, select “SAPUI5
freestyle”. Do not select “Fiori elements” for offline scenarios as Fiori elements does not support offline scenarios.

Select SAPUI5 application and select next. Select “Data Source” as “none” and press Next.

Let the View Name be as suggested by default and provide the project name as “offlinepwafioriapp”, application title as
“Hello World!, Application namespace, and description as you like. Select “Add deployment configuration to MTA project”
as “Yes”, “No” for both “Add FLP configuration” and “Configure advanced options”.

In the “Deployment Configuration” screen, select target as “Cloud Foundry” and the destination pointing to the SAP
backend server. Press Finish.

https://blogs.sap.com/2022/04/08/building-and-deploying-a-standalone-fiori-apps-in-sap-btp-cloud-foundry/ 2/6
4/9/22, 1:03 PM Building and Deploying Standalone Fiori Apps in SAP BTP Cloud Foundry | SAP Blogs

Add Connectivity Service to MTA.yaml

Before starting to code, ensure that you have added reference to the BTP Connectivity service in the project’s “mta.yaml”
file otherwise the app will be unable to connect to the SAP backend system via cloud connector. (Be aware that mta.yaml is
sensitive to indentation and spacing.  Wrong spacing or indentation will cause your mta.yaml to not work correctly.)

To be able to connect to the SAP backend via cloud connector, you require both, the “Connectivity” service as well as the
“Destination” service. Destination service tells the app what system to connect to and the connectivity service establishes
the actual connection with the system.

Open the mta.yaml for the project and find the approuter module under the “modules” section as shown below. Add a new
entry under the “requires” section for the connectivity service with name “conn_OfflinePWA” as shown below.

_schema-version: "3.2"
ID: OfflinePWA
version: 0.0.1
modules:
- name: offlinepwa-approuter
type: approuter.nodejs
path: offlinepwa-approuter
requires:
- name: OfflinePWA_html_repo_runtime
- name: uaa_OfflinePWA
- name: conn_OfflinePWA
- name: OfflinePWA-destination-service
group: destinations

https://blogs.sap.com/2022/04/08/building-and-deploying-a-standalone-fiori-apps-in-sap-btp-cloud-foundry/ 3/6
4/9/22, 1:03 PM Building and Deploying Standalone Fiori Apps in SAP BTP Cloud Foundry | SAP Blogs

Now, find the “resources” section and add the definition of “conn_OfflinePWA” service we referenced above as shown
below. Then, save the mta.yaml file and close it.

resources:
- name: conn_OfflinePWA
type: org.cloudfoundry.managed-service
parameters:
service: connectivity
service-name: OfflinePWA-conn-service
service-plan: lite

Next, if you are developing this app for offline use case, we need to modify one entry and add another one in the
package.json file of the Fiori module to ensure that you are able to test the PWA app, without Fiori Launchpad, locally, as
well as on the network.

Open you project in the explorer and navigate to the Fiori app module you had generated in the previous steps. Find the file
“package.json” under the Fiori app module (and not under the approuter module) and open it for editing.

In the package.json, find the line with definition of “start-noflp” under “scripts” section. Modify the definition of start-noflp
as shown below and another definition called start-noflplocal as shown below.

"start-noflp": "fiori run --config ./ui5.yaml --open 'index.html?sap-client=400'",

Now, we are ready to test the deployment of the app to ensure it works before we actually start coding the app.

https://blogs.sap.com/2022/04/08/building-and-deploying-a-standalone-fiori-apps-in-sap-btp-cloud-foundry/ 4/6
4/9/22, 1:03 PM Building and Deploying Standalone Fiori Apps in SAP BTP Cloud Foundry | SAP Blogs

Right click on mta.yaml file and select option “Build MTA Project” (this option will not be available anywhere else). This
will start a new terminal window where BTP will execute the build tasks.

Once the tasks have finished, find the generated MTA archive under folder “mta_archives”. Right click on the generated
MTA archive and select option “Deploy MTA Archive”. BTP will prompt you for the URL to your Cloud Foundry Instance,
username (your email address associated with your S User ID) and password (Password of your S user account and not of
the SAP Universal account). This will start a new terminal window where BTP will execute the deploy tasks.

Once the deployment is finished, you will find the URL of the deployed application at the bottom of the log in a log line
looking like this “Application “offlinepwa-approuter” started and available at “XXX-XXX-
XXXX.cfapps.ap20.hana.ondemand.com””. Paste this URL into a browser, logon and you should see the app running.

What Did the Deploy Do?

If the app was being deployed for the first time, the deploy step creates an instance of the following services and then binds
them to our approuter instance after deploying that as well. On subsequent runs it’ll just update these services.

XSUAA Service
Destination Service (xxxx-destination-service)
Connectivity Service (xxxx-conn-service)
HTML Repo Host Service
HTML Repo Runtime Service
Your App router Application (Used to route calls to SAP backend and your Fiori code)

Bonus Tip: You can create a new destination inside the destination service by clicking on the service name. SAP BTP will
give this destination priority over existing destination of the same name at sub-account level.

This is also helpful when you are moving your app to Production because you can now have a specific destination just for
your app which other apps cannot use and therefore the destination name can remain the same across Dev, QA and Prod.
However, note that SAP Business Application Studio preview functionality uses the destination maintained at subaccount

https://blogs.sap.com/2022/04/08/building-and-deploying-a-standalone-fiori-apps-in-sap-btp-cloud-foundry/ 5/6
4/9/22, 1:03 PM Building and Deploying Standalone Fiori Apps in SAP BTP Cloud Foundry | SAP Blogs

level so you’ll still need the destination of your system maintained at subaccount level for development only (with the same
name as maintained in the destination service).

Now you are all set to finish writing your app! Ask me questions in comments below and let me know how you go with
this tutorial.

https://blogs.sap.com/2022/04/08/building-and-deploying-a-standalone-fiori-apps-in-sap-btp-cloud-foundry/ 6/6