Deploy Your First SAPUI5 App

Start a dev space of kind SAP Fiori and open it by clicking its name.

Have a look at this tutorial if you are unsure how to get here or how to create a dev space.

Make sure you are connected to a Cloud Foundry endpoint to which you will deploy the SAPUI5 application later.

1. 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. To do so, use the CF: Login to Cloud Foundry command. From the menu, select View and then Find Command. Type CF: Login and then select CF: Login to Cloud Foundry. Select your endpoint or enter the value for your region and then enter your email and password to proceed.

   

2. 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.

   

This step will guide you through the needed actions to create a project that contains a single SAPUI5 application. In case you want to create a project that contains multiple UI modules, please do not follow these instructions and rather create an empty MTA project to which you then add multiple UI modules.

1. Click on the link Start from template on the Welcome screen.

   

2. Select SAP Fiori freestyle SAPUI5 application as the template category you want to use and click Start.

   

3. Specify the application type SAPUI5 freestyle and the floor plan SAPUI5 Application and go to the Next screen.

   

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.

   

5. Keep the default view name and click Next .

   

6. 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.

   

7. Choose Cloud Foundry as the target runtime and select None for the destination and make sure that Add application to managed application router is selected. Then, press Finish to create the new project.

   

8. Once you see the success message, click File | Open Workspace… to open a new dialog.

   

   In there, select the generated folder sapui5 and hit open to see the new project.

   

Build (aka package) the project to a mtar archive to deploy it to Cloud Foundry.

1. Right-click on the mta.yaml file and select Build MTA to trigger this process.

   

2. 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_archives.

   

Now that you created a mtar archive, you are all set to deploy the application.

1. Right-click on the mtar file and select Deploy and Deploy MTA Archive.

   

2. Check the console output to make sure the process started.

3. You will see a success message and the URL of the app in the log once the deployment finished.

   

4. You can see the URL of the deployed app when running cf html5-list -di sap-btp-sapui5-dest-srv -u --runtime launchpad in a new terminal session.

   

   Use the following command in case you use the Portal service

   cf html5-list -di sap-btp-sapui5-destination-service -u --runtime cpp

1. Open the application in your browser. You might need to log in with your SAP ID (the same credentials you use for the SAP BTP Cockpit).

   There is temporarily a need to update the given URL to view the application. When pasting the URL into your browser, remove cpp from your URL and replace it with launchpad.

2. See that the sample application consists of a header and an empty page. So you should see something like this:

Enter the URL of your running application: