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 CAPM using BAS Extensions.

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:

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

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

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

Extensions in BAS

In this article we will learn how to use Extensions in BAS for application creation.

1. Click on View -> Find command
   
2. Search “Generators” and click on “Explore and Install Generators”
   
3. From the search shortcut, filter SAP UI5 and install “generator-sap-ui5-app”, “generator-easy-ui5” and “generator-ui5_to_mta” and other UI5/Fiori extensions.
   

The above will be helpful in creating UI5 projects and auto generate codes for us.

Steps to create a CAPM Project

1. Click “Start from template” in welcome screen
   
2. Select CAP Project and click Start
   
3. Provide a name of the project and choose the one shown below:
   
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.

How to add a UI5 project in CAPM using Extension

The newly created CAP project will have empty app folder as shown below:

1. Open View-> Find command (or ctrl+shift+P)
2. Find “Run Generator”
   
3. Now find “fiori-module:app”. This will only appear if you install all the extensions that we have mentioned above.
   
4. This will open a wizard. Choose the App folder and click Next
   
5. Enter Module name, it will be the name of your UI5 App, and click Next
   
6. Choose SAPUI5 Application and click Next
   
7. Choose the App Router
   
8. Choose Authentication option.
   
9. Choose View name
   
10. Now, you will see both UI5 and App router is generated
    

Even in MTA you can see these added:
cap-test-approuter
cap-test_html_repo_runtime
cap-test_ui_deployer
ui5-test

With all other important files that are mandatory for UI5 module deployment over BTP. Now we are ready to test it locally and deploy it over BTP.

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:
   
3. Click on Web Applications link. It will open a blank UI5 App as shown below:
   
   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:
   
   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

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”

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.

7. 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.Open it. You will find a link. You can even find it within the terminal after deployment, e.g.:
   
8. 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

9. After login, you will see the below link:
   

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.