cancel
Showing results for 
Search instead for 
Did you mean: 

How to integrate UI5 module with SAP CAPM

Tri
Participant
0 Kudos

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

jhodel18
Active Contributor
0 Kudos

Hi @triminhle,

When you post a question and you get a response that helps you with your issue, you need to mark the answer "accepted" to close this thread.

Accepted Solutions (1)

Accepted Solutions (1)

jhodel18
Active Contributor

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.

Tri
Participant
0 Kudos

Hi jhodel18

I've tried your suggestion.

It resolves error 500 and returns 401 unauthorized.

This is the response header.

Cache-Control: 
no-cache, no-store, max-age=0, must-revalidate
Content-Length: 
0
Date: 
Wed, 08 Jul 2020 23:24:59 GMT
Expires: 
0
Pragma: 
no-cache
Strict-Transport-Security: 
max-age=31536000; includeSubDomains; preload;
Www-Authenticate: 
Bearer error="invalid_token", error_description="An error occurred while attempting to decode the Jwt: Jwt token with allowed audiences [uaa, sb-demo!t250, openid] matches none of these: [myplan-goals-cf-srv!t250]", error_uri="https://tools.ietf.org/html/rfc6750#section-3.1"
X-Content-Type-Options: 
nosniff
X-Frame-Options: 
DENY
X-Request-Id: 
a3b4d453-acd7-4a30-456e-5c5ab641e547
X-Vcap-Request-Id: 
ed70b33f-f6e1-4e71-7b57-58276ebf7f3e

X-Xss-Protection: 
1; mode=block

Something wrong with jwt token validation.

Do you have any ideas about this issue?

Regards,

Minh

jhodel18
Active Contributor
0 Kudos

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.

Answers (1)

Answers (1)

mariusobert
Developer Advocate
Developer Advocate

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.
jhodel18
Active Contributor

Hi Marius,

Why it seems like there's an implied statement on your answer that one shouldn't use cross MTA dependency? IMO, it's a decent option for breaking down frontend and backend components into separate MTA. Also, to me, it's better than your second option of creating an additional destination because technically a cross mta with a backend service is seen as a destination as well. But that's just my opinion. I would like to know the reasoning behind that. Is there anything bad about using cross MTA?

mariusobert
Developer Advocate
Developer Advocate

Hi Jhodel,

thanks for pointing that out. It was not my intention to say this approach is wrong. Tbh, I only used cross MTA dependencies once or twice and I'm not very familiar with this. That's the only reason why I didn't mention it more explicitly in my answer 🙂

jhodel18
Active Contributor

Thanks for the clarification Marius!

I had to ask because I use this approach in almost every project I do so far. Development usually starts small and manageable within one MTA, but it doesn't stay like that throughout the course of time. 😄