Skip to content

Commit cf02110

Browse files
author
Marius Obert
committed
Automatic commit: Move 'appstudio-devspace-fiori-create', 'appstudio-sapui5-create', 'appstudio-sapui5-debug', 'hcp-abh-api-ui5-app' from QA to Production
1 parent aa44c37 commit cf02110

62 files changed

Lines changed: 538 additions & 49 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎tutorials/appstudio-devspace-fiori-create/appstudio-devspace-fiori-create.md‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,17 @@ author_profile: https://github.com/raz-korn
5555

5656
[ACCORDION-BEGIN [Step 3: ](Open the SAP Fiori dev space)]
5757

58-
1. Click the name of the dev space you created.
58+
**Click** the name of the dev space you created.
5959

60-
!![Open Dev Space](AppStudio Open Dev Space_.jpg)
6160

62-
The SAP Fiori dev space opens and the **Welcome** tab appears.
63-
!![Open Dev Space](03-01-02 AppStudio Welcome Tab.jpg)
61+
!![Open Dev Space](AppStudio Open Dev Space_.jpg)
6462

65-
>The purple color of the status bar indicates that there is no open workspace.
63+
64+
The SAP Fiori dev space opens and the **Welcome** tab appears.
65+
66+
!![Open Dev Space](03-01-02 AppStudio Welcome Tab.jpg)
67+
68+
>The purple color of the status bar indicates that there is no open workspace.
6669
6770
[DONE]
6871
[ACCORDION-END]

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

79.1 KB
Loading

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

284 KB
Loading

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

111 KB
Loading

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
title: Deploy Your First SAPUI5 App to Cloud Foundry
3+
description: Create, build, and deploy an MTA project with an integrated SAPUI5 module.
4+
auto_validation: true
5+
time: 25
6+
tags: [ tutorial>beginner, topic>javascript, topic>sapui5, topic>html5, products>sap-cloud-platform, products>sap-business-application-studio]
7+
primary_tag: products>sap-cloud-platform-for-the-cloud-foundry-environment
8+
---
9+
10+
## Details
11+
### You will learn
12+
- How to create an MTA archive with a UI module
13+
- How to build a project for Cloud Foundry
14+
- How to deploy a project to Cloud Foundry
15+
16+
---
17+
18+
[ACCORDION-BEGIN [Step : ](Open the Fiori dev space)]
19+
20+
21+
**Start** a dev space of kind *SAP Fiori* and **open** it by clicking its name.
22+
23+
!![selectDevSpace](./selectDevSpace.png)
24+
25+
> 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.
26+
27+
28+
29+
[DONE]
30+
[ACCORDION-END]
31+
[ACCORDION-BEGIN [Step : ](Connect to a Cloud Foundry endpoint)]
32+
33+
Make sure you are connected to a Cloud Foundry endpoint to which you will deploy the SAPUI5 application later.
34+
35+
1. Click on the bottom-left corner of the screen to start the connection flow.
36+
37+
!![notConnected](./notConnected.png)
38+
39+
2. Enter the Cloud Foundry endpoint you want to use. If your environment runs in the EU10-region, this is `https://api.cf.eu10.hana.ondemand.com`. Enter your email and your password to proceed.
40+
41+
!![selectEndpoint](./selectEndpoint.png)
42+
43+
3. Next, you need to select the Cloud Foundry Organization and space you want use. You will see that you are connected to the endpoint once these prompts have been answered.
44+
45+
!![connectedEndpoint](./connectedEndpoint.png)
46+
47+
48+
[DONE]
49+
[ACCORDION-END]
50+
51+
[ACCORDION-BEGIN [Step : ](Create a new project)]
52+
1. Click on the link **New project From template** on the *Welcome* screen.
53+
54+
!![newproject](./newproject.png)
55+
56+
2. Select **Fiori Project** as the template category you want to use and click **Next**.
57+
58+
!![fioriTemplate](./fioriTemplate.png)
59+
60+
3. Specify the target environment ( **Cloud Foundry** ) and the template ( **SAPUI5 Application** ) and go to the **Next** screen.
61+
62+
!![sapui5Template](./sapui5Template.png)
63+
64+
4. Name the project **`tutorial`** and proceed by clicking **Next**.
65+
66+
!![projectName](./projectName.png)
67+
68+
4. Choose **Standalone Approuter** for the runtime and click **Next**.
69+
70+
!![approuter](./approuter.png)
71+
72+
4. Name of the module **`webapp`** and the namespace **`sap.cp`** and turn authentication off. Go to the **Next** screen.
73+
74+
!![webapp](./webapp.png)
75+
76+
4. Keep the default view name and go for no data service on this screen. Click **Next** to create the new project.
77+
78+
!![viewname](./viewname.png)
79+
80+
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**.
82+
83+
84+
!![newws](./newws.png)
85+
86+
87+
88+
89+
[DONE]
90+
[ACCORDION-END]
91+
[ACCORDION-BEGIN [Step : ](Redirect incoming traffic to the SAPUI5 app)]
92+
93+
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.
95+
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.
97+
98+
!![appid](./appid.png)
99+
100+
2. **Open** the file `tutorial-approuter/xs-app.json` and add a new property to define the redirect.
101+
102+
!![xsapp](./xsapp.png)
103+
104+
105+
[DONE]
106+
[ACCORDION-END]
107+
[ACCORDION-BEGIN [Step : ](Build the application)]
108+
109+
Build (aka package) the project to a `mtar` archive to deploy it to Cloud Foundry.
110+
111+
1. Right-click on the `mta.yaml` file and select **Build MTA** to trigger this process.
112+
113+
!![build](./build.png)
114+
115+
2. Check the console output to make sure the process started.
116+
117+
!![state](./buildstate.png)
118+
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.
120+
121+
122+
123+
[DONE]
124+
[ACCORDION-END]
125+
[ACCORDION-BEGIN [Step : ](Deploy the archive to Cloud Foundry)]
126+
127+
Now that you created a `mtar` archive, you are all set to deploy the application.
128+
129+
1. Right-click on the `mtar` file and select **Deploy** and **Deploy MTA Archive**.
130+
131+
!![deploy](./deploy.png)
132+
133+
2. Check the console output to make sure the process started.
134+
135+
3. You will see a success message and the URL of the app in the log once the deployment finished. Open this URL in your browser to start the application.
136+
137+
!![success](./deploysuccess.png)
138+
139+
> You can also see the URL of the deployed app when running `cf apps` in a new terminal session.
140+
!![cfapps](./cfapps.png)
141+
142+
[DONE]
143+
[ACCORDION-END]
144+
145+
[ACCORDION-BEGIN [Step : ](Test to the application)]
146+
147+
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).
148+
149+
150+
2. See that the sample application consists of a header and an empty page. So you should see something like this:
151+
152+
!![app](./app.png)
153+
154+
155+
Enter the URL of your running application:
156+
157+
[VALIDATE_1]
158+
[ACCORDION-END]

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

120 KB
Loading

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

222 KB
Loading

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

240 KB
Loading

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

125 KB
Loading

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

225 KB
Loading

0 commit comments

Comments
 (0)