Skip to Content

Create an SAPUI5 App from the Command Line

Beginner
20 min.
SAPUI5, Beginner, Cloud, JavaScript, HTML5, Tutorial, SAP Business Technology Platform, Free Tier
Create and test a newly created SAPUI5 app on you local machine with the editor of your choice.
You will learn
  • How to scaffold an SAPUI5 project
  • How to leverage the ui5-tooling to test the app locally
  • How to build a multi-target application archive archive
  • How to deploy a SAPUI5 web-app to SAP BTP, Cloud Foundry environment
nicoschoenteichNico SchoenteichFebruary 6, 2023
Created by
May 2, 2019
Contributors
maximilianone
IObert
nicoschoenteich

Prerequisites

  • Step 1

    Run the following command to trigger the creation of a new project.

    yo easy-ui5 project

    Choose the following responses for the prompted parameters.

    Parameter Value
    What do you want to do? Create a new OpenUI5/SAPUI5 project [app]
    How do you want to name this project? myUI5App
    Which namespace do you want to use? com.myorg
    Do you want to enable the SAP Fiori elements flexible programming model? No
    On which platform would you like to host the application Application Router @ Cloud Foundry
    Which view type do you want to use? XML
    Where should your UI5 libs be served from? Content delivery network (SAPUI5)
    Would you like to create a new directory for the project? Yes
    Would you like to add JavaScript code assist libraries to the project? Yes
    Would you like to initialize a local git repository for the project? No
    yeomangen

    The following installation of the project’s dependencies might take a while.

  • Step 2

    Let’s have a look at the generated code. Go to the newly created directory and open the code with your favorite editor (here Visual Studio Code).

    Bash
    Copy
    cd com.myorg.myUI5App/
code .

    You can see that the wizard created a bunch of folders and files.

    vscode

    The main code for the SAPUI5 app can be found in the directory webapp. You might miss the folders dist and mta_archives as they will be created later during the build step.

    The package.json file contains many useful information about the project. The npm scripts are especially interesting, since they wrap the command we’ll use later.

  • Step 3

    This project leverages the UI5 tooling framework for development. Among other tasks, this tool belt can help you to start a local web server when you run

    Bash
    Copy
    npm start
    local
  • Step 4

    It makes sense to minify the JavaScript code before you deploy it to the cloud. This minification step can be combined with the creation of the MTA archive by

    Bash
    Copy
    npm run build:mta

    What's the name of the generated archive (You can find this info in the output of the build command or in the mta_archives folder)?

  • Step 5

    Next, we deploy the generated archive to SAP BTP, Cloud Foundry environment. Trigger the deployment and track the deployment progress in the terminal with the following command.

    Bash
    Copy
    cf deploy mta_archives/myUI5App_0.0.1.mtar

    The command npm run deploy will do both, generate and deploy the application to Cloud Foundry.

  • Step 6

    You can check the status of all running apps in Cloud Foundry with

    Bash
    Copy
    cf apps

    The requested state of your application should read started.

    cfapps

    You can also check out the logs of your app via cf logs <app name>

  • Step 7

    You can see the URL of your application in the output of the previously executed cf apps command.

    Open the URL in the browser to see your app in action:

    inaction

    Congrats, you just deployed your first SAPUI5 app from the command line!

Back to Top
Back to top