Skip to content

Commit 4149207

Browse files
author
Marius Obert
committed
Automatic commit: Move 'appstudio-sapui5-create', 'appstudio-sapui5-debug' from QA to Production
1 parent e5606c5 commit 4149207

38 files changed

Lines changed: 195 additions & 96 deletions

‎tutorials/appstudio-sapui5-create/app.png‎

9.76 KB
Loading

‎tutorials/appstudio-sapui5-create/appid.png‎

-284 KB
Binary file not shown.

‎tutorials/appstudio-sapui5-create/approuter.png‎

-111 KB
Binary file not shown.

‎tutorials/appstudio-sapui5-create/appstudio-sapui5-create.md‎

Lines changed: 151 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
title: Deploy Your First SAPUI5 App to Cloud Foundry
3-
description: Create, build, and deploy an MTA project with an integrated SAPUI5 module.
2+
title: Deploy Your First SAPUI5 App
3+
description: Create, build, and deploy an MTA project with an integrated SAPUI5 module to SAP BTP, Cloud Foundry environment
44
auto_validation: true
55
time: 25
66
tags: [ tutorial>beginner, topic>javascript, topic>sapui5, topic>html5, products>sap-cloud-platform, products>sap-business-application-studio]
@@ -25,6 +25,12 @@ primary_tag: products>sap-cloud-platform-for-the-cloud-foundry-environment
2525
> Have a look at [this tutorial](appstudio-devspace-fiori-create) if you are unsure how to get here or how to create a dev space.
2626
2727

28+
[DONE]
29+
[ACCORDION-END]
30+
[ACCORDION-BEGIN [Step : ](Create a UI5 destination)]
31+
32+
[Create a new destination](cp-cf-create-destination) of the name "ui5" that points to the URL `https://sapui5.hana.ondemand.com/`. This is where we'll pull the standard UI5 libs from later.
33+
2834

2935
[DONE]
3036
[ACCORDION-END]
@@ -47,59 +53,173 @@ Make sure you are connected to a Cloud Foundry endpoint to which you will deploy
4753

4854
[DONE]
4955
[ACCORDION-END]
50-
5156
[ACCORDION-BEGIN [Step : ](Create a new project)]
52-
1. Click on the link **New project From template** on the *Welcome* screen.
57+
1. Click on the link **Start from template** on the *Welcome* screen.
5358

5459
!![newproject](./newproject.png)
5560

56-
2. Select **SAP Fiori Freestyle - Project Generator** as the template category you want to use and click **Next**.
61+
2. Select **SAP Fiori freestyle SAPUI5 application** as the template category you want to use and click **Start**.
5762

5863
!![fioriTemplate](./fioriTemplate.png)
5964

60-
3. Specify the target environment ( **Cloud Foundry** ) and the template ( **SAPUI5 Application** ) and go to the **Next** screen.
65+
3. Specify the application type **SAPUI5 freestyle** and the floor plan **SAPUI5 Application** and go to the **Next** screen.
6166

62-
!![sapui5Template](./sapui5Template.png)
67+
!![sapui5Template](./sapui5app.png)
6368

64-
4. Name the project **`tutorial`** and proceed by clicking **Next**.
69+
4. Now you have the option to connect your SAPUI5 application to a data source. As we won't need a data source in this tutorial, select **None** and click **Next**.
6570

66-
!![projectName](./projectName.png)
71+
!![nodata](./nodata.png)
6772

68-
4. Choose **Standalone Approuter** for the runtime and click **Next**.
73+
4. Keep the default view name and click **Next** .
6974

70-
!![approuter](./approuter.png)
75+
!![viewname](./viewname.png)
7176

72-
4. Name of the module **`webapp`** and the namespace **`sap.cp`** and turn authentication off. Go to the **Next** screen.
77+
4. Name of the module **`sapui5`**, use the application title **`Tutorial`**, define the namespace **`sap.btp`**, and **Add deployment configuration**. Keep the default values for the other parameters and select **Next** to go to the next step.
7378

74-
!![webapp](./webapp.png)
79+
!![projectdetails](./projectdetails.png)
7580

