使用nodejs运行SAP Fiori应用
(1) download and install NodeJS in your local laptop:https://nodejs.org/en/download/
Type node -v to ensure it works correctly:
(2) install and configure Grunt. Grunt is a JavaScript task runner which can finish repetitive task for you. In this tutorial, I use it to launch local NodeJS server automatically. Installation could be done via command line: npm install -g grunt-cli
Once done, you can see the following output:
Check the folder listed in the console, you can see lots of stuffs regarding Grunt have been automatically downloaded.
(3) Go to the root folder of your Fiori application, type npm init. There will be a tutorial which can guide you to generate package.json file.
Add the following part to your package.json file:
"devDependencies": {
"grunt": "^0.4.5",
"grunt-connect-proxy": "^0.2.0",
"grunt-contrib-connect": "^0.9.0",
"load-grunt-tasks": "^3.4.1"
}
I attach the complete package.json file of my Fiori project for your reference.
{
"name": "simplefiori",
"version": "1.0.0",
"description": "Jerry's test Fiori project",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/i042416/simpleFiori.git"
},
"keywords": [
"local"
],
"author": "i042416",
"license": "ISC",
"bugs": {
"url": "https://github.com/i042416/simpleFiori/issues"
},
"homepage": "https://github.com/i042416/simpleFiori#readme",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-connect-proxy": "^0.2.0",
"grunt-contrib-connect": "^0.9.0",
"load-grunt-tasks": "^3.4.1"
}
}
(4) Type npm install in your Fiori project root folder. Once done, there will be a folder node_module generated which contains lots of necessary module:
(5) Create a file named Gruntfile.js in the root directory of your project. This file works as a task descriptor which tells Grunt how to launch NodeJS server and the task detail it should perform.
Here below is my Gruntfile.js:
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
connect : {
serve : { // name of the target
options : {
hostname : "localhost",
port : 8080,
base : "./",
open : "http://localhost:8080/webapp/Component.html",
middleware : function (connect, options) {
// See document in https://github.com/drewzboto/grunt-connect-proxy
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
options.base.forEach(function (base) {
middlewares.push(connect.static(base));
});
var directory = options.directory || options.base[options.base.length - 1];
middlewares.push(connect.directory(directory));
return middlewares;
}
}
},
proxies : [
{
context : '/resources',
host : 'vesapui5.dhcp.jerry.corp',
port : 8080,
https : false,
rewrite : {
'^/resources' : '/sapui5-dist-1.40/resources'
}
}
]
},
eslint : {
target : ["webapp/**/*.js"]
}
});
grunt.registerTask('serve', ['configureProxies:serve', 'connect:serve:keepalive']);
};
Here below is my Component.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jerry's test Fiori page</title>
<script src="/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ushell, sap.ui.comp"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
jQuery.sap.registerModulePath("JerryTest", './');
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "JerryTest"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
(6) Now everything is done. Type command line grunt serve, and you should see the following output: local server is working and the html file you specified in Gruntfile.js is automatically opened:
The Fiori application runs correctly in Chrome now:
Please notice that this grunt serve is just a short cut, the complete path could be got from task manager: node “C:\Users\i042416\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt” serve
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- SAP UI5 FileUploader 的本地文件上传技术实现分享
- SAP UI5 应用开发教程之五十九 - 如何在 SAP UI5 应用里显示世界地图试读版
- 一些我整理的 SAP 工作和学习的有用链接,持续更新
- SAP UI5 mock服务器错误排查
- SAP 电商云 Spartacus UI B2B checkout 点击 Continue 不能跳转到下一页面
- SAP Shipping address页面点了continue后的网络请求
- 使用Visual Studio Code调试运行在SAP云平台上处于运行状态的nodejs应用
- Editability on SAP Text
- 再论SAP云平台上CloudFoundry编程环境的connectivity
- SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
- SAP Fiori Elements drop down list debug
- 使用nodejs应用查询SAP HANA Express Edition里的数据
- SAP Spartacus travis ci-scripts 下面 e2e-cypress.sh 的实现分析