Deploying any UI5 application on Cloud Foundry

[gopalanand]

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

 

[simon_roloff2]

Hi Gopal,

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

Simon

[gopalanand]

Hi simon.roloff2

Thanks a lot for the feedback 🙂 It's really amazing to see this blog helping people.

Best Regards

Gopal

[GeorgeAbraham]

Thanks a lot gopal.anand 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?

[gopalanand]

Hi leyah1912

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/51ec15a8979e497fbcaadf80da9...

I hope this will answer your question.

Best regards,

Gopal

 

[GeorgeAbraham]

Thanks a lot gopal.anand This actually helps a lot - esp the tutorial.

[SaranyaSampath]

Hi ,

 

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

 

Thanks

Saranya

[gopalanand]

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

 

[former_member719948]

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 🙂

[former_member731506]

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

[former_member731506]

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

[former_member731506]

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

[gopalanand]

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

[gopalanand]

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

 

 

 

[former_member719948]

Hi Mamatha,

My pipeline resembles like this 

Regards,

Md Ali.