Component Reuse – The move to Manifest.json

First of all sorry that it took me so long to write this last blog. But life happened.

This last blog will be about how we can make a consistent app that will work both on SAP Cloud Platform as well as on premise.

This scenario will happen if you use the webide to develop, but deploy to on premise gateway.

Here are the links to my other blogs in this series

1. Demystifying the art of component reuse in SAPUI5
2. Component Reuse – 4 ways of sharing data between the apps
3. Simplifying the component reuse to work both on premise and in cloud and using the manifest.json

In the first blog i showed you how to use Jquery to register the module path as well as the component. While it works I am really not a fan of having it in the component.js file. So i figured out a way to move this to the manifest.json file.

The benefits of this is also it gives you more control of your resources on when you want to load the component container.

So back to it, it’s quite simple actually.

First we register the component as a dependency under the sapui5 –> dependencies

"components": {
	"bourneMyChildApp": {
		"lazy": true
	}
}

The lazy here makes sure our component isn’t loaded until needed, saving precious bandwith on initial load.

Secondly in the root of sapui5 add the resourceroot to your app

"resourceRoots": {
	"bourneMyChildApp": "../sap/bc/ui5_ui5/sap/mychildapp/"
},

Now you might say, hang on! that only works on prem. And yes you are quite correct, but the actual cloud magic happens in the neo-app.json file. Remember my first blog? We added the following to the neo-app.json file

 {
      "path": "/mychildapp/",
      "target": {
        "type": "application",
        "name": "mychildapp"
      },
      "description": "My Child App"
    }

This tells the SCP that when we run something with path /mychildapp/ it should point to our application. The only thing we need to do to make our app work both on prem and also cloud is to change that path to path we added as a resourceroot

 {
      "path": "/sap/bc/ui5_ui5/sap/mychildapp/",
      "target": {
        "type": "application",
        "name": "mychildapp"
      },
      "description": "My Child App"
    },

That’s it! Now when you test in SAP WebIde you are running the cloud version of your app, but when you deploy it, your resourceroots are still fine and picks up your child app from there.