Issue with appRouter(destination connect) using HTML5 application repository

[Eunsong]

Im new to SAPUI5 world.

Trying to connect my destination using HTML5 application repository in MTA(Multi Target Application).

Without HTML5 application repository(via A), I got data with destination. But, with HTML5 application repository(via B)is not working.

The resource in B mta.ymal is same as A.(Service Instance is working well-checked in A)

missing something connect point in B.

//mta.yaml in B MTA project

  ID: test5
  _schema-version: '2.1'
  parameters:
    deploy_mode: html5-repo
  version: 0.0.1
  modules:
    - name: test5-approuter
      type: approuter.nodejs
      path: test5-approuter
      parameters:
        disk-quota: 256M
        memory: 256M
      requires:
        - name: test5_html5_repo_runtime
        - name: uaa_test5
        - name: dest_test5
    - name: test5_ui_deployer
      type: com.sap.html5.application-content
      path: test5_ui_deployer
      requires:
        - name: test5_html5_repo_host
      build-parameters:
        requires:
          - name: admin
            artifacts:
              - './*'
            target-path: resources/admin
    - name: admin
      type: html5
      path: admin
      build-parameters:
        builder: custom
        commands:
          - npm install
          - npm run build
        supported-platforms: []
        build-result: dist
  resources:
    - name: test5_html5_repo_runtime
      parameters:
        service-plan: app-runtime
        service: html5-apps-repo
      type: org.cloudfoundry.managed-service
    - name: test5_html5_repo_host
      parameters:
        service-plan: app-host
        service: html5-apps-repo
      type: org.cloudfoundry.managed-service
    - name: uaa_test5
      parameters:
        path: ./xs-security.json
        service-plan: application
        service: xsuaa
      type: org.cloudfoundry.managed-service
    - name: dest_test5
      parameters:
        service-name: dest_test
        service-plan: lite
        service: destination
      type: org.cloudfoundry.managed-service

//xs-app.json in B(html5 module)

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    },
    {
      "source": "^/test_route/(.*)$",
      "target": "$1",
      "destination": "DEST_test",
      "csrfProtection": false
    }
  ]
}

Thanks & Best Regards

[oleg_kiriljuk]

One has to use URL prefixes to access destinations in case of usage HTML5 application repository.

I explain all on an example. If you use standalone then you will see your application in "Space: dev - Applications" part of SAP Cloud Platform Cockpit. The URL of your application will be like https://<yourID>-dev-<approutername>.cfapps.<region>.hana.ondemand.com, for example, https://12345abctrial-dev-myapprout.cfapps.eu10.hana.ondemand.com. To access your "DEST_test" destination with your current route configuration you can use

jQuery.ajax({ url: "/test_route/path", ...)

which will make request to the URL https://12345abctrial-dev-myapprout.cfapps.eu10.hana.ondemand.com/test_route/path. The host name 12345abctrial-dev-myapprout will be created during publishing of your application.

On the other side, HTML5 application repository has one common approuter for all applications of the launchpad or portal site. The host of the launchpad will be 12345abctrial.launchpad.cfapps.eu10.hana.ondemand.com for launchpad or 12345abctrial.cpp.cfapps.eu10.hana.ondemand.com for portal site. To prevent URL conflicts between different applications of the launchpad (or portal) HTML5 application repository maps the URLs based on appId, appVersion and SAP Cloud service name. I explain that on an example. Let us your application has the following manifest.json:

"sap.app": {
    "id": "com.myapp",
    "applicationVersion": {
      "version": "3.4.5"
    },
    ...
},
"sap.cloud": {
    "service": "my.company.myAppService",
    ...
}

In the case, the appId is "com.myapp", the version is 3.4.5 and the cloud service name is "my.company.myAppService".

To be able to reach the same destination from HTML5 application repository you have to change thed URL of your Ajax request from

/test_route/path

to

/mycompanymyappservice.commyapp-3.4.5/test_route/path

or shortly you have to use <myService>.<appID>-<version> prefix. Be carefully, that <myService> and <appID> are normalized application id and cloud service name, where all non-alphanumeric symbols ("-" or "." for example) are removed. The blog https://blogs.sap.com/2020/10/02/serverless-sap-fiori-apps-in-sap-cloud-platform/ written by Marius Obert (search for "https://<yourID>.launchpad.cfapps.<region>.hana.ondemand.com/<myService>.<appID>-<version>") contains information about URL prefixing.

[mariusobert]

Hi,

I guess it's not working becauase your routes are ordered incorrectly. The first route matches all incoming traffic, as a result the second route is useless.

[Eunsong]

Thanks for your answer.

Im using ajax request to get data and for that I need url. Have no idea how to access and set url with destination..

[mariusobert]

Sorry for the confusion. All you need to do is to switch the order of the routes:

"routes": [
    {
      "source": "^/test_route/(.*)$",
      "target": "$1",
      "destination": "DEST_test",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]