Implementing a custom UI5 lib and a UI5 app consuming the lib using SAP Full-Stack WebIDE with Grunt

By admin On Jan 15, 2021

I typically use some local dev environment with some of my favorite IDE’s, i.e. VS Code, Atom, WebStorm,… However, sometimes I prefer to use the SAP Web IDE when it comes to implementing UI5 apps for the SAP Cloud Platform (SAPCP). Implementing custom UI5 libs seems to receive more and more attention these days (also thanks to ui5lab.io). Doing that using your own machine & tools works seamlessly. But can we use the SAP Web IDE to do the same? In own SAPCP projects with multiple team members we’ve made some good experience using SAP’s Full-Stack Web IDE – and I really like the benefits!

In this blog I’d like to show how easy it is to implement your own custom UI5 library, deploy it to the SAPCP, and use the library in an own UI5 app. All that can happen from within the Full-Stack Web IDE (not the “old” Web IDE). To speed up I’ve prepared some code on GitHub.

Hint: The example does currently not build the themes from the library project. I still have to figure out how that works because of the theme paths. As soon as I know I will update the example code.

1. Clone example from Github

git clone https://github.com/nzamani/ui5-lib-webide-demo.git

The folder ui5-lib-webide-demo contains two folders and two zip files:

nabi.sample.ui5lib
This folder contains the code of our custom UI5 library
nabi.sample.ui5app
This folder contains the code of our UI5 app that consumes the library – ready for the Full-Stack Web IDE
nabi.sample.ui5lib.zip
This archive contains our custom UI5 library. We will import this archive into the Full-Stack Web IDE.
nabi.sample.ui5app.zip
This archive contains our app. We will simply this archive into the Full-Stack Web IDE.