How to consume nodeJS server from a Neo Environment

INTRODUCTION

As we all know, SAP Cloud Platform Neo environment contains the runtime that allows you to develop Java, SAP HANA XS, SAPUI5 and HTML5 applications.

On the other hands, SAP cloud Foundry allows you more freedom and to bring your own language where you can host Java, NodeJs, Python, SAPUI5, HTML5 and many other languages

But what if you developed a fully functional SAPUI5 application and for business reasons, you would like to keep it hosted in the NEO environment but want to consume a nodeJS server?

In this tutorial, I’m going to demonstrate the followings :

Using VS Code, I will first create a nodeJS server and I will host in a cloud foundry Subaccount, then using the SAP WEB IDE I will create a SAPUI5 application and deploy to a Subaccount in a NEO environment, finally, I will consume the nodeJS server among an SAP Business By Design custom OData server using the destinations

LET’S GET TO BUSINESS

Setting up the nodeJS server :

let’s first create a manifest file

manifest.json

---
applications:
- name: srvProd
  path: .
  buildpack: nodejs_buildpack
  memory: 100M
  disk_quota: 100M

Now create a package.json and fill it as the following :

{
  "name": "mprs-nodejs",
  "version": "1.0.0",
  "description": "NodeJS server for MPRS",
  "main": "server.js",
  "scripts": {
    "start": "nodemon server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Basselbi/nodeSRV.git"
  },
  "author": "Bassel EL-BIZRI",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "nodemon": "^2.0.3"
  }
}

Create a server.js file and fill the following code :

'use strict';
var express = require("express");
var app = express();

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res) {
    res.status(200).json({
        "ok": "Get Ok"
    });

});


const PORT = process.env.PORT || 8088;

var server = app.listen(PORT, function () {

    const host = server.address().address;
    const port = server.address().port;

    console.log('Example app listening at http://' + host + ':' + port);

});

The project structure should be similar to this :

Before we continue further, don’t forget to run the following command using the vs code terminal to install all nodes dependencies:

npm install

Now let’s connect to our cloud foundry environment in order to host the nodeJS server

In the same terminal type :

cf login -a https://api.cf.us10.hana.ondemand.com

and fill the API endpoints and organization, you can find more about the cf commands in the following link: cloudfoundry Docs

To deploy the nodeJS servery simply type :

cf push srvNodeJS

and wait until the deployment is finished

After this, navigate to your space in the cloud foundry and you can notice that the nodeJS server is up and running

The nodeJS code is available : https://github.com/Basselbi/nodeSRV.git

It’s now the time to consume this from our SAPUI5 application inside the neo environment

Open your web IDE and hit the Ctrl+ALt+shift+O combination, it will open up the Project from the template menu and create a new SAPUI5 application

Now navigate to your SAP Neo subaccount and configure the destination as following :

if you click on check connection you should see the following message :

Connection to “nodeSRV” established. Response returned: “200: OK”

Now our destination can be consumed from our SAPUI5 application, to do so, add the following routes inside the

neo-app.json

{
		"path": "/destinations/nodeSRV",
		"target": {
			"type": "destination",
			"name": "nodeSRV"
		},
		"description": "nodeSRV Destinations"
	},

now inside the Component.js you can succesfully call your server via an ajax call

$.get("/destinations/nodeSRV/", function (data) {
	alert(JSON.stringify(data));
});

The ui5 Code is available here :

https://github.com/Basselbi/UI5DemoDestinationCons.git

That’s it! That was a simple way to consume a nodeJS server using destinations connectivity from the NEO environment, of course, I did not explain security-related functionality because it will be explained in a further blog

SAP BUSINESS BY DESIGN

Now, I will demonstrate how to consume an SAP ByD custom OData service from our SAPUI5 application, to learn more on how to create an OData service I recommend reading the following blog written by Knut Heusermann SAP Business ByDesign – OData API Examples

I’ve created an odata service and names it : odata_project

Once you create an OData Serice, you can consume it via
https://myxxxx.sapbydesign.com/sap/byd/odata/cust/v1/odata_project/

As you can see my service :

To consume this OData service from our SAPUI5 application, first, we need to create a destination via the NEO environment subaccount than we will configure routing from the app

Navigate to your Neo subaccount and create a new destination and write a description and fill the URL with your ByD URL like this: https://myxxxx.sapbydesign.com/sap/byd/odata

In order to consume it from the SAPUI5 app, first, we need to add the route :

neo-app.json

add the following routes :

 {
		"path": "/destinations/BYD",
		"target": {
			"type": "destination",
			"name": "BYD"
		},
		"description": "oData Destinations"
	}

Now add a datasource in the manifest.json

	"dataSources": {
		"Service": {
			"uri": "/destinations/BYD/sap/byd/odata/cust/v1/odata_project/",
			"type": "OData",
			"settings": {
				"odataVersion": "2.0",
				"annotations": []
			}
		}
	}

Now run your SAPUI5 application, open the chrome console and you can notice that the destination was successfully consumed!

Conclusion

In conclusion, we saw how to build and deploy a nodeJS into an SAP CLOUD FOUNDRY subaccount, then we learned how to make Ajax calls to the server using a SAPUI5 application hosted on the NEO environment, finally, we also saw how to consume an SAP ByD custom OData service using the destination

The code is available via these repos :

UI5 application
https://github.com/Basselbi/UI5DemoDestinationCons.git

nodeJS application
https://github.com/Basselbi/nodeSRV.git