Skip to Content

Deploy the SAPUI5 Frontend in the Kyma Runtime

Develop and deploy the SAPUI5 frontend app in the Kyma runtime.
You will learn
  • How to configure and build SAPUI5 Docker image
  • How to create a development Namespace in the Kyma runtime
  • How to deploy the SAPUI5 Docker image to the Kyma runtime
jcawley5Jamie CawleyOctober 4, 2022
Created by
jcawley5
October 8, 2020
Contributors
jcawley5

This tutorial expects that the Deploy a Go MSSQL API Endpoint in the Kyma Runtime tutorial has been completed and relies on the database running within the Kyma runtime.

Deploying the SAPUI5 Docker image to the Kyma runtime includes:

  • A Kubernetes Deployment of the frontend image with the ConfigMap mounted to a volume
  • A Kubernetes ConfigMap containing the URL to the backend API
  • A Kubernetes Service used to expose the application to other Kubernetes resources
  • A Kyma APIRule to expose the frontend application to the Internet
  • Step 1
    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:

    Shell/Bash
    Copy
    git clone https://github.com/SAP-samples/kyma-runtime-extension-samples
    
  • Step 2
    1. Open the frontend-ui5-mssql directory in your desired editor.

    2. Explore the content of the sample.

    3. You can find many directories that relate to the UI5 application.

    4. The docker directory contains the Dockerfile used to generate the Docker image. The image is built in two stages to create a small image. In the first stage, a NodeJS image is used which copies the related content of the project into the image and builds the application. The built application is then copied into an nginx image with the default setup exposing the application on port 80.

    5. Within the k8s directory you can find the Kubernetes/Kyma resources you will apply to your Kyma runtime.

  • Step 3
    1. Within the frontend-ui5-mssql directory, run the following command using your CLI to install the application dependencies:

      Shell/Bash
      Copy
      npm install
      
    2. Within the project, open the webapp/config.json file and adjust API_URL by replacing <cluster domain> to match the Kyma runtime cluster domain. This should be the value of the API Rule created in step 6 of the Deploying a Go MSSQL API Endpoint in the Kyma Runtime tutorial.

      Text/Javascript
      Copy
      {
        "API_URL": "https://api-mssql-go.*******.kyma.ondemand.com"
      }
      
    3. To start the application, run the following command. This should automatically load the application in your browser.

      Shell/Bash
      Copy
      npm run-script start
      

      Pressing control-c will stop the running application.

  • Step 4

    Run the following commands from the frontend-ui5-mssql directory using your CLI. Make sure to replace the value of <your-docker-id> with your Docker account ID.

    1. To build the Docker image, run this command:

      Shell/Bash
      Copy
      docker build -t <your-docker-id>/fe-ui5-mssql -f docker/Dockerfile .
      
    2. To push the Docker image to your Docker repository, run this command:

      Shell/Bash
      Copy
      docker push <your-docker-id>/fe-ui5-mssql
      
  • Step 5

    You can find the resource definitions in the k8s folder. If you performed any changes in the configuration, these files 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 in use.
    • configmap.yaml: defines API_URL which represents the endpoint used for the orders API. It must 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 dev Namespace and enabling Istio:

      Shell/Bash
      Copy
      kubectl create namespace dev
      kubectl label namespaces dev istio-injection=enabled
      

      Namespaces separate objects inside a Kubernetes cluster. Choosing a different namespace will require adjustments to the provided samples.

      Adding the label istio-injection=enabled to the namespace enables Istio. Istio is the service mesh implementation used by the Kyma runtime.

    2. Within the project, open the k8s/configmap.yaml file and adjust API_URL by replacing <cluster domain> to 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.ondemand.com"
          }
      
    3. Apply the ConfigMap:

      Shell/Bash
      Copy
      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:

      Shell/Bash
      Copy
      kubectl -n dev apply -f ./k8s/deployment.yaml
      
    5. Apply the APIRule:

      Shell/Bash
      Copy
      kubectl -n dev apply -f ./k8s/apirule.yaml
      

    What is the role of a configmap?

  • Step 6

    To access the application we can use the APIRule we created in the previous step.

    1. Open the Kyma runtime console.

    2. From the menu, choose Namespaces.

    3. Choose the dev Namespace.

    4. From the menu, choose Discovery and Network > API Rules.

    5. Choose the Host entry for the fe-ui5-mssql APIRule to open the application in the browser. This should be similar to:
      https://fe-ui5-mssql.*******.kyma.ondemand.com

    Enter the code used to create the dev namespace.

Back to top