76-
4. Keep the default view name and go for no data service on this screen. Click **Next** to create the new project.
81+
4. Choose **Cloud Foundry** as the target runtime and type in any value for the destination as it is a mandatory field. Press **Finish** to create the new project.
7782

78-
!![viewname](./viewname.png)
83+
!![finishProject](./finishProject.png)
7984

8085

81-
4. Once the project has been created, the Business Application Studio will prompt you to open the project in a new workspace. Click **Open in New Workspace**.
86+
4. Once you see the success message, click **Files & Open** to find the new project.
8287

8388

8489
!![newws](./newws.png)
8590

8691

92+
4. Select **user/projects/sapui5** and confirm with **Open**.
8793

8894

89-
[DONE]
90-
[ACCORDION-END]
91-
[ACCORDION-BEGIN [Step : ](Redirect incoming traffic to the SAPUI5 app)]
92-
95+
!![openws](./openws.png)
9396

94-
The generated code comes ready-to-deploy. By default, the web app will be available at `https://<approuter-url>/<app/id>` and the application router will not redirect traffic that hits the root URL. In this step, you will change this.
9597

96-
1. **Open** the file `webapp/webapp/manifest.json` and find the property `sap.app>id`. The value of this property should be `sap.cp.webapp` but can vary depending on the names you choose in the previous step.
9798

