This sample provides a frontend SAPUI5 application that you can configure with any of the sample Order
APIs.
This sample demonstrates how to:
- Create a development Namespace in the Kyma runtime.
- Configure and build an SAPUI5 Docker image.
- Deploy the frontend in the Kyma runtime which includes:
- A ConfigMap that contains the URL to the backend API.
- A Deployment of the frontend image with the ConfigMap mounted to a volume.
- A Service to expose the UI to other Kubernetes resources.
- An API to expose the frontend externally.
- SAP BTP, Kyma runtime instance
- Docker
- Node.js
- UI5 Tooling
- kubectl configured to use the
KUBECONFIG
file downloaded from the Kyma runtime.
-
Clone the project.
-
Inside the directory, run:
npm install
-
Adjust the value of the API_URL parameter in the
webapp/config.js
file to match yourorders
API URL. -
To start the application, run:
npm run-script start
The application loads at
http://localhost:8080
.
-
Build and push the image to your Docker repository:
docker build -t {your-docker-account}/fe-ui5-mssql -f docker/Dockerfile . docker push {your-docker-account}/fe-ui5-mssql
-
To run the image locally, adjust the value of the API_URL parameter in the
webapp/config.js
file and mount it into the image:docker run --mount type=bind,source=$(pwd)/webapp/config.json,target=/usr/share/nginx/html/config.json -p 8080:80 -d {your-docker-account}/fe-ui5-mssql:latest
-
Create a new
dev
Namespace:kubectl create namespace dev kubectl label namespaces dev istio-injection=enabled
-
Within the project open the file
k8s/configmap.yaml
and adjust theAPI_URL
by replacing<cluster domain>
to the match the Kyma runtime cluster domain. -
Apply the Resources:
kubectl -n dev apply -f ./k8s/configmap.yaml kubectl -n dev apply -f ./k8s/deployment.yaml kubectl -n dev apply -f ./k8s/apirule.yaml
-
Use the APIRule to open the application:
https://fe-ui5-mssql.{cluster-domain}