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 –

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

Architecture – 

Kyma Deployment Steps – 

1. Unzip the Approuter project which you downloaded earlier, which will modify according to our requirements.
2. Replace the content of deployment.yaml as below.

   1. 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: /.*
        

3. 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
4. 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.
5. 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.
6. 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.

   1. 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

7. 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.
   1. 
8. Modify the xs-app.json to point to your newly created destination below

   1. {
          "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"
              }
        
          ]
      }

9. 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
   1. 
10. 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

    2. 
11. Build the image and Push the application docker hub

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

12. 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-

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

References –