CAP Java app - add Fiori Freestyle App with the Business Application Studio

[tbra]

I have developed a litte CAP Java application for learning CDS, having no problems to access my services via the browser. Now I would like to implement a little test Fiori application which should access the CAP services/models.

For that purpose I am following this SAP guide:
Developing an SAP Fiori Application for a CAP Project / with an standalone Approuter using the SAP Fiori Freestyle- Module Generator. (I am choosing no Authentication and local Service)

Afterwards I start the Java Application following this SAP guide:
Creating Run Configurations for CAP Java Applications

Unfortunately I am not able to access the previous generated and configured Fiori app from the Business Application Studio. I don't know the correct endpoint or do not know how to configure it.

I have a standard CAP Java directory structure, these directories are generated (the name of my app is dispoapp):

- app
  - HTML5Module (generated)
- dispoapp-approuter (generated)

I suppose I need to change the source and target section of the generated xs-app.json file, which looks like this (but can't figure out the correct way):

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

My generated mta.yaml file looks like this:

_schema-version: "3.1"
ID: dispoapp
description: Generated by cds-services-archetype
version: 1.0.0
modules:
- name: dispoapp-srv
  type: java
  path: srv
  provides:
  - name: srv-api
    properties:
      srv-url: ${default-url}
  build-parameters:
    build-result: target/*.[wj]ar
    builder: custom
    commands:
    - mvn clean package
- name: dispoapp-approuter
  type: approuter.nodejs
  path: dispoapp-approuter
  requires:
  - name: dispoapp_html_repo_runtime
  - name: dest_dispoapp
  parameters:
    disk-quota: 256M
    memory: 256M
- name: dispoapp_ui_deployer
  type: com.sap.application.content
  path: .
  requires:
  - name: dispoapp_html_repo_host
    parameters:
      content-target: true
  build-parameters:
    build-result: resources
    requires:
    - artifacts:
      - HTML5Module-content.zip
      name: HTML5Module
      target-path: resources/
- name: HTML5Module
  type: html5
  path: app/HTML5Module
  build-parameters:
    builder: custom
    commands:
    - npm run build
    supported-platforms: []
resources:
- name: dispoapp_html_repo_runtime
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-runtime
- name: dispoapp_html_repo_host
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-host
- name: dest_dispoapp
  type: org.cloudfoundry.managed-service
  parameters:
    service: destination
    service-plan: lite
parameters:
  enable-parallel-deployments: true
build-parameters:
  before-all:
  - builder: custom
    commands:
    - npm install --production
    - npx -p @sap/cds-dk cds build --production

I am happy about any help 🙂 !

Thanks & Best Regards

Thomas

[yuval_morad]

Hi

I see that in the mta.yaml the approuter module properties section was not updated with the local destination that the java exposes.

This is not related to locsl java run but will prevent the deployed app to run.

Please update if the same happenns for CAP exposing node app

[tbra]

Hello Yuval,

thank you for your comment 🙂 !

I am a Java and Fiori developer, so it is essential for me that the SAP BAS Tooling works für Java CAP projects.

We have licensed SAP BAS -> should I open a SAP incident?

Thank you for your help!

Best Regards, Thomas

[Robert_Eijpe · Accepted solution]

Hi thomas.brandstetter,

You can solve this by adding a second app router, for example, approuter-local, which you only use for local testing. Do not put this app router in your deployment script of the MTA, so it will be ignored when building the MTA and deployment to SCP.

In the xs-app.json, remove the service html5-app-repo-rt. This service tries to find the UI5 code on the server, but we want to run/debug the Fiori app locally. In the xs-app.json you add the endpoint of the Fiori application. For example for the Fiori app com.docloudnow.administrator, this will be:

{
            "source": "^/comdocloudnowadministrator/(.*)$",
            "target": "$1",
            "destination": "ui1",
            "csrfProtection": false
        },

As you can see the dots are removed from the namespace and we use a namespace.
Now we must also tell the local app router to use destination ui1
This can be done by adding a destination to the default-env.json file:

{
            "name": "ui1",
            "url": "http://localhost:8001",
            "forwardAuthToken": true,
            "strictSSL": false
        },

Of course, you should also add the endpoint for the CAP service to the xs-app.json file :

{
            "source": "/odata/(.*)",
            "destination": "srv_api",
            "csrfProtection": false,
            "authenticationType": "xsuaa",
            "scope": {
                "default": "$XSAPPNAME.Display"
            }
        },

And in the default-env.json also the destination of the CAP service

{
            "name": "srv_api",
            "url": "http://localhost:4000",
            "forwardAuthToken": true,
            "strictSSL": false
        },

Now you can start the app router in your local app router folder with the command: npm start. This will start the app router. And you also need to start the CAP services with cds watch.

The only thing that’s left is to start the Fiori App with the right port: ui5 serve --port 8001 in the root folder of your Fiori app.

If your Fiori app doesn’t have an index.html file but only a component.js, you can add a test launchpad with the name index.html in the resources folder of the app-router and use the following code:

<!DOCTYPE html>
<html>
<head>
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bookshop</title>
 
    <script>
        window["sap-ushell-config"] = {
            defaultRenderer: "fiori2",         
            applications: {            
                "application-administrator": {
                    title: "Administrator",
                    description: "start:ui-adm",
                    additionalInformation: "SAPUI5.Component=com.docloudnow.administrator",
                    applicationType : "URL",
                    url: "/comdocloudnowadministrator",
                    navigationMode: "embedded"
            }
        };
    </script>
 
    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
    <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-theme="sap_fiori_3_dark"
        data-sap-ui-frameOptions="allow"
    ></script>
    <script>
        sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
    </script>
 
</head>
<body class="sapUiBody" id="content"></body>
</html>

It works for me, Good luck.

[tbra · Accepted solution]

Hello Robert,

thank you for your detailed answer!
I am a java and Fiori developer and I am just getting used to the new CAP / Cloud technologies. I will give your answer a try :-), but for me it is also important that the SAP BAS tooling works and I can focus on implementing the application. After a certain amount of experience I hope to be able to do the configuration myself.

Thanks a lot, best Regards
Thomas

[tbra · Accepted solution]

Hello Robert,

Thanks again for the detailed explanation with which I have found a solution. In my opinion, the SAP manual is not as detailed as it should be and leaves out many areas. The correct local approuter configuration was then the solution to my problem.

Thanks, best Regards

Thomas

[former_member245748 · Accepted solution]

Hi r.eijpe,

That was a great read. Can you also please explain what dependencies do we need to maintain in package.json of local approuter.
Also default-env.json is placed in SRV or root folder?

Thank you.

Regards,
Sibith.