首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用nodejs运行SAP Fiori应用

使用nodejs运行SAP Fiori应用

作者头像
Jerry Wang
发布2020-08-17 16:43:01
7890
发布2020-08-17 16:43:01
举报

(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:

image
image

(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:\Users\i042416\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt” serve

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-08-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档