Skip to Content

Deploy Your First SAPUI5 App to Cloud Foundry

test
0 %
Deploy Your First SAPUI5 App to Cloud Foundry
Details

Deploy Your First SAPUI5 App to Cloud Foundry

September 17, 2020
Created by
June 30, 2020
Create, build, and deploy an MTA project with an integrated SAPUI5 module.

You will learn

  • How to create an MTA archive with a UI module
  • How to build a project for Cloud Foundry
  • How to deploy a project to Cloud Foundry


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 project
  1. Click on the link New project From template on the Welcome screen.

    newproject
  2. Select SAP Fiori Freestyle - Project Generator as the template category you want to use and click Next.

    fioriTemplate
  3. Specify the target environment ( Cloud Foundry ) and the template ( SAPUI5 Application ) and go to the Next screen.

    sapui5Template
  4. Name the project tutorial and proceed by clicking Next.

    projectName
  5. Choose Standalone Approuter for the runtime and click Next.

    approuter
  6. Name of the module webapp and the namespace sap.cp and turn authentication off. Go to the Next screen.

    webapp
  7. Keep the default view name and go for no data service on this screen. Click Next to create the new project.

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

    newws
Log on to answer question
Step 4: Redirect incoming traffic to the SAPUI5 app

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.

  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.

    appid
  2. Open the file tutorial-approuter/xs-app.json and add a new property to define the redirect.

    xsapp
Log on to answer question
Step 5: 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. Check the console output to make sure the process started.

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

Log on to answer question
Step 6: 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. Open this URL in your browser to start the application.

    success

You can also see the URL of the deployed app when running cf apps in a new terminal session.

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

  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