Skip to Content
Technical Articles
Author's profile photo Gopal Anand

Deploying any UI5 application on Cloud Foundry

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

 

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Simon Roloff
      Simon Roloff

      Hi Gopal,

      this super simple streight forward example helped me to understand how cf works. Thanks a lot!

      Simon

      Author's profile photo Gopal Anand
      Gopal Anand
      Blog Post Author
      Thanks a lot for the feedback 🙂 It's really amazing to see this blog helping people.
      Best Regards
      Gopal
      Author's profile photo George Abraham
      George Abraham

      Thanks a lot Gopal for this simple steps - helped me a lot.

       

      I have one question - maybe something that I am missing - once deployed, when I access the link, it is right away opening the page for me and not asking me for even the SCP login - which I need - to have some authorizations enabled. What am I missing here?

      Author's profile photo Gopal Anand
      Gopal Anand
      Blog Post Author

      Hi George

      For authorization, you need to bind the UI to XSUAA(User Account and authorization service) instance. The XSUAA helps in validating the user login and work with the roles.

      Once you bind the application with XSUAA instance you will be asked to log in.

      you can follow these links to know more:

      https://developers.sap.com/tutorials/hxe-aa-movielens-14.html 

      https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/51ec15a8979e497fbcaadf80da9b63ba.html

      I hope this will answer your question.

      Best regards,

      Gopal

       

      Author's profile photo George Abraham
      George Abraham

      Thanks a lot Gopal This actually helps a lot - esp the tutorial.

      Author's profile photo Saranya Sampath
      Saranya Sampath

      Hi ,

       

      While running application after deployment , getting 403 forbidden nginx. How to resolve this. Please help

       

      Thanks

      Saranya

      Author's profile photo Gopal Anand
      Gopal Anand
      Blog Post Author

      Hi Satanya,

      Please try adding /webapp/  at the end of the deployed app's url.

      ps. Make sure you are point to the index file. As the manifest sits outside the webapp.

      All the best!

      Gopal

       

      Author's profile photo Mamatha Majji
      Mamatha Majji

      Hi Saranya,

      I am also facing the same issue. Is it Resolved?

      When I try to run the application after deployment, getting 404  Not found issue.

      Regards,

      Mamatha

      Author's profile photo Mahammad Ali
      Mahammad Ali

      Thank you for the simple and straight forward example .....after deployment struggled to access the app but after reading the whole blog got to know what to add 🙂

      Author's profile photo Mamatha Majji
      Mamatha Majji

      Hi Mahammad Ali,

      Can you share how your application get loaded after Deployment. I followed same in blog but still unable to access the Application after deployed to CF.

       

      Regards,

      Mamatha

      Author's profile photo Gopal Anand
      Gopal Anand
      Blog Post Author

      Hi Mamatha,

      Try opening the url of the deployed HTML5 application followed by the path of your index.html.

      That is : webapp/index.html in case of ui5.

      Also can you check the url of SAP library in your index.html

      Author's profile photo Mahammad Ali
      Mahammad Ali

      Hi Mamatha,

      My pipeline resembles like this 

      Regards,

      Md Ali.

      Author's profile photo Mamatha Majji
      Mamatha Majji

      Hi Gopal,

      I developed app in SAP Business Application Studio after deploying to Cloud Foundry unable to load the controller part  I saw in inspect in dev tools and not able to access the Service Data only able to access the view part. App is not asking for Authentication while running the app after deployment.

      Can you pls guide me how to Access the Entire app with Authentication.

      Regards,

      Mamatha

      Author's profile photo Gopal Anand
      Gopal Anand
      Blog Post Author

      Hi,

      In this case you'll need to use application router which will help in authentication and authorisation.

      https://github.com/SAP-samples/cloud-nodejs-oflm/tree/main/approuter

      Refer this