1.Develop and Deploy Simple static SAPUI5 Application in Cloud Foundry

[former_member185530]

Hi Colleagues,

This series of the blogs is to help teams who are going to develop SAPUI5 application in cloud foundry since SAP applications are migrating to the cloud and to be specific cloud foundry rapidly, you can find the below list of blogs with the combinations of development by which you will migrate your current application to cloud foundry or for developing a new application.

The below are the combinations of the development and the links to the blog(All the links will be enabled once it is published).

1. Develop and Deploy Simple static SAPUI5 Application in Cloud Foundry


2. SAPUI5 application with ABAP OData Service as backend


3. SAPUI5 application with non-ABAP service as a backend


4. SAPUI5 application in Fiori Launchpad

Let us start with first use case where we will develop a sapui5 application with static JSON model or just a static UI application

Step 1: -

Go to your SAP web-IDE of your choice like the example given below

• https://webidecp-fiori.dispatcher.int.sap.hana.ondemand.com – Full Stack Web-IDE


• - For Trial account
  
  
  
  • You can get this trail account web-IDE by opening this URL and create a NEO account and enable service called WEB-IDE under Services section in the left side
  
  
  
  

Step 2: -

Click on the file -> New -> Project from template



Select the SAPUI5 application from the list



Click on Next and fill the mandatory fields and create the Project.

Step3:-

Go to the Index.html change the bootstrap URL to CDM URL since we are not going launch this app in Fiori Launchpad or web-IDE sandbox server to get SAP resources





Step 4: -

Create a mainfest.yml file for cloud foundry deployment configuration file under your project folder (same folder where your webapp exists).



Property Details: -

name: Unique to the landscape

path: Path to your application files

Build pack: Buildpacks provide framework and runtime support for apps. Buildpacks typically examine your apps to determine what dependencies to download and how to configure the apps to communicate with bound services.

You can find all the buildpacks URL here.

All the properties of manifest.yml and its details are available here.

Step 5: -

Export and extract the project in your local machine for Pushing the app to cloud foundry.

You can also deploy the applications to cloud foundry from SAPUI5. You can find the details in this blog.

Open the Command Prompt in the local where you extracted the project

Login to your CF account



Push your application to the cloud foundry



Once the application is deployed you will get the below details



Open the URL which is available in the above image by adding /webapp/index.html at the end -> SInce the path is to the project folder in manifest we need to route to the index.html.

Once you entered the URL you can see the SAPUI5 application which you created



 

Conclusion:

The above blog explains how you can develop a sapui5 application in cloud foundry with static JSON or static UI with no model.

You can find the code here.