Integrate SAP UI5 or open UI5 with Node.js
What we are building?
We are building a UI5 based web-application which uses Node.js for backend logic. For the sake of simplicity we will create a small application which list down all the seven wonders of world with their respective location.
- Node.js should be installed on your machine. To install Node.js please visit http://nodejs.org/
- SAPUI5 UI Development Toolkit for HTML5 should be installed on your machine. To install please visit https://tools.hana.ondemand.com/
- Git Bash should be installed (optional). I will be using Git Bash for this demo.
Writing the backend Node.js code
In the backend, we will be exposing the data using REST service which will be consumed by the UI5 application. Following are the steps to expose a REST service via Node.js:
- Create a new folder anywhere on your machine
- Inside the folder, create a package.JSON file and copy the following code:
The above code gives some general description about Node.js project like name of project, description, version and most important specify the dependencies which will be used in the project. In our case, its Express module which will be used for exposing the REST APIs. A JAVA developer would be able to get the analogy between package.JSON in Node.js and pom.XML in maven.
To know more about Express module, please visit http://expressjs.com/
- Open Git bash, in the Git Bash, Navigate to that folder and execute the following command
The above command will install express module for the project.
- Create a Server.js (you can choose any name of your choice) in that folder and copy paste the following code:
- Open Git Bash and Navigate to the folder. Run to following command to host the project:
Note: server.js is the name of the .JS file which we created in step 4.
Testing the hosted service
To test the service hit the URL http://localhost:4000/SevenWonders
Wow it’s working 🙂 🙂 !!!
Creating the UI
you may feel that, I have not discussed the UI code in a very detailed manner. well yes, it was inteded 🙂 as that is not the purpose of this blog. To learn UI5 in detail, please visit
Integrating the front and back ends
- Navigate to the UI5 project workspace and copy the Index.html and the folder containing views and controller to your clipboard.
- Paste the clipboard at the location where server.JS file exists. After copying, your folder will look like
- Add the following line of code in you server.JS
The above code tells to route default request (i.e. localhost:4000) to current directory, and since we have kept index.html file in the same directory, index.html will get render.
Testing the final application
- Navigate to the directory containing server.js file and execute the following command in your Git Bash
- To test the final application just hit http://localhost:4000/ in your browser
🙂 😛 😎 Hmm, Feedbacks . . . .always welcome 😳 😉 😎