Skip to Content

How to integrate UI5 module with SAP CAPM

Hello,

I’m creating a Java CAP application running on SAP CF and I have a UI module in other MTA. What I’m trying to do is to integrate UI module with Java CAP application. So, I think it’s the cross MTA dependency & destination scenario.

I’ve searched SCN and SAP blogs for some answers and tried almost every way I can. But none works.

Here is how I set up UI application.

  • 1.Create a MTA and select the option “Use HTML5 Application Repository”.
  • 2.Then I create HTML5 module and the structure is like this

  • 3.mta.yaml after adding the cross-mta dependency
ID: demo
_schema-version: '2.1'
parameters:
  deploy_mode: html5-repo
version: 0.0.1
modules:
  - name: demo-approuter
    type: approuter.nodejs
    path: demo-approuter
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: demo_html5_repo_runtime
      - name: dest_demo
      - name: uaa_demo
  - name: demo_ui_deployer
    type: com.sap.html5.application-content
    path: demo_ui_deployer
    requires:
      - name: demo_html5_repo_host
    build-parameters:
      requires:
        - name: demo_ui
          artifacts:
            - './*'
          target-path: resources/demo_ui
  - name: demo_ui
    type: html5
    path: demo_ui
    build-parameters:
      builder: custom
      commands:
        - npm install
        - npm run build
      supported-platforms: []
      build-result: dist
    requires:
      - name: cap-config
        group: destinations
        properties:
          name: servicegoals
          url: '~{url}'
          forwardAuthToken: true
resources:
  - name: demo_html5_repo_runtime
    parameters:
      service-plan: app-runtime
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: demo_html5_repo_host
    parameters:
      service-plan: app-host
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: uaa_demo
    parameters:
      path: ./xs-security.json
      service-plan: application
      service: xsuaa
    type: org.cloudfoundry.managed-service
  - name: dest_demo
    parameters:
      service-plan: lite
      service: destination
    type: org.cloudfoundry.managed-service
  - name: cap-config
    type: configuration
    parameters:
      provider-nid: mta
      provider-id: 'myplan-goals-cf-srv:srv_api'
      version: '>=0.0.0'


  • 4.xs-app.json in the UI module
{
	"welcomeFile": "/index.html",
	"authenticationMethod": "route",
	"logout": {
		"logoutEndpoint": "/do/logout"
	},
	"routes": [{
		"source": "^/servicegoals/(.*)$",
		"target": "$1",
		"authenticationType": "xsuaa",
		"destination": "servicegoals",
		"csrfProtection": false
	}, {
		"source": "^(.*)$",
		"target": "$1",
		"service": "html5-apps-repo-rt",
		"authenticationType": "xsuaa"
	}]
}
  • 5.Error when running the app

And I’ve checked the log in approuter

{"written_at":"2020-07-08T08:34:44.680Z","written_ts":1594197284680000000,"csn_component":"-","correlation_id":"kcd3whfs","type":"log","logger":"nodejs-logger","layer":"/Destination service","level":"error","container_id":"10.0.137.16","component_type":"application","component_id":"e4d12e6f-de51-45fc-8ee8-444ccde1a64b","component_name":"demo-approuter","component_instance":-1,"source_instance":-1,"organization_id":"<org_id>","organization_name":"<org_name>","space_id":"<space_id>","space_name":"<space_name>","context_id":"kcd3whfs","msg":"Error while retrieving destination servicegoals from destination service. HTTP status code: 404"}
{"written_at":"2020-07-08T08:34:44.680Z","written_ts":1594197284680000000,"csn_component":"-","correlation_id":"5f59f1d6-27d5-46b7-68e4-39206cbd98b9","type":"log","logger":"nodejs-logger","layer":"/Handler","level":"error","container_id":"10.0.137.16","component_type":"application","component_id":"e4d12e6f-de51-45fc-8ee8-444ccde1a64b","component_name":"demo-approuter","component_instance":-1,"source_instance":-1,"organization_id":"<org_id>","organization_name":"<org_name>","space_id":"<space_id>","space_name":"<space_name>","request_id":"5f59f1d6-27d5-46b7-68e4-39206cbd98b9","msg":"GET request to /aucomtridemo_ui/servicegoals/odata/v4/mpgoals/$metadata completed with status 500 - Error while retrieving destination servicegoals from destination service. HTTP status code: 404"}

Does anyone know if there is a proper way or template to integrate ui5 module and CAPM application?

Thanks.

Tri

Add a comment
10|10000 characters needed characters exceeded

Related questions

2 Answers

  • Best Answer
    Posted on Jul 08 at 11:54 AM

    Hi Minh,

    Your requires configuration is misplaced:

        requires:
          - name: cap-config
            group: destinations
            properties:
              name: servicegoals
              url: '~{url}'
              forwardAuthToken: true

    this should be put under your demo-approuter

    Try that and I think you're good to go.

    Add a comment
    10|10000 characters needed characters exceeded

    • Hi Minh,

      The change of error means we have already solved your original issue.

      Now with your new issue, it looks like you are using different XSUAA service for your 2 MTAs. If you do cross MTA, you should make sure that both MTA are using the same XSUAA service. You could update this current MTA to use the uaa of myplan-goals-cf's uaa like this:

        - name: <uaa service name of myplan-goals-cf>    
          type: org.cloudfoundry.existing-service

      Of course, you can opt to do the opposite (do this in the other MTA), I'm just showing here how it looks like to use existing service.

  • Posted on Jul 08 at 10:49 AM

    Hi,

    you are right, it is possible to do this via a cross MTA dependency but there are also easier options you might want to consider:

    • Integrate the web app in the same project as the CAP application. Then, you don't need a cross MTA dependency at all. There has been a great blog post published about this just today. Or you can check out this recording where I demoed something similar on VS Code.
    • If you want to keep the web app in a separate project, I would create a destination (in the cockpit) for the CAP app. Then, you can use the approuter to forward traffic there and you wouldn't need a cross mta dependency either.
    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.