Technical Articles
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
Great piece of information in this blog Bassel El-Bizri !!!
Thanks for sharing!