使用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.wdf.sap.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:Usersi042416AppDataRoamingnpmnode_modulesgrunt-clibingrunt” serve
- 一款轻量级Web漏洞教学演示系统(DSVW)
- 使用Burpsuite代理和pypcap抓包进行抢红包的尝试
- 基于WAVSEP的靶场搭建指南
- 【干货】大数据量下,58同城mysql实践!
- 如何预先处理电影评论数据以进行情感分析
- 如何在Python中从零开始实现随机森林
- 教程从头开始在Python中实现k最近邻居
- 建立安全的 AI
- Python NLTK 自然语言处理入门与例程
- 漏洞预警 | Apache Struts2 曝任意代码执行漏洞 (S2-045,CVE-2017-5638)
- 详解OSSIM-OSSEC WIN 4771案例
- JSShell:一个基于python的交互式Shell
- golang中操作excel
- 企业安全漏洞通告引擎
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法