How to create and deploy UI5 App based upon CAPM using BAS

by | Oct 9, 2021 | SAP CAP, SAP Deployment

Home » SAP » SAP CAP » How to create and deploy UI5 App based upon CAPM using BAS

Preface – This post is part of the SAP CAPM series.

Introduction

SAP CAPM is the new and most efficient way to develop SAP Cloud Applications. SAP Business Application Studio is the appropriate IDE that should be used for CAP Application creation. In this article we will explore SAP BAS, CAP Development and CAP Deployment over SAP BTP. Let us explore how to create and deploy UI5 App based upon CAPM using BAS.

Steps to get started with BAS

Step 01: The very first step is to visit Business Application Studio using SAP BTP.

Step 02: Create a Dev Space by clicking the button as shown below:

Create a Dev Space

Step 03:  Give a suitable name for your space and choose Full Stack Cloud Application

Full Stack Cloud Application

A CAPM space will be created as shown below. Click it.

CAPM space

It will open the Business Application Studio Editor (BAS).

Business Application Studio Editor

Steps to create a CAPM Project

  1. Click “Start from template” in welcome screen
    Start from template CAP
  2. Select CAP Project and click Start
    CAP Project Start
  3. Provide a name of the project and choose the one shown below:
    CAP Project Configuration
  4. Click Finish. This will generate a project and will open up the same.
  5. In case you get a popover to install recommended extension, click install.

 

Steps to add Approuter in your CAPM

The very next thing after CAPM App creation is to add an approuter. You can read more about it here. Follow below steps to create an App Router. You can create both standalone app router as well as SAP Managed App Router (needs additional subscription).

How to add Standalone Approuter using BAS?

To add a standalone approuter using BAS, follow the given steps:

Step 01: Create a MTA or CAPM Application such that your project has a MTA.yaml file (We did this above).

Step 02: Right click on the MTA file and click “Create MTA Module from Template”

Open MTA Module from Template

Step 03: Click “Approuter configuration” from the wizard

Approuter configuration

Step 04: Enter the details as shown below:

App Router Details

That’s it, an approuter will be added in your project with configuration in MTA file.

How to add Managed Approuter using BAS?

The creation of SAP Managed approuter is almost similar to Standalone approuter until step 03.
In step 04, you need to choose “Managed Approuter” from the drop down, followed by a unique name for the approuter. That’s it, an approuter will be added in your project with configuration in MTA file. Read more about it here.

Once deployed, you can visit HTML5 Applications under your subaccount. In case you see the given screen:

Managed Approuter

In this case you need to subscribe any of the above, then you will be able to see your Applications as shown below:

HTML5 Applications

How to add a UI5 project in CAPM

Once you have a CAPM project with basic module, you will have a folder called app. This folder is meant for UI5 applications. In this use case it is empty. Now we will add MTA modules to create UI5 App.

Step 01: Create a MTA or CAPM Application such that your project has a MTA.yaml file (We did this above).

Step 02: Right click on the MTA file and click “Create MTA Module from Template”

Open MTA Module from Template

Step 03: Click “SAP Fiori application” from the wizard

SAP Fiori application

Step 04: Now, click the filter to choose “SAPUI5 freestyle” (In case you want a Fiori Elements based app, you can keep the first one)

SAPUI5 freestyle

Then choose “SAPUI5 Application”:

SAPUI5 Application

Step05: Now in next section, either choose your data source if you have or select “None” as below:

data source for UI5

Step 06: Now enter the name of the initial view (It can be changed later too):

View of UI5

Step 07: This is an important step, choose the folder “app” via project folder path and mark Yes against “Add deployment configuration to MTA project”. This will add all required deployment related configurations in MTA file.
Deployment configuration of UI5

Root folder of UI5

That’s it. Once clicked on Finish will add a UI5 application within app folder.

Steps to test and deploy whole CAPM project on SAP Cloud foundry (or SAP BTP)

  1. Open Terminal from the menu bar
  2. To test the App locally, write cds watch. You will see a pop up, press “Expose and Open”. You will see a new tab:
    local test of App in CAP
  3. Click on Web Applications link. It will open a blank UI5 App as shown below:
    local run ui5 app in BAS
    This confirms that the UI5 app is working fine.
    If you click the services endpoints link, then you will see an OData as shown below:
    Service in CAP
    This confirms even our services are working fine. This is a green signal for deployment.
  4. Now open a new terminal and write mbt build. This will generate a new folder “mta_archives” with a mtar file
    The above step will also generate new folders
    MTAR generation CAP
  5. Before we deploy to SAP Cloud foundry, we have to login in our environment. In terminal write cf login
    Enter API endpoint: https://api.cf.eu10.hana.ondemand.com/ (or whatever it is for you)
    followed by your login email and password
    You will be logged into your respective environment. In case you have multiple subaccount, then you might be asked to choose one of them (using a number)
  6. Now right click on the mtar file generated and click “Deploy MTA Archive”
    SAP CAP Deployment in BAS

This will deploy the app in cloud foundry or SAP BTP. In the terminal you will get successful message that all the services were deployed.

  1. To test the deployed UI5 App, go to SAP BTP and reach your respective subaccount -> space. Here list of applications will appear, search for your approuter.
    Run UI5 using App Router
    Open it. You will find a link. You can even find it within the terminal after deployment, e.g.:
  2. Opening only App Router will give error “Not Found”. So, append your approuter as mentioned below:
    Extend the URL with the application ID “/<app ID>”:
    https://ps-scp-<space name>-mta-<app name>-approuter.cfapps.<region>.hana.ondemand.com/<app ID>Note! If the “<app ID>” contains dots e.g. “<app ID>” is “test2.test.1.test0”, dots should be ingnored and the URL should look as:https://ps-scp-<space name>-mta-<app name>-approuter.cfapps.<region>.hana.ondemand.com/test2test1test0

In our use case the url will be: <app router>/nscap-test/index.html

  1. After login, you will see the below link:
    UI5 deployed App test

Congratulations, you have successfully created your CAPM UI5 App and deployed the same. You can also check other ways to create a UI5 CAPM App.

Author

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Author