Skip to content

Commit f92bad2

Browse files
nicoschoenteichnicoschoenteich
committed
new appfront mta sample
1 parent b002ea3 commit f92bad2

File tree

18 files changed

+621
-0
lines changed

18 files changed

+621
-0
lines changed

‎application-frontend-mta/diagram.png‎

114 KB
Loading

‎application-frontend-mta/list.png‎

229 KB
Loading

‎application-frontend-mta/mta.yaml‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
_schema-version: '3.1'
2+
ID: "sample-manage-products-app-front-mta"
3+
version: 1.0.0
4+
description: "A sample MTA-based application using the Application Frontend service."
5+
6+
modules:
7+
- name: sample-manage-products-app-content
8+
type: com.sap.application.content
9+
path: .
10+
requires:
11+
- name: sample-manage-products-auth
12+
- name: sample-manage-products-app-front
13+
parameters:
14+
content-target: true
15+
build-parameters:
16+
build-result: resources
17+
requires:
18+
- artifacts:
19+
- sample-manage-products-uimodule.zip
20+
name: sample-manage-products-uimodule
21+
target-path: resources/
22+
parameters:
23+
config:
24+
destinations:
25+
- name: northwind
26+
url: https://services.odata.org
27+
28+
- name: sample-manage-products-uimodule
29+
type: html5
30+
path: uimodule
31+
build-parameters:
32+
build-result: dist
33+
builder: custom
34+
commands:
35+
- npm install
36+
- npm run build
37+
supported-platforms: []
38+
39+
resources:
40+
- name: sample-manage-products-app-front
41+
type: org.cloudfoundry.managed-service
42+
parameters:
43+
service: app-front
44+
service-name: sample-manage-products-app-front-service
45+
service-plan: developer
46+
47+
- name: sample-manage-products-auth
48+
type: org.cloudfoundry.managed-service
49+
parameters:
50+
service: xsuaa
51+
service-plan: application
52+
path: ./xs-security.json
53+
config:
54+
xsappname: sample-manage-products-${org}-${space}
55+
tenant-mode: dedicated

‎application-frontend-mta/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "application-frontend-mta",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"start": "npm start --prefix uimodule",
6+
"build": "mbt build --mtar products",
7+
"deploy": "cf deploy mta_archives/products.mtar"
8+
},
9+
"dependencies": {
10+
"mbt": "latest"
11+
}
12+
}

