AppRouter path mapping – Custom Domain

[WouterLemaire]

Problem

As a follow up on my experience with custom domains, I started applying more custom domains to my applications running on BTP. Feel free to read more about the setup of a custom domain here: https://community.sap.com/t5/technology-blogs-by-members/custom-domains-for-btp-cloudfoundry-applica...

One of these applications is a CAP application with a UI5 app on top of it and an approuter to access it, the app is published on my GitHub account here: https://github.com/lemaiwo/ReCAPBTPServiceOverview/tree/main

After applying my custom domain to this particular application the approuter added a path behind the url. When I navigated to: https://btp-services.lemaire.tech/ (where “lemaire.tech” is the custom domain with “btp-services” as hostname),

It forwarded me to: https://btp-services.lemaire.tech/recapcapadvancedprogrammingmodelbtpservices/index.html

 

Most of the configuration behind this, was provided by the generators in BAS. In the xs-app.json of the UI5 app the following config was provided:

https://github.com/lemaiwo/ReCAPBTPServiceOverview/blob/main/app/recap.capadvancedprogrammingmodel.b...

In the approuter there were no mappings but it did had a welcomeFile:

https://github.com/lemaiwo/ReCAPBTPServiceOverview/blob/main/approuter/xs-app.json

 Because of this config, the approuter automatically adds the path of the welcomeFile to the url:

This path is based on the name of the application and it is needed for the approuter to forward the user to the right application. In this specific example, I only have one html5 app so that’s why it’s put in the welcomeFile. How this path is generated and accessible by the approuter is very well explaned in this blog post:

https://community.sap.com/t5/technology-blogs-by-sap/sap-application-router/ba-p/13393550

Especially the part for html5 app integration is important:

Integration with HTML5 App Repo service:

The application router supports seamless integration with the HTML5 Application Repository service. When the application router interacts with HTML5 Application Repository to serve HTML5 Applications, all static content and routes (xs-app.json) are retrieved from HTML5 Application Repository. In case application router needs to route to non HTML5 Applications, it is possible to model that in the xs-app.json of the application router.

To integrate HTML5 Application Repository to an application router based it is required to create an instance of html5-apps-repo service of plan app-runtime and bind it to the application. xs-app.json routes that are used to retrieve static content from HTML5 Application Repository may be modeled in the following format:

 {      "source": "^(/.*)",                                         "target": "$1",                                             "service": "html5-apps-repo-rt",      "authenticationType": "xsuaa"                       }

A valid request to application router that uses HTML5 Application Repository must have the following format:

https://<tenantId>.<appRouterHost>.<domain>/<bsPrefix>.<appName-appVersion>/<resourcePath>;

bsPrefix (business service prefix) - Optional

• It should be used in case the application is provided by a business service bound to this approuter

appName (application name) - Mandatory

• Used to uniquely identify the application in HTML5 Application Repository persistence
• Must not contain dots or special characters

appVersion (application version) - Optional

• Used to uniquely identify a specific application version in HTML5 Application Repository persistence
• If no version provided, default application version will be used

resourcePath (path to file)

• The path to the file as it was stored in HTML5 Application Repository persistence

For more details please refer to the following Blog:

Programming applications in Sap Cloud Platform

 More details in this one: https://community.sap.com/t5/technology-blogs-by-sap/fiori-application-programming-model-for-cloud-f...

Solution

As a solution to have a clean url to the application, I applied the following changes to the xs-app.json of the approuter:

• 1) Changed the welcomeFile to “/index.html”
• 2) Add a route for the OData service. As I added a route for the app (see next point) which will forward all requests on the root path to the html5 app repo, I also need to add a route before the one of the app specially for the OData. Otherwise all OData requests will be forwarded to the html5 app repository and not the destination.
• 3) Add a route for the root path directly to the path of the html5 app repository

https://github.com/lemaiwo/ReCAPBTPServiceOverview/blob/main/approuter/xs-app.json

 Make sure the html5 app repository runtime and destination service are bound to the approuter:

In case it is not done yet, add the route in the mta.yaml config:

Result

A clean url with a forward that changes the path: https://btp-services.lemaire.tech/index.html

Full repo: https://github.com/lemaiwo/ReCAPBTPServiceOverview/tree/main

Sidenote: some of the screenshots may still contain a different domain. I recently changed the domain from Wouter.lemaire.tech to Lemaire.tech.

 Kr, Wouter