Deploy an SAPUI5 Frontend in the Kyma Runtime

1. Copy the repository URL.

In your browser, go to kyma-runtime-extension-samples. This repository contains a collection of Kyma sample applications which will be used during the tutorial.

Choose the Code button and choose one of the options to download the code locally or simply run the following command within your CLI at your desired folder location.

git clone https://github.com/SAP-samples/kyma-runtime-extension-samples

1. Within the directory run the following command within your Command Line Interface(CLI) to install the application dependencies.

   npm install
   

2. Within the project open the file webapp/config.json and adjust the API_URL by replacing <cluster domain> to the match the Kyma runtime cluster domain.

   {
     "API_URL": "https://api-mssql-go.*******.kyma.shoot.live.k8s-hana.ondemand.com"
   }
   

3. To start the application run the following command. This should automatically load the application in your browser.

   npm run-script start
   

   Pressing control-c will stop the running application.

The following commands must be ran from the directory frontend-ui5-mssql within your command line interface. Make sure to replace the value of with your docker account id

1. To build the Docker image run the command:

   docker build -t <your-docker-id>/fe-ui5-mssql -f docker/Dockerfile .
   

2. To push the Docker image to your Docker repository run the command:

   docker push <your-docker-id>/fe-ui5-mssql
   

You will find the resource definitions in the k8s folder. If any changes were performed on the configuration these file may also need to be updated. The folder contains the following files that are relevant to this tutorial:

• apirule.yaml: defines the API endpoint which exposes the application to the internet. This endpoint does not define any authentication access strategy and should be disabled when not is use.
• configmap.yaml: defines the API_URL which represents the endpoint used for the orders API. This will need to be adjusted to reflect the domain of the Kyma runtime.
• deployment.yaml: defines the deployment definition for the SAPUI5 application as well as a service used for communication. This definition references the configmap.yaml by name. It is used to overwrite the webapp/config.json of the application.

1. Start by creating the namespace dev if it doesn’t already exist.

   kubectl create namespace dev
   

2. Within the project open the file k8s/configmap.yaml and adjust the API_URL by replacing <cluster domain> to the match the Kyma runtime cluster domain.

   kind: ConfigMap
   apiVersion: v1
   metadata:
     name: fe-ui5-mssql
     labels:
       app: fe-ui5-mssql
   data:
     config.json: |-
       {
         "API_URL": "https://api-mssql-go.*******.kyma.shoot.live.k8s-hana.ondemand.com"
       }
   

3. Apply the ConfigMap:

   kubectl -n dev apply -f ./k8s/configmap.yaml
   

4. Within the deployment.yaml adjust the value of spec.template.spec.containers.image to use your Docker image. Apply the Deployment.

   kubectl -n dev apply -f ./k8s/deployment.yaml
   

5. Apply the API Rule:

   kubectl -n dev apply -f ./k8s/apirule.yaml
   

The API Rule will create an endpoint similar to the one below that is used to open the application.

https://fe-ui5-mssql.<cluster>.kyma.shoot.live.k8s-hana.ondemand.com