Creating a Simple Webapp in SAP Build Code and Deploying it to the SAP BTP, Cloud Foundry Environment

Objective

After completing this lesson, you will be able to create a new project in SAP Build Code, build a simple webpage, deploy the webpage to the SAP BTP, Cloud Foundry environment, and test its functionality.

Development of a Basic Web Application with SAP Build Code

This lesson guides you through creating a simple web application using SAP Build Code. You will learn how to set up a new project, create a basic HTML page, configure the manifest.yaml file, and deploy the application to the Cloud Foundry runtime on SAP Business Technology Platform (BTP). Finally, you will test the deployed webpage to confirm it works properly.

Create a New Project in SAP Build Code

After creating a Dev Space in the SAP Business Application Studio, you can use this development environment to create a custom application.

The first step is to create an empty project. For this, you can choose New Project From Template and choose the Basic Multitarget Application template.

Note

In this course, we focus on the basics and aim to create a simple example. However, if you are developing more complex projects, it might be better to choose a different template that better fits your needs, such as the SAP Cloud Application Programming template.

Create a Minimal Index.html

To build a web page for your project, create a new file, fill it with HTML code, and save it with the extension HTML or HTM. You can use any HTML code you want for this example. In this course, we are using the following code to create a simple web page that includes some text and a graphic.

HTML

12345678910111213141516

<!DOCTYPE html>
<html>
<style>
    body {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
</style>

<body>
    <h2>We did it!</h2>
</body>

</html>

Configure Manifest.yaml

Create a new file for the project with the name, manifest.yaml. This file outlines the process for building and deploying the project to the Cloud Foundry environment. In this case, the manifest.yaml file defines three important things:

Name specifies the application's name. Note that the application name must be unique across the entire SAP Business Technology Platform domain. In this demo, the course code, C4H07I, serves as part of the application name.
Memory allocates the space used for running the application.
Buildpack determines how the application is built, packaged, and deployed. This example uses the static file buildpack.

Code Snippet

12345

applications:
- name: my-web-page-C4H07I
  memory: 128M
  buildpack: https://github.com/cloudfoundry/staticfile-buildpack

Deploy a Simple Webapp to BTP Cloud Foundry

Since Cloud Foundry is primarily managed through the command line, the next step is to open a new terminal in SAP Business Application Studio and navigate to the project folder using the cd command, for example, cd btp-website.

Before deploying your website, you must log in to the Cloud Foundry environment by using the command, cf login. The terminal prompts you to enter the application endpoint URL, which you can find on the Subaccount overview under Cloud Foundry Environment.

Overview page of SAP BTP cockpit displaying subaccount details for Sales Service Cloud V2 Extensibility. The Cloud Foundry Environment section displays: API Endpoint (https://api.cf.eu10-005.hana.ondemand.com), Org Name, Org ID, and Org Memory Limit.

After entering the endpoint URL, you will be prompted to enter your credentials for the SAP Business Technology Platform.

Instead of entering the required information repeatedly, you can also create a single command that includes all the details needed for logging into Cloud Foundry. For example, you can use the following command:

Code Snippet

1
cf login --origin learningcx-platform -a https://api.cf.eu10-005.hana.ondemand.com -o "SAP - CX Extensibility_extension-c4h07i" -s dev

It consists of the following parts:

cf login
The basic command for logging in to Cloud Foundry
--origin learningcx-platform
If you are not using an SAP Identity Provider, you need to specify the origin key. You can find it in your SAP Business Technology Platform subaccount under Security -> Trust Connection. Choose the identity provider you use for the application and take the value from the Origin Key column. In our example, the origin key is learningcx-platform.
-a https://api.cf.eu10-005.hana.ondemand.com
The API endpoint of the Cloud Foundry environment of the SAP Business Technology Platform subaccount. You can find it under the subaccount overview in the Cloud Foundry Environment section.
-o "SAP - CX Extensibility_extension-c4h07i"
The org name of the Cloud Foundry environment. You can find it in the subaccount overview directly under API Endpoint. Make sure to use quotation marks if Org Name contains blank spaces.
-s dev
The name of the space in the Cloud Foundry environment. You can find it in the subaccount overview in the Spaces table.

You can also include your credentials in the command. However, since the password would be visible as plain text, it is advised to enter it separately.

Note

You can find the documentation about the cf login command by typing cf login -help.

After you successfully log in to the Cloud Foundry environment, you can execute the command cf push, which will deploy your application to the cloud. This usually takes a few seconds.

Test the Webpage

When the deployment via cf push is complete, the terminal displays a link for the application (under routes). Copy this link and paste it into a browser; then you will see the web page that you have just deployed to the SAP Business Technology Platform.

In the following video, you will see a step-by-step walkthrough of creating a simple web application using SAP Build Code.

Summary

Create a new project in SAP Build Code
Build a simple webpage
Configure the manifest.yaml for the webapp
Deploy the webpage to a Cloud Foundry environment
Test its functionality

Next lesson