Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
frank_xie
Advisor
Advisor

If you want to deploy a full stack CAP project using a MTA file, there are many small but crucial details to consider.


1 Path

The path must be defined correctly in order for the frontend to access the backend APIs.


1.1 Definition

Typically the path looks like this:



1.1.1 Service Name

For custom paths, define the service name in the *service.cds file in the srv folder using the annotation "@path". For example:



The path will look like this:


So, now we know the function of the annotation "@path" is to rename the service.

1.1.2 Servlet Path

In addition, you may need to define the servlet path in the application.yaml file.



The result is:


1.2 Consume

Once the path is defined, or you just use the default path.

In order for the frontend to consume the service, maintain the three required areas: mainfest.json and xs-app.json.




  • mainfest.json





  • xs-app.json



2 Some configuration files

2.1 Spring-boot pom configuration and package

In the pom.xml of spring-boot, define <groupId> and <artifactId> .Make sure your java package containing "Application.java" is */main/<groupId>/<artifactId>. This prevents a 404 error when the app is deployed in BTP.


2.2 MTA file

The MTA file is the key to deploy cap project, for the simple project, you can see the mandatory configuration and their relationship:


For the "html5" module, it will be used to generate a zip file which is consumed by "ui-deployer". In the process, the file "ui5-deploy.yaml" is used, my configuration like this:
specVersion: '2.6'
metadata:
name: salesorderrequest
type: application
resources:
configuration:
propertiesFileSourceEncoding: UTF-8
builder:
resources:
excludes:
- "/test/**"
- "/localService/**"
customTasks:
- name: ui5-task-zipper
afterTask: generateCachebusterInfo
configuration:
archiveName: fiori-content
additionalFiles:
- xs-app.json

Additionally, there is an file "ui5.yaml". You can see the detail info in the document.

The blow is an example, take care of their relationship and change the path according to your project.
_schema-version: "3.1"
ID:
description:
version: 2.0.0
parameters:
enable-parallel-deployments: true

build-parameters:
before-all:
- builder: custom
commands:
- npx -p @sap/cds-dk cds build --profile production,java
- npx -p @sap/cds-dk cds build --profile production,hana

modules:
- name: myapp_srv
type: java
path: srv
properties:
SPRING_PROFILES_ACTIVE: cloud
JBP_CONFIG_COMPONENTS: "jres: ['com.sap.xs.java.buildpack.jdk.SAPMachineJDK']"
JBP_CONFIG_SAP_MACHINE_JRE: "{ jre: { version: 11.+ } }"
requires:
- name: myapp_uaa
- name: myapp_db
provides:
- name: srv-api
properties:
srv-url: ${default-url}
build-parameters:
builder: custom
commands:
- mvn clean package -DskipTests=true
build-result: target/*-exec.jar
ignore: ["node_modules/"]
- name: myapp_db-deployer
type: hdb
path: db
requires:
- name: myapp_db
- name: myapp_uaa
parameters:
buildpack: nodejs_buildpack
- name: myapp_destination_content
type: com.sap.application.content
requires:
- name: myapp_uaa
parameters:
service-key:
name: myapp_uaa-key
- name: myapp_html5_repo_host
parameters:
service-key:
name: myapp_html5_repo_host-key
- name: myapp-destination-service
parameters:
content-target: true
parameters:
content:
subaccount:
destinations:
- Name: myapp_service_html5_repo_host
ServiceInstanceName: myapp_html5_repo_host
ServiceKeyName: myapp_html5_repo_host-key
sap.cloud.service: myapp_service
- Authentication: OAuth2UserTokenExchange
Name: myapp_service_uaa
ServiceInstanceName: myapp_uaa
ServiceKeyName: myapp_uaa-key
sap.cloud.service: myapp_service
existing_destinations_policy: update
build-parameters:
no-source: true
- name: myapp_ui_deployer
type: com.sap.application.content
path: app
requires:
- name: myapp-destination-service
- name: myapp_html5_repo_host
parameters:
content-target: true
build-parameters:
build-result: resources
requires:
- artifacts:
- fiori-content.zip
name: myapp
target-path: resources/
- name: myapp
type: html5
path: app/myapp
build-parameters:
build-result: dist
builder: custom
commands:
- npm install
- npm run build
supported-platforms: []
resources:
- name: myapp_db
type: com.sap.xs.hdi-container
parameters:
service: hana
service-plan: hdi-shared
properties:
hdi-service-name: ${service-name}
- name: myapp-destination-service
type: org.cloudfoundry.managed-service
requires:
- name: srv-api
parameters:
service: destination
service-plan: lite
config:
init_data:
subaccount:
existing_destinations_policy: update
destinations:
- Name: myapp-destination
Description: Sales Order Request service
Authentication: NoAuthentication
ProxyType: Internet
Type: HTTP
URL: ~{srv-api/srv-url}
HTML5.DynamicDestination: true
HTML5.ForwardAuthToken: true
- name: myapp_html5_repo_host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-plan: app-host

- name: myapp_html5_repo_runtime
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-plan: app-runtime
- name: myapp_uaa
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-plan: application

2.3 Adjust your frontend file to make sure the html5 app can consume the service deployed in BTP.

2.3.1 Change the destination in the xs-app.json


2.3.2 Change the sap-service in manifest.json


To be honest, I don't understand this attribute.

3 Little tips

Add your frontend location of index.html in the application.yaml file, then you can run the frontend and backend together by the commend "mvn spring-boot:run".

spring:

    web.resources.static-locations: "file:./app/salesorderrequest/webapp"


4 More Learning content


Find out how to build software applications, side-by-side extensions, and integrations from and to cloud applications by exploring SAP’s free learning content on SAP BTP. It is made for both integration designers and extension developers from all levels of expertise and will help you stay up to date with the latest SAP BTP innovations. Check out even more role-based learning resources and opportunities to get certified in one place on SAP Learning site.

2 Comments
former_member681427
Participant
0 Kudos

Hi Frank,

The attribute "sap.cloud" is mandatory for app deploying in HTML5 repository. The app doesn't work if 'public' set to false. In addition, the name 'myapp_service' will be the Business Solution name which displays in BTP Cockpit / HTML5 applications. You can define the Front-end UI apps with same Business Solution name.

"sap.cloud" : {
"public": true,
"service": "myapp_service"
}

By the way, you are using SAP managed approuter, the resource "myapp_html5_repo_runtime" is redundant in your project.
SAP Tech Bytes: FAQ Managed Approuter vs. Standalone Approuter

 

Regards,
Arvin

frank_xie
Advisor
Advisor
0 Kudos
Hi Arvin, Thanks for the explanation, that solved me two confusion points.