Skip to Content
Author's profile photo Anuj Mehta

Deploying a SAPUI5 Application on Cloud Foundry environment within SAP Cloud Platform

As we know SAP announced the general availability of Cloud Foundry environment within the SAP Cloud Platform. This means that there is support for several run times and programming languages. What to do if you have a use case where you want to deploy SAPUI5 application on Cloud Foundry environment ?

This is possible using Node.js runtime. In this tutorial, you will see how SAPUI5 application can be deployed on Cloud foundry environment within SAP Cloud platform using Node.js as runtime container.

You have to perform following steps:

Step 1. Clone the source code from GitHub repository

Step 2. Install packages using package.json file

Step 3. Deploy application on Cloud Foundry environment

 

Pre-requisites:

You have signed up for a trial space on a Cloud Foundry instance and downloaded and installed Cloud Foundry CLI and logged on to the Cloud foundry instance as explained here

You have Node.js and npm installed.

 

Step 1. Clone the source code from GitHub repository

Clone this Git repository and import the project into the Eclipse workspace.

After successful import the project structure should look like this

 

 

Note: The pre-requisite for this step is that EGit Plugin must be installed in Eclipse.

 

package.json file

This file holds information related to the metadata of project and also handles project’s dependencies.

 

 

app.js file

The very first script command in package.json file is to run node app.js.

This app.js file contains information about the how to use express framework to set up middleware to respond to HTTP Requests and dynamically render HTML Pages

 

manifest.yaml file

manifest.yml is added to deploy SAPUI5 application on cloud foundry at SAP Cloud Platform. This file specifies application related information such as name, build pack, command, services etc.

Step2. Install packages using package.json file

Open the Command prompt and navigate to the personslist folder where package.json file is    defined.

Run the npm install command to install the required packages.

 

Step 3. Deploy application on Cloud Foundry

Go to SAPUI5 application’s local path, then use command cf push to deploy application on Cloud Foundry at SAP Cloud Platform.

It may fail with status code 400 and error code 210003 as host is already used by someone.

 

 

In that case, open the manifest.yaml file of DeploySAPUI5on SAPCF Project

 

 

Update the name of application by appending your ID number. Save the manifest.yaml file

 

Again deploy project to CF by executing

cf push  

If everything goes right, you can see following result on the console

if you execute the following url:

https://personslist<ID number>.cfapps.<host>/ui5

you will see the SAPUI5 application output as shown below

 

 

 

 

 

 

 

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Anuj,

      I successfully deployed my application on cloud foundry.

      I have some external destinations in my application which are mentioned in neo-app.json.

      Where should i mention the urls? As in HCP we do it in destinations. Where shall i do the same thing here?

      Regards,

      Ashish

      .

       

      Author's profile photo CHINMAYEE S
      CHINMAYEE S

      Hi Ashish,

       

      Did you find the solution for this? if yes, can you please share? Thanks

      Author's profile photo Shobhit Pathak
      Shobhit Pathak

      Hi Ashish,

       

      You have to define it in the manifest.yaml file.

      All the destination URL's will be picked up from the manifest file and would be recorder in the environment variables section. You can see this in your applications env variables in cloud platform cockpit.

       

      Thanks

      Author's profile photo Manjunath GUDISI
      Manjunath GUDISI

      Hi Anuj,

       

      Why do we need to add /ui5 at the end of the URL. Any specific reason?

       

      Thanks MG

      Author's profile photo Anuj Mehta
      Anuj Mehta
      Blog Post Author

      Hi Manjunath,

      Actually it is up to us I have used ui5 because I defined "/ui5" path for the express framework to read SAPUI5 content. You can check app.js file for this.

       

      Best Regards,

      Anuj Mehta