zoukankan      html  css  js  c++  java
  • 使用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:

    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:Usersi042416AppDataRoaming pm ode_modulesgrunt-cliingrunt” serve

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

  • 相关阅读:
    毕业论文(设计)开题报告
    jqgrid工作记录1(单元格内容过长三个点显示,表头自动换行,取消滚动条预留空间)
    mysql递归查询(父级,子集)
    ORACLE--SQL日常问题和技巧2(自定义排序,递归查询,异常ORA-01747,逗号隔开的字符串转成in条件,用符号连接表中某字段)
    随机图片获取api
    ubuntu16.04下安装Qt5.9
    Ubuntu16.04更换下载源(图形界面更改)
    VM虚拟机黑屏,但是在运行状态的解决方法之一
    Ubuntu终端快捷复制粘贴
    VIM的部分配置()
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13607068.html
Copyright © 2011-2022 走看看