Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

Beginning


For a long time I have been using WEBIDE to develop fiori apps. Although I benifit a lot from webide, it is really powerful, but because of slow network, I often came across some problems to launch workbench, to save code, to test run apps on fiori launchpad, and even sometimes I lost codes.

And also I use eclipse with tomcat to write js code and deploy apps locally.

until some days ago, tomcat suddenly did not work any more, after spending a lot of time investigation I gave up finally... And i start to find out another way to test my apps locally.

after research, I found there are also some approach working with fiori and node.js together. However, some details still not very clear like proxy.

in this article i will show my practice , including following achivement:

  • run app on fiori launchpad sandbox

  • route request like '../resource/..'  to CDN resource

  • route odata request to real backend system

  • configure launchpad applications through configuration file


all these key files can be found on github.

Main steps


1. Init project


navi to ui5 project parent folder, new a package json file, use following command:
npm init

input infomation as you want, and also you can modify the package.json afterword. finnally you will see a json file like this:

package.json


{
"name": "ui5_server",
"version": "1.0.0",
"description": "node server host ui5 apps",
"main": "static_server_https.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "~4.16.4",
"express-http-proxy": "~1.5.0",
"http-proxy": "~1.17.0"
},
"author": "leon li",
"license": "ISC"
}

2. Index html


create index.html which is the entry point for ui5. in the index/html it requires sap-ui-core.js and sandbox.js they are both can be found on cdn launchpad,for path '../resources/' it can be route to '/https://sapui5.hana.ondemand.com/resources/''by 'http-proxy' but for '/test-resources/'' the proxy not work, i don't know why...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Financial Validation Result</title>
<script>
window["sap-ushell-config"] = {
defaultRenderer: "fiori2",
renderers: {
fiori2: {
componentData: {
config: {
search: "hidden"
}
}
}
}
};
</script>

<script src="sandbox.js" id="sap-ushell-bootstrap"></script>

<!-- Bootstrap the UI5 core library -->
<script id="sap-ui-bootstrap" src="../resources/sap-ui-core.js" data-sap-ui-libs="sap.ushell, sap.collaboration, sap.m, sap.ui.layout"
data-sap-ui-theme="sap_belize" data-sap-ui-compatVersion="edge" data-sap-ui-resourceroots='{"fin.cons.vecresult": "fin.cons.vecresult/webapp/"}'
data-sap-ui-frameOptions='allow'> // NON-SECURE setting for testing environment
</script>

<script>
sap.ui.getCore().attachInit(function () {
// initialize the ushell sandbox component
sap.ushell.Container.createRenderer().placeAt("content");
});
</script>
</head>
<!-- UI Content -->

<body class="sapUiBody" id="content">
</body>

</html>


3. Static_server_https.js


use express, very simple to create a sever and plus 'express-http-proxy' and 'http-proxy' http request can be converted to https, and odata request can also sent to real backend server. by default request to system er9 will be sent to client 001, for our case client 500 is needed, so can write proxyReq header in the event 'proxyReq'.

const express = require('express')
const app = express()
const proxy = require('express-http-proxy');
const httpProxy = require('http-proxy');
const odataProxy = httpProxy.createProxyServer({
target: 'https://ldai4er9.wdf.sap.corp:44300', secure: false
});

odataProxy.on('proxyReq', function (proxyReq, req, res, options) {
proxyReq.setHeader('sap-client', '500');
});

app.route('/sap/opu/odata/*$').all(function (req, res) {
odataProxy.web(req, res);
});

app.use(express.static(__dirname));
app.use('/resources/', proxy('sapui5.hana.ondemand.com/resources/', {
https: true
}));
/* app.use('/test-resources/', proxy('sapui5.hana.ondemand.com/sdk/test-resources/', {
https: true
})); */

app.listen(3000, () => console.log('Example app listening on port 3000!'))


4. Fiori launchpad configuraition


in the folder 'appconfig' new a json file named 'fioriSandboxConfig.json'

{
"applications" : {
"FinancialValidationResult-runValidationResultforReportedData": {
"additionalInformation": "SAPUI5.Component=fin.cons.vecresult",
"applicationType": "URL",
"url": "fin.cons.vecresult/webapp/",
"description": "Financial Validation Result",
"title": "Financial Validation Result"
},
"MySecondFioriObject-display" : {
"additionalInformation" : "SAPUI5.Component=com.mycompany.MySecondFioriApplication",
"applicationType" : "URL",
"url" : "/MySecondFioriApplication",
"title" : "My Second Fiori Application",
"description" : "My second Fiori application"
}
}
}


5. Install dependencies


using command:
npm install

after that your project folder will look like this:


6. Run server


node static_server_https.js

7. Test in browser


run http://localhost:3000


everything works fine

Conclusion


With this simple practice you can develop apps from local workspace. although there are some limitations like cross navigation, run unit test... I am also look forward if someone can find way to solve these issues.

thank you
3 Comments