SAP CAP - Deploy Java with Fiori Elemets Frontend as HTML5 App

[timrehrmann]

Hey guys,

I'm currently trying to deploy my CAP Java + Fiori application to BTP as an HTML5 app to use it into the launchpad later. I was mainly orientating myself on the sflight example and this tutorial.

Sadly I don't seem to get it working, the deployed app always throws this error:

It seems like the frontend doesn't know the api url from the java service and therefore doesn't find data... As I went through all files multiple times to compare it to the sample / tutorial files and still can't find anything that suggest what I'm doing wrong, I hope I can just post my code here so maybe someone of you will find whats wrong. If you need further code please let me now!

Thank you!

./mta.yaml

_schema-version: "3.1"
ID: sfi
description: sfi application
version: 1.0.0-SNAPSHOT

parameters:
  deploy_mode: html5-repo
  enable-parallel-deployments: true

build-parameters:
  before-all:
  - builder: custom
    commands:
    - npx -p @sap/cds-dk@^6 cds build --production

modules:
# -----------------------------------------------------
- name: sfi-srv
# -----------------------------------------------------
  type: java
  path: srv
  requires:
  - name: uaa_sfi
  - name: sfi-connectivity-service
  - name: sfi-destination-service
  parameters:
    memory: 1024M
    disk-quota: 256M
    buildpack: sap_java_buildpack
  properties:
    SPRING_PROFILES_ACTIVE: cloud-develop
    JBP_CONFIG_COMPONENTS: "jres: ['com.sap.xs.java.buildpack.jre.SAPMachineJRE']"
  provides:
  - name: srv-api # required by consumers of CAP services (e.g. approuter, destinations)
    properties:
      srv-url: ${default-url}
  build-parameters:
    build-result: target/*-exec.jar
    builder: custom
    commands:
      - mvn clean package -DskipTests=true
    ignore: ["node_modules/"]
# -----------------------------------------------------
- name: sfi-app-content
# -----------------------------------------------------
  type: com.sap.application.content
  path: app
  requires:
  - name: sfi-repo-host
    parameters:
      content-target: true
  - name: sfi-destination-service  
  build-parameters:
    build-result: resources
    requires:
    - artifacts:
      - sfiapp.zip
      name: sfiapp
      target-path: resources/
# -----------------------------------------------------
- name: sfiapp
# -----------------------------------------------------
  type: html5
  path: app/sfi-app
  build-parameters:
    build-result: dist
    builder: custom
    commands:
    - npm install
    - npm run build:cf
    supported-platforms: []
# -----------------------------------------------------
- name: sfi-destination-content
# -----------------------------------------------------
  type: com.sap.application.content
  requires:
  - name: sfi-destination-service
    parameters:
      content-target: true
  - name: sfi-repo-host
    parameters:
      service-key:
        name: sfi-repo-host-key
  - name: uaa_sfi
    parameters:
      service-key:
        name: uaa_sfi-key
  - name: srv-api
  parameters:
    content:
      instance:
        destinations:
        - Authentication: OAuth2UserTokenExchange
          Name: sfi-app-srv
          TokenServiceInstanceName: uaa_sfi
          TokenServiceKeyName: uaa_sfi-key
          URL: '~{srv-api/srv-url}'
          sap.cloud.service: smartfi
        - Name: smart_fi_sfi_repo_host
          ServiceInstanceName: sfi-repo-host
          ServiceKeyName: sfi-repo-host-key
          sap.cloud.service: smartfi
        - Authentication: OAuth2UserTokenExchange
          Name: smart_fi_uaa_sfi
          ServiceInstanceName: uaa_sfi
          ServiceKeyName: uaa_sfi-key
          sap.cloud.service: smartfi
        existing_destinations_policy: update
  build-parameters:
    no-source: true

resources:
# -----------------------------------------------------
- name: sfi-repo-host
# -----------------------------------------------------
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-host
# ------------------------------------------------------------
- name: sfi-html5-repo-runtime
# ------------------------------------------------------------
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-runtime
# -----------------------------------------------------
- name: sfi-destination-service
# -----------------------------------------------------
  type: org.cloudfoundry.managed-service
  requires:
  - name: srv-api
  parameters:
    service: destination
    service-plan: lite
    config:
      version: 1.0.0
      HTML5Runtime_enabled: true
      init_data:
        instance:
          existing_destinations_policy: update
          destinations:
            - Name: sfi-srv
              URL: ~{srv-api/srv-url}
              Authentication: NoAuthentication
              Type: HTTP
              ProxyType: Internet
              HTML5.ForwardAuthToken: true
              HTML5.DynamicDestination: true
# -----------------------------------------------------
- name: sfi-connectivity-service
# -----------------------------------------------------
  type: org.cloudfoundry.managed-service
  parameters:
    service: connectivity
    service-plan: lite
# -----------------------------------------------------
- name: uaa_sfi
# -----------------------------------------------------
  type: org.cloudfoundry.managed-service
  parameters:
    path: ./xs-security.json
    service: xsuaa
    service-plan: application

./xs-security.json

{
  "xsappname": "sfi",
  "tenant-mode": "dedicated",
  "description": "Security profile of called application",
  "scopes": [
    {
      "name": "uaa.user",
      "description": "UAA"
    }
  ],
  "role-templates": [
    {
      "name": "Token_Exchange",
      "description": "UAA",
      "scope-references": [
        "uaa.user"
      ]
    }
  ]
}

./srv/main/resources/application.yaml

---
logging:
  level:
    '[com.sap.cds.auditlog]': DEBUG
spring:
  web.resources.static-locations: "file:./app"
  jmx:
    enabled: true
cds:
  odata-v4.endpoint.path: "/api"
  security.mock.users:
    - name: admin
      password: admin
      roles:
        - admin
    - name: user
      password: user
---
spring:
  config.activate.on-profile: cloud-develop
  sql.init.mode: always
  datasource:
    url: "jdbc:sqlite:file::memory:?cache=shared"
    driver-class-name: org.sqlite.JDBC
    hikari:
      maximum-pool-size: 1
      max-lifetime: 0

./app/xs-app.json

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
        "source": "^/api/(.*)$",
        "destination": "sfi-srv",
        "authenticationType": "xsuaa",
        "csrfProtection": false
      },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

./app/ui-deploy.yaml

# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json
specVersion: '2.4'
metadata:
  name: sfiapp
type: application
resources:
  configuration:
    propertiesFileSourceEncoding: UTF-8
builder:
  resources:
    excludes:
      - "/test/**"
      - "/localService/**"
  customTasks:
  - name: ui5-task-zipper
    afterTask: generateCachebusterInfo
    configuration:
      archiveName: sfiapp
      additionalFiles:
      - xs-app.json

./app/sfi-app/webapp/manifest.json

{
  "_version": "1.40.0",
  "sap.app": {
    "id": "sfiapp",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "sourceTemplate": {
      "id": "@sap/generator-fiori:lrop",
      "version": "1.7.1",
      "toolsId": "2d57a188-18e3-4c1b-bef6-b22fd8b09945"
    },
    "dataSources": {
      "mainService": {
        "uri": "/api/smart_fi_output/",
        "type": "OData",
        "settings": {
          "annotations": [
            "annotation"
          ],
          "localUri": "localService/metadata.xml",
          "odataVersion": "4.0"
        }
      },
      "annotation": {
        "type": "ODataAnnotation",
        "uri": "annotations/annotation.xml",
        "settings": {
          "localUri": "annotations/annotation.xml"
        }
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.102.1",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {},
        "sap.ushell": {},
        "sap.fe.templates": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "sfiapp.i18n.i18n"
        }
      },
      "": {
        "dataSource": "mainService",
        "preload": true,
        "settings": {
          "synchronizationMode": "None",
          "operationMode": "Server",
          "autoExpandSelect": true,
          "earlyRequests": true
        }
      },
      "@i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "uri": "i18n/i18n.properties"
      }
    },
    "resources": {
      "css": []
    },
    "routing": {
      "config": {},
      "routes": [
        {
          "pattern": ":?query:",
          "name": "SmartFiDataList",
          "target": "SmartFiDataList"
        },
        {
          "pattern": "SmartFiData({key}):?query:",
          "name": "SmartFiDataObjectPage",
          "target": "SmartFiDataObjectPage"
        }
      ],
      "targets": {
        "SmartFiDataList": {
          "type": "Component",
          "id": "SmartFiDataList",
          "name": "sap.fe.templates.ListReport",
          "options": {
            "settings": {
              "entitySet": "SmartFiData",
              "variantManagement": "Page",
              "navigation": {
                "SmartFiData": {
                  "detail": {
                    "route": "SmartFiDataObjectPage"
                  }
                }
              }
            }
          }
        },
        "SmartFiDataObjectPage": {
          "type": "Component",
          "id": "SmartFiDataObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "editableHeaderContent": false,
              "entitySet": "SmartFiData"
            }
          }
        }
      }
    }
  },
  "sap.fiori": {
    "registrationIds": [],
    "archeType": "transactional"
  },
  "sap.cloud": {
    "service": "smartfi",
    "public" : true
  }
}