98-
!![appid](./appid.png)
99-
100-
2. **Open** the file `tutorial-approuter/xs-app.json` and add a new property to define the redirect.
99+
[DONE]
100+
[ACCORDION-END]
101+
[ACCORDION-BEGIN [Step : ](Configure the managed application router)]
102+
103+
The project is already deployable as it. But there is one thing missing in order make it accessible from your browser: [The managed application router](https://blogs.sap.com/2020/10/02/serverless-sap-fiori-apps-in-sap-cloud-platform/#serverless)
104+
105+
1. Add a service name in `webapp/manifest.json`.
106+
107+
```JSON[15-17]
108+
{
109+
"_version": "1.29.0",
110+
"sap.app": {
111+
"id": "sap.btp.sapui5",
112+
"type": "application",
113+
"i18n": "i18n/i18n.properties",
114+
"applicationVersion": {
115+
"version": "1.0.0"
116+
},
117+
"title": "",
118+
"description": "",
119+
"resources": "resources.json",
120+
"ach": "ach"
121+
},
122+
"sap.cloud": {
123+
"service": "basic.service"
124+
},
125+
"sap.ui": {
126+
...
127+
```
128+
129+
1. Create a configuration file for the `UAA` service with `xs-security.json`.
130+
131+
```JSON
132+
{
133+
"xsappname": "tutorial",
134+
"tenant-mode": "dedicated"
135+
}
136+
```
137+
138+
1. Add the needed services instance to connect the manager application router with your SAPUI5. To do this, add the following module and resources to `mta.yaml`
139+
140+
```YAML[30-59, 66-77]
141+
_schema-version: "3.2"
142+
ID: sap-btp-sapui5
143+
description: A Fiori application.
144+
version: 0.0.1
145+
modules:
146+
- name: sap-btp-sapui5-deployer
147+
type: com.sap.application.content
148+
path: .
149+
requires:
150+
- name: sap-btp-sapui5-html5-repo-host
151+
parameters:
152+
content-target: true
153+
build-parameters:
154+
build-result: resources
155+
requires:
156+
- artifacts:
157+
- sapbtpsapui5.zip
158+
name: sapbtpsapui5
159+
target-path: resources/
160+
- name: sapbtpsapui5
161+
type: html5
162+
path: .
163+
build-parameters:
164+
build-result: dist
165+
builder: custom
166+
commands:
167+
- npm install
168+
- npm run build:cf
169+
supported-platforms: []
170+
- name: sap-btp-sapui5-destination-content
171+
type: com.sap.application.content
172+
build-parameters:
173+
no-source: true
174+
requires:
175+
- name: sap-btp-sapui5-uaa
176+
parameters:
177+
service-key:
178+
name: sap-btp-sapui5-uaa-key
179+
- name: sap-btp-sapui5-html5-repo-host
180+
parameters:
181+
service-key:
182+
name: sap-btp-sapui5-html5-repo-host-key
183+
- name: sap-btp-sapui5-destination-service
184+
parameters:
185+
content-target: true
186+
parameters:
187+
content:
188+
subaccount:
189+
existing_destinations_policy: update
190+
destinations:
191+
- Name: sap-btp-sapui5-html5-repo-host
192+
ServiceInstanceName: sap-btp-sapui5-html5-repo-host
193+
ServiceKeyName: sap-btp-sapui5-html5-repo-host-key
194+
sap.cloud.service: basic.service
195+
- Authentication: OAuth2UserTokenExchange
196+
Name: sap-btp-sapui5-uaa
197+
ServiceInstanceName: sap-btp-sapui5-uaa
198+
ServiceKeyName: sap-btp-sapui5-uaa-key
199+
sap.cloud.service: basic.service
200+
resources:
201+
- name: sap-btp-sapui5-html5-repo-host
202+
type: org.cloudfoundry.managed-service
203+
parameters:
204+
service: html5-apps-repo
205+
service-plan: app-host
206+
- name: sap-btp-sapui5-destination-service
207+
type: org.cloudfoundry.managed-service
208+
parameters:
209+
service: destination
210+
service-name: sap-btp-sapui5-destination-service
211+
service-plan: lite
212+
- name: sap-btp-sapui5-uaa
213+
type: org.cloudfoundry.managed-service
214+
parameters:
215+
path: ./xs-security.json
216+
service: xsuaa
217+
service-plan: application
218+
parameters:
219+
deploy_mode: html5-repo
220+
enable-parallel-deployments: true
221+
```
101222
102-
!![xsapp](./xsapp.png)
103223
104224
105225
[DONE]
@@ -112,11 +232,9 @@ Build (aka package) the project to a `mtar` archive to deploy it to Cloud Foundr
112232
113233
!![build](./build.png)
114234
115-
2. Check the console output to make sure the process started.
116-
117-
!![state](./buildstate.png)
235+
3. Once the build is complete, you can see a message in the log. You can now find the generated `mtar` archive in the project tree under `mta_archieves`.
118236
119-
3. Once the build is complete, you can see a message in the log. You can find the generated `mtar` archive in the project tree now.
237+
!![state](./buildsuccess.png)
120238
121239
122240
@@ -136,16 +254,16 @@ Now that you created a `mtar` archive, you are all set to deploy the application
136254
137255
!![success](./deploysuccess.png)
138256
139-
> You can also see the URL of the deployed app when running `cf apps` in a new terminal session.
257+
> You can also see the URL of the deployed app when running ` cf html5-list -d -u` in a new terminal session.
140258
141-
> !![cfapps](./cfapps.png)
259+
> !![cfapps](./cfhtml5.png)
142260
143261
[DONE]
144262
[ACCORDION-END]
145263
146264
[ACCORDION-BEGIN [Step : ](Test to the application)]
147265
148-
1. **Open** the started application in your browser. You might need to log in with your SAP ID (the same credentials you use for the SAP Cloud Platform Cockpit).
266+
1. **Open** the started application in your browser. You might need to log in with your SAP ID (the same credentials you use for the SAP BTP Cockpit).
149267
150268
151269
2. See that the sample application consists of a header and an empty page. So you should see something like this:

‎tutorials/appstudio-sapui5-create/build.png‎

476 KB
Loading

‎tutorials/appstudio-sapui5-create/buildstate.png‎

-222 KB
Binary file not shown.

‎tutorials/appstudio-sapui5-create/buildsuccess.png‎

849 KB
Loading

‎tutorials/appstudio-sapui5-create/cfapps.png‎

-240 KB
Binary file not shown.

‎tutorials/appstudio-sapui5-create/cfhtml5.png‎

724 KB
Loading

‎tutorials/appstudio-sapui5-create/connectedEndpoint.png‎

161 KB
Loading

0 commit comments

Comments
 (0)