‎application-frontend-mta/readme.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Multi-Target Application (MTA): SAP Fiori Application using the Application Frontend Service
2+
3+
## Diagram
4+
5+
![diagram](diagram.png)
6+
7+
## Description
8+
9+
This an example of a multi-target application (MTA) including a SAP Fiori application that is deployed to the [Application Frontend service](https://help.sap.com/docs/application-frontend-service/application-frontend-service/what-is-application-frontend-service) via the Generic Application Content Deployer. The Application Frontend service comes with the capabilities of the [application router](https://www.npmjs.com/package/@sap/approuter), so applications must include an [xs-app.json](./webapp/xs-app.json) file (also see [minimal requirements](https://help.sap.com/docs/application-frontend-service/application-frontend-service/preparing-applications-for-application-frontend-service)).
10+
11+
> This sample comes with the option of using either the [Northwind OData service](https://services.odata.org/v4/Northwind/Northwind.svc) or a [self-hosted backend service](/optional-self-hosted-backend/README.md). By default, the Northwind OData service is used. If you want to use the self-hosted backend instead, go into the [ui5.yaml](uimodule/ui5.yaml) file and use the `ui5-middleware-cap` (currently commented out) instead of the `fiori-tools-proxy`. Also make sure to change the destination url in the [mta.yaml](mta.yaml) file to point to your (deployed) self-hosted backend service.
12+
13+
## Download and Deployment
14+
15+
1. Follow the [initial setup guide](https://help.sap.com/docs/application-frontend-service/application-frontend-service/initial-setup) for the Application Frontend service.
16+
1. Download the source code:
17+
```
18+
git clone https://github.com/SAP-samples/multi-cloud-html5-apps-samples
19+
cd multi-cloud-html5-apps-samples/application-frontend-mta
20+
```
21+
1. Build the project:
22+
```
23+
npm install
24+
npm run build
25+
```
26+
1. Login to Cloud Foundry using the Cloud Foundry CLI (see [tutorial](https://developers.sap.com/tutorials/cp-cf-download-cli.html)):
27+
```
28+
cf login -a <API Endpoint>
29+
```
30+
1. Deploy the project:
31+
```
32+
npm run deploy
33+
```
34+
35+
## Check the Result
36+
37+
### List the Deployed HTML5 Apps
38+
39+
You can find a list of all deployed HTML5 applications for the Application Frontend service in the SAP BTP Cockpit:
40+
41+
![List of deployed HTML5 Apps](list.png)
42+
43+
### Check the SAP Fiori Application
44+
45+
Click on the link of the deployed HTLM5 application in the SAP BTP Cockpit to open it. You are redirected to a sign-on page before you can see the app.
46+
47+
![SAP Fiori Application](result.png)

‎application-frontend-mta/result.png‎

249 KB
Loading

‎application-frontend-mta/uimodule/.eslintrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": "plugin:@sap-ux/eslint-plugin-fiori-tools/defaultTS",
3+
"root": true
4+
}

‎application-frontend-mta/uimodule/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "sample-manage-products-uimodule",
3+
"version": "0.0.1",
4+
"private": true,
5+
"description": "uimodule description",
6+
"keywords": [
7+
"ui5",
8+
"openui5",
9+
"sapui5"
10+
],
11+
"main": "webapp/index.html",
12+
"devDependencies": {
13+
"@openui5/types": "^1.135.0",
14+
"@sap-ux/eslint-plugin-fiori-tools": "^0.4.0",
15+
"@sap/ux-specification": "UI5-1.128",
16+
"@sap/ux-ui5-tooling": "1",
17+
"@sapui5/types": "~1.128.0",
18+
"@typescript-eslint/eslint-plugin": "^7.1.1",
19+
"@typescript-eslint/parser": "^7.1.1",
20+
"@ui5/cli": "^3.0.0",
21+
"@ui5/linter": "latest",
22+
"cap-service": "file:../../optional-self-hosted-backend",
23+
"ts-node": "^10.9.2",
24+
"typescript": "^5.8.3",
25+
"ui5-middleware-cap": "^3.3.0",
26+
"ui5-task-zipper": "^3.4.1",
27+
"ui5-tooling-transpile": "^3.3.7"
28+
},
29+
"scripts": {
30+
"start": "ui5 serve --config=ui5.yaml --open index.html",
31+
"build": "ui5 build",
32+
"ts-typecheck": "tsc --noEmit",
33+
"prestart": "npm run ts-typecheck",
34+
"prebuild": "npm run ts-typecheck",
35+
"ui5lint": "ui5lint"
36+
},
37+
"sapux": true
38+
}

‎application-frontend-mta/uimodule/tsconfig.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2022",
4+
"module": "es2022",
5+
"skipLibCheck": true,
6+
"allowJs": true,
7+
"strict": true,
8+
"strictPropertyInitialization": false,
9+
"moduleResolution": "node",
10+
"rootDir": "./webapp",
11+
"outDir": "./dist",
12+
"baseUrl": "./",
13+
"paths": {
14+
"uimodule/*": [
15+
"./webapp/*"
16+
]
17+
},
18+
"types": [
19+
"@sapui5/types"
20+
]
21+
},
22+
"include": [
23+
"./webapp/**/*"
24+
]
25+
}

‎application-frontend-mta/uimodule/ui5.yaml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
specVersion: "3.1"
2+
metadata:
3+
name: sample-manage-products-uimodule
4+
type: application
5+
server:
6+
customMiddleware:
7+
- name: ui5-middleware-cap
8+
afterMiddleware: compression
9+
# - name: fiori-tools-proxy
10+
# afterMiddleware: compression
11+
# configuration:
12+
# backend:
13+
# - path: /Northwind
14+
# destination: northwind
15+
# url: https://services.odata.org/v4/
16+
- name: fiori-tools-appreload
17+
afterMiddleware: compression
18+
configuration:
19+
port: 35729
20+
path: webapp
21+
delay: 300
22+
- name: ui5-tooling-transpile-middleware
23+
afterMiddleware: compression
24+
configuration:
25+
debug: true
26+
transformModulesToUI5:
27+
overridesToOverride: true
28+
excludePatterns:
29+
- /Component-preload.js
30+
- name: preview-middleware
31+
afterMiddleware: compression
32+
configuration:
33+
test:
34+
- framework: Qunit
35+
builder:
36+
customTasks:
37+
- name: ui5-tooling-transpile-task
38+
afterTask: replaceVersion
39+
configuration:
40+
debug: true
41+
transformModulesToUI5:
42+
overridesToOverride: true
43+
- name: ui5-task-zipper
44+
afterTask: generateCachebusterInfo
45+
configuration:
46+
archiveName: sample-manage-products-uimodule

0 commit comments

Comments
 (0)