Skip to Content

Deploy Your First SAPUI5 App

test
0 %
Deploy Your First SAPUI5 App
Details

Deploy Your First SAPUI5 App

August 19, 2021
Created by
June 30, 2020
Create, build, and deploy an MTA project with an integrated SAPUI5 module to SAP BTP, Cloud Foundry environment

You will learn

  • How to create an SAPUI5 project
  • How to build a project for Cloud Foundry
  • How to deploy a project to Cloud Foundry
QR code


Step 1: Open the Fiori dev space

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

selectDevSpace

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

Log on to answer question
Step 2: Connect to a Cloud Foundry endpoint

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

  1. Click on the bottom-left corner of the screen to start the connection flow.

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

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

    connectedEndpoint
Log on to answer question
Step 3: Create a new single-module-project

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.

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

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

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

    nodata
  5. Keep the default view name and click Next .

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

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

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

    openws

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

    openws
Log on to answer question
Step 4: Build the application

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.

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

    state
Log on to answer question
Step 5: Deploy the archive to Cloud Foundry

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.

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

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

    cfapps

    Use the following command in case you use the Portal service

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

Log on to answer question
Step 6: Test to the application
  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:

app

Enter the URL of your running application:

×

Next Steps

Back to top