HTML5 application to the Cloud Foundry Environment within SAP Cloud Platform

               In this article I will briefly explain How to Deploy an HTML 5 application to the

Cloud Foundry  environment within SAP Cloud Platform

Course Reference : openSAP Course – SAP Cloud Platform Essentials Q3/2017.

( In this Course you may see the the video tutorials to tell how to use CLI and etc to build the applications. But this blog will not include those steps followed in the video tutorial. Here i will tell how to deploy it from SAP Full Stack Web IDE. )

Steps:

1. Create a simple front end Hello World MTA project in SAP Web IDE Multi-Cloud Version

2. Build and Packge the project with SAP Full Stack Web IDE

3. Deploy the project with the SAP Web IDE Full Stack version to the Cloud Foundry Environment within SAP Cloud Platform

Prerequisites:

1. SAP Cloud Platform trial account.

2. openSAP Course – SAP Cloud Platform Essentials Q3/2017 – Course Reference

3. Knowledge on How to use Cloud Foundry

Step I :

Open your trail account cockpit.

2. Go to services and search for Full Stack Web IDE enable it (If you are already enabled . Open it)

3. Please select Project from Template, and choose Multi-Target Application from the tiles.

4. Give the Project Name give next give application id and description and finish the process.

Now in the work-space you can see the application name and filname.yaml.

It is  for your application not for module . If you open the yaml extension file, you can see the available module inside the yaml file structure. (As of now it is empty)

Right click on the project —> New —> HTML 5 Module.

From the tile choose SAPUI5 Application .

Give the module name and namespace and finish it.

Now the Project Structure looks like below.

So this Front End module as same as SAPUI5 Application file structure. By default it will print the

Title Page. If you want you can do the customization in the view file. In this blog i will not do any

modification in the view file. So finally it will print the Empty page having Title at the top.

Step II:

Now can see how we need to install the BUILDER inside our Web IDE for building the app.

In openSAP course the used CLI (Command Line Interface) to build the project in SAP Cloud Foundry.

But Now we are having the latest Web IDE, So we can do it by following the below steps.

Please refer the course material if you interested to to by isng CLI .

Before that you should know the basics knowledge how to use SAP Cloud Platform and Sapce,Organizations etc.

Right click on the project and go to project settings and choose space.

You need to choose CF API Endpoint , Organization and Space.

To know your CF API Endpoint go to your cockpit —-> Home.

Choose your Cloud Foundry Trial and select your domain

You can add Organizations and Space also. Please refer the openSAP course for more information.

Once you selected the CF API Endpoint,Organization and space, click install Builder button.

It will take some time to install and you can see the log at the bottom.

After successfully installation, you can see one more folder created in your work space called mta_archives.

Inside that you can see MultiTargetApplication_0.0.1.mtar. (Filename with matr extension).

MTAR = MultiTargetapplicationARchive. Is like (jar,war file).

Then right click on the MultiTargetApplication_0.0.1.mtar file choose deploy and Deploy to Cloud Foundry.

It will take some time to deploy it on CF. You can see the Log.

STEP III:

Go to your Cloud Foundry Environment and go to your sub domain and choose space.

Now the space is created in the name of dev by default. You can see the available space and etc. You can add new space too.

Click on the space and you see the deployed applications on the specific space.

Click the Module Front End it will go to the next page where you can see more information related to this particular module.

Click on the link under the Application Routes, you can see the application.

Thank you,

Regards,

Jayakrishnan Chandramohan.