SAP Build Apps On SAP BTP Kyma Runtime

Welcome!! You are here because you want to explore how to deploy a web application on Kyma runtime, which is built using SAP Build Apps. If you have not completed the previous tutorial which covers the prerequisites, we recommend finishing the same. This blog is also relevant to our developers who are looking to host a web application and want to consume different BTP services in Kyma runtime.

Pre-requisites –

Complete SAP Build App development referring to the previous blog – Building UI Integration Card
Setup Kyma on your BTP account – Kyma Setup
BTP Subaccount access to manage Destinations
Services entitlements on BTP required in addition to previous blog –
1. Destination service
2. Authorization and Trust Management Service (xsuaa)
Download the template project from Github – Repository OR Repository2

Architecture –

SAP BTP Kyma Deployment Steps –

Unzip the Approuter project which you downloaded earlier, which will modify according to our requirements.

Replace the content of deployment.yaml as below.

apiVersion: services.cloud.sap.com/v1alpha1
kind: ServiceBinding
metadata:
  name: routerauth-binding
  namespace: YOUR_NAMESPACE
spec:
  serviceInstanceName: garouter-uaa
  secretName: routerauth-binding
  externalName: garouter-uaa
---
apiVersion: services.cloud.sap.com/v1alpha1
kind: ServiceBinding
metadata:
  name: garouterdestination-binding
  namespace: YOUR_NAMESPACE
spec:
  serviceInstanceName: destination-service
  secretName: garouterdestination-binding
  externalName: destination-service
  
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: garouter
  namespace: YOUR_NAMESPACE
  labels:
    app: garouter
    version: v1
spec:
  replicas: 1
  selector:
    matchLabels:
      app: garouter
      version: v1
  template:
    metadata:
      labels:
        app: garouter
        version: v1
    spec:
      containers:
        - name: garouter
          image: YOUR_USER/approuterinkyma:latest
          imagePullPolicy: Always
          resources:
              limits:
                cpu: "250m"
                memory: "128Mi"
              requests:
                cpu: "250m"
                memory: "128Mi"
          ports:
            - containerPort: 5000
          volumeMounts:
            - name: garouter-uaa
              mountPath: "/etc/secrets/sapcp/xsuaa/garouter-uaa"
              readOnly: true
            - name: destination-service
              mountPath: "/etc/secrets/sapcp/destination/destination-service"
              readOnly: true
      volumes:
        - name: garouter-uaa
          secret:
            secretName: routerauth-binding
        - name: destination-service
          secret:
            secretName: garouterdestination-binding
---
apiVersion: v1
kind: Service
metadata:
  name: garouter
  namespace: YOUR_NAMESPACE
  labels:
    app: garouter
    service: garouter
spec:
  ports:
    - port: 5000
      name: http
  selector:
    app: garouter

---
apiVersion: gateway.kyma-project.io/v1beta1
kind: APIRule
metadata:
  name: garouter
  namespace: YOUR_NAMESPACE
spec:
  gateway: kyma-gateway.kyma-system.svc.cluster.local
  host: garouter.CLUSTER_DOMAIN
  service:
    name: garouter
    port: 5000
  rules:
    - accessStrategies:
        - config: {}
          handler: allow
      methods:
        - GET
        - POST
        - PUT
        - PATCH
        - DELETE
        - HEAD
      path: /.*

In the above deployment file, you have to change the following placeholders
1. YOUR_NAMESPACE – Namespace within your Kyma cluster
2. CLUSTER_DOMAIN – You can copy the cluster domain as below –
3. YOUR _USER – Docker image path
If you want to refer to your private repository, you can refer to this blog published by Gunter Albrecht and modify the deployment file accordingly.
Let’s understand 2 important things in this deployment file, which are service bindings to the application. These are very important as the application will require service key credentials to interact with those services and has to be provided with deployment. These credentials will be provided as a secret to the application.

Next, we have to make modify the service.yaml file to create 2 services, Destination service & xsuaa service. Please replace the placeholders YOUR_NAMESPACE & CLUSTER_DOMAIN before you replace the content.

apiVersion: services.cloud.sap.com/v1alpha1
kind: ServiceInstance
metadata:
  name: garouter-uaa
  namespace: YOUR_NAMESPACE
spec:
  serviceOfferingName: xsuaa
  servicePlanName: application
  externalName: garouter-uaa
  parameters:
    xsappname: xsuaa-garouter
    tenant-mode: dedicated
    oauth2-configuration:
      redirect-uris:
        - "https://CLUSTER_DOMAIN/login/callback"
    scopes:
      - name: "$XSAPPNAME.admin"
        description: Admin
    role-templates:
      - name: admin
        description: Admin
        scope-references:
          - "$XSAPPNAME.admin"
    role-collections:
      - name: Approuterkyma
        description: kyma approuter role
        role-template-references:
          - "$XSAPPNAME.admin"
---
apiVersion: services.cloud.sap.com/v1alpha1
kind: ServiceInstance
metadata:
  name: destination-service
  namespace: YOUR_NAMESPACE
spec:
  externalName: destination-service
  serviceOfferingName: destination
  servicePlanName: lite

We have to create a destination in the same subaccount where you have already created the Kyma Runtime. This step is only required if you have not created the destination. Copy the name of the destination as-is, which will be needed in our next step.

Modify the xs-app.json to point to your newly created destination below

{
    "welcomeFile": "index.html",
    "authenticationMethod": "route",
    "logout": {
        "logoutEndpoint": "/app-logout",
        "logoutPage": "/"
    },
    "routes": [
        {
            "source": "^/user-api(.*)",
            "target": "$1",
            "service": "sap-approuter-userapi",
            "authenticationType": "xsuaa",
            "scope": "$XSAPPNAME.admin"
        },
        {
            "source": "^/destinations/PurchaseRequisition/(.*)$",
            "target": "$1",
            "destination": "PurchaseRequisition",
            "authenticationType": "xsuaa"
        },
        {
            "source": "^/(.*)",
            "authenticationType": "xsuaa",
            "localDir": "resources"
        }
  
    ]
}

Unzip and Copy the Web application content into the resources folder directly, which we downloaded in our last section. Your final project structure should be as below
Let’s create the service instance using the service.yaml file. Please confirm the same in the Kyma cockpit.
1. ```
kubectl apply -f service.yaml
```

Build the image and Push the application docker hub

docker build --rm -f "Dockerfile" -t YOUR_USER/approuterinkyma:latest "." --no-cache --platform=linux/amd64
docker push YOUR_USER/approuterinkyma:latest

The final step is to deploy the application using a deployment.yaml file which will create the application, bind the services instances, and also create an API rule which we can use to access the application over the public internet.
1. ```
kubectl apply -f deployment.yaml 
```

Demo –

Now it shows showtime, and we always love to see things working in action 🙂

Conclusion –

It was so easy to deploy a web application built using SAP Build Apps on BTP Kyma runtime. You can use this as a base and extend it to your requirements. Please do let me know your thoughts in the comment section.

Tips & Tricks-

Destination service returning 404 – Please check the path in xs-app.json
Destination service returning 401 – Please check the credentials provided in the destination
A destination with name “XYZ” not present – Please confirm the destination service binding is completed successfully. Cross-check the deployment.yaml file.

References –

How to use xsuaa by Gopal Anand – Blog
Understanding xsuaa – Blog
Consuming destinations on CF – Blog
SAP Help Documentation on Kyma
Kyma Project
XSUAA

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Technical Articles

SAP Build Apps On SAP BTP Kyma Runtime

Assigned Tags