Skip to content

Commit 67af8bb

Browse files
author
Marius Obert
authored
Merge pull request #24 from SAP-samples/feat/kymaExamples
Feat/kyma examples
2 parents 7e84626 + 1202326 commit 67af8bb

File tree

22 files changed

+537
-10
lines changed

22 files changed

+537
-10
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ In contrast to the examples above, you don't need an application router for the
7070
7171
# Examples for SAP BTP, Kubernetes Environment
7272
73-
Coming soon...
74-
73+
## HTML5 Apps Using the Managed Application Router
74+
- [Basic SAPUI5 App with a Managed Application Router and a Backend Component in the Kyma Runtime](managed-html5-runtime-jwt-kyma)
7575
7676
## Known Issues
7777
None so far :)

‎managed-html5-runtime-basic-mta/HTML5Module/xs-app.json

-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
{
22
"welcomeFile": "/index.html",
33
"authenticationMethod": "route",
4-
"logout": {
5-
"logoutEndpoint": "/do/logout"
6-
},
74
"routes": [
85
{
96
"source": "^(.*)$",

‎managed-html5-runtime-basic-mta/diagram.png

-272 KB
Loading

‎managed-html5-runtime-fiori-mta/HTML5Module/xs-app.json

-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
{
22
"welcomeFile": "/index.html",
33
"authenticationMethod": "route",
4-
"logout": {
5-
"logoutEndpoint": "/do/logout"
6-
},
74
"routes": [
85
{
96
"authenticationType": "none",

‎managed-html5-runtime-fiori-mta/diagram.png

-272 KB
Loading

‎managed-html5-runtime-fiori-mta/readme.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
## Description
99

10-
This is an example of an SAP Fiori app that is accessed by a managed application router. The SAP Fiori app is exposed to the SAP Launchpad service and is visible in the content manager of the launchpad. The app is deployed to the HTML5 Application Repository and uses the Authentication & Authorization service (XSUAA service) and the destination service.
10+
This is an example of an SAP Fiori app that is accessed by a managed application router. The SAP Fiori app is exposed to the SAP Launchpad service and is visible in the content manager of the launchpad. The app is deployed to the HTML5 Application Repository via the Cloud Foundry environment and uses the Authentication & Authorization service (XSUAA service) and the destination service.
1111

1212
The web app that is contained in the `uimodule.zip` defines the following properties in the `manifest.json` file. Otherwise, the correspoding values in the `mta.yaml` descriptor need to be updated as well.
1313

‎managed-html5-runtime-jwt-kyma/README.md

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Basic SAPUI5 App with a Managed Application Router and a Backend Component in the Kyma Runtime
2+
3+
4+
## Diagram
5+
6+
![diagram](diagram.png)
7+
8+
9+
## Description
10+
11+
This is an example of an SAP Fiori app that is accessed by a managed application router and a backend component that runs in the Kyma runtime. The SAPUI5 app is exposed to an SAP Launchpad service and is visible in the content manager of the launchpad. The app is deployed to the HTML5 Application Repository via the Kyma runtime and uses the Authentication & Authorization service (XSUAA service) and the destination service.
12+
The backend component accepts incoming requests and returns the payload of the decoded JWT token (if available) at `/be`.
13+
14+
15+
16+
As a result of deploying this `/deployment.yaml` you will get 2 pods:
17+
18+
1. `html5appdeployer` - an html5-app-deployer library based application that uploads favorites html5 application to HTML5 Application Repository and generates the required destinations.
19+
2. `backend` - a simple nodejs server that returns the JWT forwarded by the managed application router
20+
21+
In addition the following service instances are created:
22+
- xsuaa/application service instance bound to backend container
23+
- html5-apps-repo/app-host service instance bound to html5appdeployer container (used to upload content to html5 repo)
24+
- destination/lite instance - this is for future use - (automatically generate destination configurations on instance level)
25+
26+
## Download and Deployment
27+
1. Have an account for a Docker registry and log in the the docker CLI (e.g. [DockerHub](https://docs.docker.com/docker-hub/))
28+
1. [Install the Kubernetes Command Line Tool](https://developers.sap.com/tutorials/cp-kyma-download-cli.html)
29+
1. Subscribe to the [launchpad service](https://developers.sap.com/tutorials/cp-portal-cloud-foundry-getting-started.html) if you haven't done so before.
30+
2. Build and upload the docker image of the backend component
31+
```
32+
cd kyma-html5-repo-example/backend
33+
docker build -t iobert/kyma-simple-backend .
34+
docker push iobert/kyma-simple-backend
35+
```
36+
2. Build and upload the docker image of the html5 app deployer
37+
```
38+
cd ../html5-app-deployer
39+
docker build -t iobert/kyma-html5-app-deployer
40+
docker push iobert/kyma-html5-app-deployer
41+
```
42+
4. Add your account id (e.g. "43de072btrial") to the destination which is defined in the environment variable `BACKEND_DESTINATIONS` of the [deployment descriptor](html5-app-deployer/deployment.yaml).
43+
2. Deploy the project
44+
```
45+
kubectl apply -f deployment.yaml
46+
```
47+
48+
2. Access the web app via the SAP BTP cockpit or assemble the URL according to the following pattern:
49+
```
50+
https://<account id>.launchpad.cfapps.eu10.hana.ondemand.com/<destination service instance ID>.businessservice.tokendisplay/index.html ->
51+
https://43de072btrial.launchpad.cfapps.eu10.hana.ondemand.com/8aebc2e1-2234-4bd1-8da4-e15231138dbf.businessservice.tokendisplay/index.html
52+
```
53+
54+
> You can find the destination service instance ID in the Kyma console
55+
![](instanceId.png)
56+
57+
58+
## Check the Result
59+
60+
### Check the HTML5 App
61+
62+
Access the URL described in [Download and Deployment](#download-and-deployment) to view the web app. You are redirected to a sign-on page before you can see the web app.
63+
64+
![webapp](result.png)

‎managed-html5-runtime-jwt-kyma/backend/Dockerfile

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
FROM node:14-alpine
2+
3+
RUN mkdir -p /app && \
4+
chown node.node /app
5+
6+
# Create app directory
7+
WORKDIR /app
8+
9+
# Bundle app source
10+
COPY . .
11+
RUN npm install --production
12+
13+
EXPOSE 5000
14+
CMD [ "npm", "start" ]

‎managed-html5-runtime-jwt-kyma/backend/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "backend",
3+
"version": "1.0.0",
4+
"main": "server.js",
5+
"scripts": {
6+
"start": "node server.js"
7+
},
8+
"dependencies": {
9+
"express": "^4.17.1",
10+
"jwt-decode": "3.1.2"
11+
}
12+
}

‎managed-html5-runtime-jwt-kyma/backend/server.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
"use strict";
2+
3+
const express = require("express");
4+
const jwtDecode = require("jwt-decode");
5+
6+
var app = express();
7+
8+
app.get("/", function (_, res) {
9+
res.end("This app runs on SAP BTP, Kyma Runtime. \n Yay! 🚀");
10+
});
11+
12+
app.get("/be", function (req, res) {
13+
console.log("====Req headers ", req.headers);
14+
let token = req.headers["authorization"];
15+
if (!token) {
16+
res.end("No token found");
17+
return;
18+
}
19+
let decodedToken = jwtDecode(token);
20+
res.setHeader("Content-Type", "application/json");
21+
res.end(JSON.stringify(decodedToken));
22+
});
23+
24+
app.listen(process.env.PORT || 3000);
25+

‎managed-html5-runtime-jwt-kyma/deployment.yaml

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
---
2+
apiVersion: apps/v1
3+
kind: Deployment
4+
metadata:
5+
name: backend
6+
labels:
7+
app: backend
8+
spec:
9+
replicas: 1
10+
selector:
11+
matchLabels:
12+
app: backend
13+
template:
14+
metadata:
15+
labels:
16+
app: backend
17+
spec:
18+
containers:
19+
- image: iobert/kyma-simple-backend
20+
imagePullPolicy: Always
21+
name: backend
22+
volumeMounts:
23+
- name: xsuaa-volume
24+
mountPath: /etc/secrets/sapcp/xsuaa/kyma-xsuaa-instance
25+
readOnly: true
26+
env:
27+
- name: PORT
28+
value: "5000"
29+
volumes:
30+
- name: xsuaa-volume
31+
secret:
32+
secretName: kyma-xsuaa-binding
33+
---
34+
apiVersion: v1
35+
kind: Service
36+
metadata:
37+
labels:
38+
app: backend
39+
name: backend-svc
40+
spec:
41+
type: NodePort
42+
ports:
43+
- port: 5000
44+
selector:
45+
app: backend
46+
47+
---
48+
apiVersion: gateway.kyma-project.io/v1alpha1
49+
kind: APIRule
50+
metadata:
51+
labels:
52+
app: backend
53+
name: backend
54+
apirule.gateway.kyma-project.io/v1alpha1: backend
55+
spec:
56+
gateway: kyma-gateway.kyma-system.svc.cluster.local
57+
service:
58+
host: backend
59+
name: backend-svc
60+
port: 5000
61+
rules:
62+
- path: /.*
63+
methods: ["GET", "POST"]
64+
accessStrategies:
65+
- handler: noop
66+
67+
---
68+
apiVersion: apps/v1
69+
kind: Deployment
70+
metadata:
71+
name: html5appdeployer
72+
labels:
73+
app: html5appdeployer
74+
spec:
75+
replicas: 1
76+
selector:
77+
matchLabels:
78+
app: html5appdeployer
79+
template:
80+
metadata:
81+
labels:
82+
app: html5appdeployer
83+
spec:
84+
containers:
85+
- image: iobert/kyma-html5-app-deployer
86+
imagePullPolicy: Always
87+
name: html5appdeployer
88+
volumeMounts:
89+
- name: html5-repo-app-host-volume
90+
mountPath: /etc/secrets/sapcp/html5-apps-repo/kyma-app-host-instance
91+
readOnly: true
92+
- name: xsuaa-volume
93+
mountPath: /etc/secrets/sapcp/xsuaa/kyma-xsuaa-instance
94+
readOnly: true
95+
- name: destination-volume
96+
mountPath: /etc/secrets/sapcp/destination/kyma-destination-instance
97+
readOnly: true
98+
env:
99+
- name: SAP_CLOUD_SERVICE
100+
value: "business.service"
101+
- name: BACKEND_DESTINATIONS
102+
value: "[{
103+
\"Name\":\"token-service\",
104+
\"Description\":\"my kyma backend\",
105+
\"Type\":\"HTTP\",
106+
\"ProxyType\":\"Internet\",
107+
\"URL\":\"https://backend.c210ab1.kyma.shoot.live.k8s-hana.ondemand.com\",
108+
\"Authentication\":\"NoAuthentication\",
109+
\"HTML5.forwardAuthToken\": true}]"
110+
volumes:
111+
- name: html5-repo-app-host-volume
112+
secret:
113+
secretName: kyma-app-host-binding
114+
- name: xsuaa-volume
115+
secret:
116+
secretName: kyma-xsuaa-binding
117+
- name: destination-volume
118+
secret:
119+
secretName: kyma-destination-binding
120+
121+
---
122+
apiVersion: servicecatalog.k8s.io/v1beta1
123+
kind: ServiceInstance
124+
metadata:
125+
name: kyma-xsuaa-instance
126+
spec:
127+
clusterServiceClassExternalName: xsuaa
128+
clusterServicePlanExternalName: application
129+
parameters:
130+
xsappname: kyma-app
131+
tenant-mode: shared
132+
scopes:
133+
- name: "$XSAPPNAME.Callback"
134+
description: "With this scope set, the callbacks for tenant onboarding, offboarding and getDependencies can be called."
135+
grant-as-authority-to-apps :
136+
- $XSAPPNAME(application,sap-provisioning,tenant-onboarding)
137+
role-templates:
138+
- name: TOKEN_EXCHANGE
139+
description: Token exchange
140+
scope-references:
141+
- uaa.user
142+
- name: "MultitenancyCallbackRoleTemplate"
143+
description: "Call callback-services of applications"
144+
scope-references:
145+
- "$XSAPPNAME.Callback"
146+
oauth2-configuration:
147+
grant-types:
148+
- authorization_code
149+
- client_credentials
150+
- password
151+
- refresh_token
152+
- urn:ietf:params:oauth:grant-type:saml2-bearer
153+
- user_token
154+
- client_x509
155+
- urn:ietf:params:oauth:grant-type:jwt-bearer
156+
redirect-uris:
157+
- https://*/**
158+
159+
---
160+
apiVersion: servicecatalog.k8s.io/v1beta1
161+
kind: ServiceBinding
162+
metadata:
163+
name: kyma-xsuaa-binding
164+
spec:
165+
instanceRef:
166+
name: kyma-xsuaa-instance
167+
168+
---
169+
apiVersion: servicecatalog.k8s.io/v1beta1
170+
kind: ServiceInstance
171+
metadata:
172+
name: kyma-app-host-instance
173+
spec:
174+
clusterServiceClassExternalName: html5-apps-repo
175+
clusterServicePlanExternalName: app-host
176+
177+
---
178+
apiVersion: servicecatalog.k8s.io/v1beta1
179+
kind: ServiceBinding
180+
metadata:
181+
name: kyma-app-host-binding
182+
spec:
183+
instanceRef:
184+
name: kyma-app-host-instance
185+
186+
---
187+
apiVersion: servicecatalog.k8s.io/v1beta1
188+
kind: ServiceInstance
189+
metadata:
190+
name: kyma-destination-instance
191+
spec:
192+
clusterServiceClassExternalName: destination
193+
clusterServicePlanExternalName: lite
194+
parameters:
195+
HTML5Runtime_enabled: true
196+
version: "1.0.0"
197+
198+
---
199+
apiVersion: servicecatalog.k8s.io/v1beta1
200+
kind: ServiceBinding
201+
metadata:
202+
name: kyma-destination-binding
203+
spec:
204+
instanceRef:
205+
name: kyma-destination-instance

‎managed-html5-runtime-jwt-kyma/diagram.png

1.29 MB
Loading

‎managed-html5-runtime-jwt-kyma/html5-app-deployer/.dockerignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎managed-html5-runtime-jwt-kyma/html5-app-deployer/Dockerfile

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
FROM node:14-alpine
2+
3+
RUN mkdir -p /app && \
4+
chown node.node /app
5+
6+
# Create app directory
7+
WORKDIR /app
8+
9+
# Bundle app source
10+
COPY . .
11+
RUN npm install --production
12+
13+
CMD [ "npm", "start" ]

‎managed-html5-runtime-jwt-kyma/html5-app-deployer/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "kyma-html5-app-deployer",
3+
"version": "1.0.0",
4+
"dependencies": {
5+
"@sap/html5-app-deployer": "2.3.1"
6+
},
7+
"scripts": {
8+
"start": "node node_modules/@sap/html5-app-deployer/index.js"
9+
}
10+
}

0 commit comments

Comments
 (0)