Local development with Fiori Launchpad

[Mattias]

As impressive the WebIDE might be, there are still situations where I prefer to work in a local environment, with the toolchain we're used to from other JS development, in our case VisualCode, ESLint, Grunt, BrowserSync and bash.

After looking at some alternatives, and playing around with for example localneo (https://www.npmjs.com/package/@uniorg/localneo) I decided to take a naive approach and simply setup a reverse proxy for the files needed for Fiori Launchpad and our backend OData service.

I started with one of our current projects, and setup grunt tasks that starts up a reverse proxy which redirects /resources and /test-resources to the SAP CDN at https://sapui5.hana.ondemand.com.

SInce I did not want to modify any of the files created by WebIDE I greated a new grunt file, Gruntfile-dev.js

module.exports = function (grunt) {

	"use strict";





    var proxy = require('http-proxy-middleware')

    grunt.loadNpmTasks('grunt-browser-sync');





    var odataProxy = proxy('/sap', {  // Proxy all calls till /sap to our netweaver server, this includes base project for extension projects and odata calls

        target: '<hostname of neteweaver stack for extension projects and odata>',

        changeOrigin: false // for vhosted sites

      })

    

      var resourcesProxy = proxy('/resources', {  // UI5 and Fiori resources from SAPs CDN, could point to local netweaver stack also

        target: 'https://sapui5.hana.ondemand.com',

        changeOrigin: true // for vhosted sites

      })



          

      var testResourcesProxy = proxy('/test-resources', { // UI5 and Fiori resources from SAPs CDN, could point to local netweaver stack also

        target: 'https://sapui5.hana.ondemand.com',

        changeOrigin: true   // for vhosted sites

      })



	grunt.initConfig({

        browserSync: {   // Setup browsersync to watch javascript files for changes

            default_options : {

                bsFiles: {

                    src : '**/*,js'

                },

                options: {

                    server: {

                        baseDir: ['webapp'],

                        middleware: [odataProxy,resourcesProxy,testResourcesProxy]

                    },

                    startPath: '/test-resources/sap/ushell/shells/sandbox/fioriSandbox.html' // Set start path to the fiori launchpad sandbox provided by the Fiori SDK

                }

            },

        },

    });



    grunt.registerTask("default", [  // Start a webserver with three reverse proxies

		"browserSync",

	]);



};

 

Also some grunt and browsersync dependencies where added to package.json

{

  "name": "Hello World",

  "version": "0.0.1",

  "description": "",

  "private": true,

  "devDependencies": {

    "@sap/grunt-sapui5-bestpractice-build": "1.3.62",

    "grunt": "^1.0.3",

    "grunt-browser-sync": "^2.2.0",

    "grunt-cli": "^1.3.2",

    "http-proxy-middleware": "^0.19.1"

  }

}

To be able to install @Sap/grunt-sapui5-bestpractice-build SAP's npm repository was added to .npmrc

@sap:registry=https://npm.sap.com/

Finally Fiori Launchpad need to know about your application, and that is handled by adding it to the config file at

 

webapp/appconfig/fioriSandboxConfig.json

{

    "applications" : { 

        "HelloWorld-display" : {

            "additionalInformation" : "SAPUI5.Component=cus.crm.myaccounts.HelloWorld",

            "applicationType" : "URL",

            "url" : "/",

            "title" : "Hello World",

            "description" : "App that says Hello World"

        }



    }

}

 

 

Once this is done you can start the app by running

grunt --gruntfile=Gruntfile-dev.js

 

Please clone or fork https://github.com/trr-official/fiori_local to see this in action