Google Cloud

How to run SAP Fiori Front-End Server (OpenUI5) on GCP in 20 mins

June 20, 2018

Tony Lusk

Customer Engineer

Who enjoys doing risky development on their SAP system? No one. But if you need to build enterprise apps that use your SAP backend, not doing development is a non-starter. One solution is to apply Gartner’s Bimodal IT, the practice of managing two separate but coherent styles of work: one focused on predictability; the other on exploration. This is an awesome strategy for creating frontend innovation with modern HTML5 / JS applications that are loosely coupled to backend core ERP system, reducing risk. And it turns out that Google Cloud Platform (GCP) can be a great way to do Bimodal IT in a highly cost-effective way.

This blog walks through setting up SAP OpenUI5 on a GCP instance running a local node.js webserver to run sample apps. These apps can be the building blocks to develop new enterprise apps in the cloud without impacting your SAP backend. Let’s take a deeper look.

Set up your GCP account:

Make sure that you have set up your GCP free trial ($300 credit):
https://cloud.google.com/free/

After signing up, you can access GCP at
https://console.cloud.google.com

Everything in GCP happens in a project so we need to create one and enable billing (this uses your $300 free credit).

From the GCP Console, select or create a project by clicking the GO TO THE MANAGE RESOURCES PAGE

Make sure that billing is enabled (using your $300 free credit):

Setting up SAP OpenUI5 in GCP

1. Create a compute instance (virtual machine):

In the top left corner click on ‘Products and Services’:

https://storage.googleapis.com/gweb-cloudblog-publish/images/gcp_products_services_icona6zb.max-100x100.PNG

Select ‘Compute Engine → VM instances’

Click ‘Create instance’
Give it the coolest name you can think of
Select the zone closest to where you are located
Under ‘Machine Type’, choose “micro (1 shared CPU)”. Watch the cost per month drop like a stone!
Under ‘Firewall’, check ‘Allow HTTP traffic’

Keep everything else as default and click Create.Your Debian VM should start in about 5-10 seconds.

2. Set up OpenUI5 on the new image:

SAP has an open-source version of its SAPUI5 that is the basis for its Fiori Front-End Server called OpenUI5.OpenUI5 comes with a number of sample apps. Let’s deploy this to a local node.js webserver on the instance.

Install nodejs and npm (node package manager):

SAP files are zipped so install unzip with:

Make a project directory and change to it (feel free to change the name):

Download the latest Stable OpenUI5 SDK from:
https://openui5.org/download.html
eg.,

Time to grab a coffee as the download may take about 5 to 10 minutes depending on your connection speed.

Extract the zip file to your project directory with:

Next we will set up a local static node.js http server to serve up requests running on port 8888. Download static_server.js and package.json from Github into your project folder:

(https://github.com/htammen/static_server)

Identify your primary working directory and create a symbolic link to your resources folder. This allows the demo apps to work out of the box without modification (adjust the path to match your own):

Call the node package manager to install the http server:

Run the node.js static server to accept http requests:

Your node server should now be running and be able to serve up SAPOpenUI5 sample applications from localhost. However, we should make this testable from outside the VM (e.g., mobile) so let’s set up a firewall rule to allow traffic to our new static server on port 8888.

In the GCP Console click on ‘Products and Services’ (top left)

Networking → VPC Networking → Firewall Rules.

Click New to create a new firewall rule and enter the following settings:

Name:	allow-nodeserver
Network:	default
Priority	1000
Direction	Ingress
Action on Match	Allow
Targets	All instances on network
Source filter	IP ranges
Source IP ranges	0.0.0.0/0
Specified Protocols and ports	tcp:8888

Now, click ‘Create’.

Go to Products and Services → Compute Engine → VM instances and copy the External IP. Open up a browser and navigate to:

Congratulations! You are now running the OpenUI5 front-end on your GCP instance.

3. Explore the OpenUI5 demo apps

You can take a look at the sample applications offered un OpenUI5 by clicking on ‘Demo Apps’ or you can navigate directly to the shopping cart application with:

(Pro-Tip: email this link to yourself and open on your mobile device to see the adaptable UI in action. Really cool.)

These demo apps are just connecting to local sample data in XML files. In the real world oData is often used. oData is a great way of connecting your front-end systems to backend SAP systems. This can be activated on your SAP Gateway. Please consult your SAP documentation setting this up.

SAPUI5 has even more capabilities than OpenUI5 (e.g. charts and micro graphs). This is available either in your SAP Deployment or on the SAP Cloud Platform. In addition, you can also leverage this on top of GCP via Cloud Foundry. Learn more here.

Good luck in your coding adventures!