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 or the SAP BTP Launchpad Service or if you want to build a offline PWA app and also if you want to build a multi tenant application among other many possible 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.

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.

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

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 add another new definition called “start-noflplocal” as shown below. The reason for the first change is that the default definition for “start-noflp” skips the config option which causes the application preview to not work.

Remember to change the sap-client to a value which is valid for you.

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

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

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 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.