Using HTML5Modules with relative Path to UI5 Library

[hhllcks]

Hi everybody,

I am currently struggling to find a solution to prevent setting the complete URL to the sap-ui-core.js inside the index.html of our UI5 applications.

The UI5 application sample for a new MTA sets the path to the UI5 library like this:

<script id="sap-ui-bootstrap"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            ...
            data-sap-ui-resourceroots='{"my.sample.namespace.HTML5Module": "./"}'>
</script>

As you can see the path to the UI5 lib is absolute including host.

Our older on-premise ui5 applications reference the UI5 lib like this:

<script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            ...
            data-sap-ui-resourceroots='{"my.sample.namespace.HTML5Module": ""}'>
</script>

Some of our applications need an older UI5 version to work and we would love to use the same codebase for on-premise and Cloud Foundry installations.

Here is what I have tried:

Using the AppRouter

I looked into the standalone approuter and tried various thing to get this to work. Here is what I have done:

1. I added a new destination in the Launch Configuration (.env1 file) in the Business Application Studio like this:

destinations=[{"name":"UI5","url":"https://sapui5.hana.ondemand.com"}]

• Then I added a new route to the xs-app.json inside the HTML5Module:

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "none",
  "routes": [
    {
      "authenticationType": "none",
      "csrfProtection": false,
      "source": "^resources/(.*)",
      "target": "/1.52.46/resources/$1",
      "destination": "UI5"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "none"
    }
  ]
} 

Shouldn't this redirect all calls to resources/... to https://sapui5.hana.ondemand.com/1.52.46/resources/?

The idea is to create a xs-app.json that automatically adds the correct version prefix if needed. Then we could send this to our customers and they would just have to create the UI5 destination on their side and the app would work.

However the approuter does not seem to understand or ignore the route.

Looking at the App Repository

I realised that even when the URL https://sapui5.hana.ondemand.com/resources/sap-ui-core.js is hardcoded into the index.html there will be some rewriting when testing locally due to the local HTML5 repo node module. I found that in the Launch Config.

      "program": "${workspaceFolder}/ui5-sample-app/ui5-sample-app-approuter/node_modules/@sap/html5-repo-mock/index.js",
      "args": [
        "--standalone",
        "/mysamplenamespaceHTML5Module/index.html",
        "--ui5",
        "{\"version\":\"1.52.48\"}"
      ],

The --ui5 parameter will add 1.52.48 in front of /resource/ calls. This is explained here: https://www.npmjs.com/package/@sap/html5-repo-mock

The result is the version 1.52:

However this behavior is not mirrored when I upload the application to Cloud Foundry since then we are using the real html repository. Uploading the sample MTA will load the newest UI5 version:

Is it somehow possible to load a specific version in Cloud Foundry? Maybe adding some parameters to the part in the mta.yml where the HTML repo is defined? So somewhere here maybe:

resources:
- name: ui5-sample-app_html_repo_runtime
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-runtime
- name: ui5-sample-app_html_repo_host
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-host

Looking forward to your answer or pointers towards the correct solution. Thanks.

[anton_griga3]

Hi! Have you found any solution? I have the same issue at the moment...