We are moving towards cloud-native development. And there was a boom for Cloud foundry in 2018 and now we all are trying to build and deploy our applications on cloud foundry.

“do a cf push and let the environment handle it”

In this blog, I will be showing how can we deploy any UI5 application on cloud foundry without generating any MTAR or without using webide.

This blog is part of 5 blog series where we will create a cloud-native application which will be later published as Software as a service(SAAS).

Lets now jump directly to Publishing any UI5 application of cloud foundry.

Before we start we need to know the following terms:

UI5 or SAPUI5 or OpenUI5

OpenUI5 is a JavaScript application framework designed to build cross-platform, responsive, enterprise-ready applications. It is an open-source project maintained by SAP SE available under the Apache 2.0 license and open to contributions. OpenUI5’s core is based on JavaScript, jQuery, and LESS.

Read in details

Cloud Foundry:

Cloud Foundry is an open-source, multi-cloud application platform as a service governed by the Cloud Foundry Foundation, a 501 organization. The software was originally developed by VMware and then transferred to Pivotal Software, a joint venture by EMC, VMware and General Electric.

Read In details

SAP Cloud Platform (SCP):

SAP Cloud Platform is a platform as a service developed by SAP SE for creating new applications or extending existing applications in a secure cloud computing environment managed by SAP. The SAP Cloud Platform integrates data and business processes.

Read in Details

Once you know these terms, you can start building applications and deploy then on cloud foundry.

Let’s start:

Step1:

We need to have an SAP Business Technology Platform account and then access to cloud foundry environment there. SAP BTP comes with 90 days Cloud Foundry(cf) trial.

To create and start using the CF environment you can follow this tutorial.

Step 2:

Access SAP- Web-IDE.

• To access SAP Web-IDE you need to open your SCP neo account.
• Goto services and select Web-IDE full Stack.
• Click on goto service.
• Web-IDE will open in a new tab. Bookmark it for further reference.

Step 3:

Building UI5 Application.

The application used in this blog can be found here: https://github.com/gopalanand333/ui5onCloudFoundry

• Open Web-IDE
• Right Click on Reference Projects -> New -> Project from Template
• Select SAPUI5 Application from the list

• Give Name of project and click on finish.
• open the created view and insert the following code.

• 	<App id="idAppControl">
  		<pages>
  			<Page title="{i18n>title}">
  				<content>
  				    <Button text="Heyyyyyyyy Im on Cloud Foundry" class="sapUiLargeMargin" type="Accept"></Button>
  				</content>
  			</Page>
  		</pages>
  	</App>
  
  
  

Step 4

• Create a manifest.yaml file with the following
• It should be on project That is outside webapp

• ---
  applications:
  - name: ui5OnCloudFoundry
    memory: 64M
    buildpack: staticfile_buildpack

Here name is the Name of application.

Buildpack tells which build pack should be used to build the application, Cloud Foundry provides following buildpack: (use cf buildpacks command to get this list from cf CLI)

we need to use staticfile_buildpack for the ui5 application.

• Now export this project on your local system. Before exporting make sure that your project is having manifest.yaml file at the correct location.
• to create manifest.yaml you can right click on project -> create a new file -> give name “manifest.yaml”.
• The hierarchy looks like this:
  
• Extract the project on your local machine.
• go inside the project where manifest.yaml is.
• open CMD and go to the project’s directory.
• login with there with cf login
• choose your workspace where you want to deploy the application.
• Now do a cf push.
• the CF CLI will pick manifest.yaml to start the deployment process.

How the deployment works?

Cloud Foundry uses Diego to manage application containers.

The lifecycle of cf push:

you can specify app name while cf push and the buildpack manually too.

For details read this:  https://docs.cloudfoundry.org/concepts/how-applications-are-staged.html

• once the application is deployed. You can see the following information.
• you can copy the routes to access the deployed application.
• the route is created using application name + domain for app deployment.
• make sure to add webapp at end of your application route. since the app is deployed from manifest level and your application’s index is inside webapp.
• once you append /webapp/ you may get an error saying sap not defined. its because in the index we have the relative path for Ui5 libraries.
• goto your index and give the path like this:
• Before : 

  		<script id="sap-ui-bootstrap"
  			src="../../resources/sap-ui-core.js"
  			data-sap-ui-async="true"​

• after: 

• 		<script id="sap-ui-bootstrap"
  			src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
  			data-sap-ui-async="true"
  			data-sap-ui-libs="sap.m"

• Now you can see the application working