Test/Access On Premise Destination oData service in SAP CAP Fiori/UI5 app locally

[Former Member]

Hi Experts

I am currently working on a nodejs based CAP application in Business App Studio which has cds services and ui5 app which are using those services. Authentication and Authorization is enabled for the services, hence I am testing both the services and ui5 app using 'cds watch' command and copying the VCAP_SERVICES part of environment variables of the deployed service app into default-env.json of the project. The deployed service destination is auto configured at instance level destination using mta.yaml. Till here everything works fine and i am able to test ui5 app and CAP services locally.

Now we have been provided with an on-premise odata service that we are supposed to integrate it with the ui5 app. I have manually created subaccount level destination and instance-level destination(just in case) from it and want to test this on-prem destination locally if i am able to access it in my ui5 app using 'cds watch' command.

I am using destination service as well as connectivity service in mta.yaml. But I am unable to access the on-premise service locally. I have created a v2 odatamodel in manifest.json but when running the ui5 app, onprem service throws 404 not found error.

So I wanted to know if it is possible to access on-prem locally using 'cds watch' as I want to integrate and test both local cap services and on-prem odata service in the ui5 app. I also tried to run app using command "fiori run --open 'index.html' ", but here another problem for me is that deployed CAP services from ui5.yaml is used and not local cap service, hence service throws 401 unauthorized as its oAuth based. Also not able to access on-prem destination here as well. Please let me know if there is any solution to this.

Please note: The CAP ui5 app uses managed approuter and is configured to be shown in central launchpad service as a tile with roles enabled.

My code below:

xs-app.json

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

manifest.json

...
"dataSources": {
            "MY_ODATA_SRV": {
                "uri": "/sap/opu/odata/sap/ZPRICING_SRV",
                "type": "OData",
                "settings": {
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "2.0"
                }
            },
            "mycapservice": {
                "uri": "/mycapservice/",
                "type": "OData",
                "settings": {
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "4.0"
                }
            },
		}

...
	"models": {
		"mPricing": {
                "dataSource": "MY_ODATA_SRV",
                "preload": true,
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "useBatch": true
                } 
              }
		}	  
...

mta.yaml

//rest of mta.yaml
modules:
  # --------------------- SERVER MODULE ------------------------
  - name: mycapservice-srv
  # ------------------------------------------------------------
    type: nodejs
    path: gen/srv
    parameters:
      buildpack: nodejs_buildpack
      memory: 4G
      disk-quota: 3096M
    requires:
      - name: mycapservice-uaa
      - name: mycapservice-db
      - name: mycapservice-dest
      - name: mycapservice-conn
    provides:
      - name: srv-api
        properties:
          srv-url: ${default-url}

		  
  # ----------- HTML5 APP REPOSITORY APP FIORI MODULE ----------
  #  do the build of the SAP Fiori application.
  - name: myui5app
  # #------------------------------------------------------------
    type: html5
    path: app/myui5app
    build-parameters:
      build-result: dist
      builder: custom
      commands:
        - npm install
        - npm run build:cf
      supported-platforms: []

  # ----- HTML5 APP REPOSITORY DESTINATION CONTENT MODULE ------
  - name: mycapservice-dest-content
  # ------------------------------------------------------------
    type: com.sap.application.content
    requires:
      - name: mycapservice-uaa
        parameters:
          service-key:
            name: mycapservice-uaa-sk
      - name: mycapservice-html5repo
        parameters:
          service-key:
            name: mycapservice-html5repo-sk
      - name: mycapservice-dest
        parameters:
          content-target: true
      - name: srv-api 
      - name: mycapservice-conn
    parameters:
      content:
        instance:
          existing_destinations_policy: update
          destinations:
            - Name: mycapservice-service-mycapservice-uaa
              ServiceInstanceName: mycapservice-uaa
              ServiceKeyName: mycapservice-uaa-sk
              Authentication: OAuth2UserTokenExchange
              sap.cloud.service: mycapservice.service
            - Name: mycapservice-service-mycapservice-html5repo
              ServiceInstanceName: mycapservice-html5repo
              ServiceKeyName: mycapservice-html5repo-sk
              sap.cloud.service: mycapservice.service
            - Name: mycapservice-srv
              Authentication: OAuth2UserTokenExchange
              TokenServiceInstanceName: mycapservice-uaa
              TokenServiceKeyName: mycapservice-uaa-sk
              URL: '~{srv-api/srv-url}'
              Description: My CAP Service
              HTML5.DynamicDestination: true
              HTML5.Timeout: 300000
              sap.cloud.service: mycapservice.service
    build-parameters:
      no-source: true

	  
	// .. Rest of modules
	  
resources:
  # ----------------------- UAA SERVICE ------------------------
  - name: mycapservice-uaa
  # ------------------------------------------------------------
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      path: ./xs-security.json
	 
  - name: mycapservice-conn
    type: org.cloudfoundry.managed-service
    parameters:
      service: connectivity
      service-plan: connectivity_proxy
	  
  # -------------------- DESTINATION SERVICE -------------------
  - name: mycapservice-dest
  # ------------------------------------------------------------
    type: org.cloudfoundry.managed-service
    requires:
      - name: srv-api
    properties:
      hdi-service-name: ${service-name}
    parameters:
      service: destination
      service-name: mycapservice-dest
      service-plan: lite
      config:
        HTML5Runtime_enabled: true
        init_data:
          instance: 
            existing_destinations_policy: update
            destinations:
              - Name: ui5
                Description: SAPUI5
                URL: https://ui5.sap.com
                Type: HTTP
                ProxyType: Internet
                Authentication: OAuth2UserTokenExchange
	  
// ... rest of resources

On prem odata service Destination

Description=OnPremise OData Gateway
Type=HTTP
sap-platform=ABAP
HTML5.DynamicDestination=true
Authentication=BasicAuthentication
WebIDEUsage=odata_abap,dev_abap
Name=MY_ODATA_SRV
WebIDEEnabled=true
ProxyType=OnPremise
URL=http\://dw-gw1\:443
sap-client=300
User=MYUSER1
WebIDESystem=Gateway

Thanks & Regards

Naresh

[Former Member]

I was able to make it work partially. What I mean is, I ran both commands 'cds watch' and "fiori run -open 'index.html' " in two seperate terminals and also did the following changes below in ui5.yaml file in my ui5 app.

specVersion: '2.4'
metadata:
  name: 'myui5app'
type: application
server:
  customMiddleware:
  - name: fiori-tools-proxy
    afterMiddleware: compression
    configuration:
      ignoreCertError: true # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
      backend:
      - path: /mycapservice
        url: http://localhost:4004  #I initially set this url to deployed service url. Set it to localhost instead so it reads your local running CAP services from 'cds watch'
      - path: /sap/opu/odata/sap   # Set your on-premise destination here.
        destination: MY_ODATA_SRV<br>
      ui5:
        path: 
        - /resources
        - /test-resources
        url: https://ui5.sap.com
        version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
  - name: fiori-tools-appreload
    afterMiddleware: compression
    configuration:
     port: 35729
     path: webapp
     delay: 300

The local CAP services run fine with the ui5 app and I also don't get the error '404 not found anymore' for the on-prem destination when running locally. I however do get the below error 401 unauthorized error with below message, and we see a service call hit happening in cloud connector logs. But for some reason it is unable to generate auth token to pass to cloud connector.
I am in contact with my dev and basis team to check this issue. If any of you can figure out why I get below error, please let me know, any help is greatly appreciated 🙂

Cheers,Naresh

[gregorw]

Please try sap-cf-proxy

[Former Member]

Thanks Gregor. Will take a look into this.