Third-party libraries in a UI5 TypeScript app

[WouterLemaire]

Using third-party libraries might be a bit more complicated in UI5 with TypeScript. The solution to do this is way easier than you would expect. Around a year ago, Peter Muessig already shared the solution for this. Maybe you’ve already seen this blog post of Peter so you know how to use this:

https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/

 

It could be that you missed it or just didn’t know it also works for UI5 with TypeScript.

In this blogs, I want to point out that the same approach is valid for UI5 with TypeScript by providing a simple example.

 

Installation

Start by generating a new UI5 TypeScript app following the steps in this blog post:

https://blogs.sap.com/2021/07/01/getting-started-with-typescript-for-ui5-application-development/

 

As an example, I will add the third-party library “mobx” to my project by running the following command from in the project folder:

npm i -D mobx

For making this work in UI5 we need the UI5 middleware and builder taks “ui5-tooling-modules”. This one can also be installed with the following command:

npm i -D ui5-tooling-modules

Configuration

Once both are installed, configure the UI5 tooling to use the middleware and task by adding it to the UI5 dependencies:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/packag...

Next, the “ui5-tooling-modules” task and middleware needs to be configured. Actually, you just have to add it as a task for the builder and as a middleware for the server configuration.

This will make sure that the app can load the third-party library when running and it will be added to the “dist” folder when building:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/ui5.ya...

Consume

You are ready to use the third-party library like any other control/library of the UI5 framework, check line 5:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/src/co...

By importing “mobx” at the top, TypeScript will give me full autocompletion support with syntax checks in case of errors.

I’m simply using “mobx” to observe any changes in the JSONModel:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/src/co...

The view will simply show the value of the JSONModel:

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/main/src/view/Main.view.xml

I also added a button that changes the value of the description which automatically updates the value thanks to “mobx”. Feel free to look a bit deeper into the project.

Run

Simply run “npm start” to test the app:

Result:

Build

Building the app is just as before by running the build script:

The only difference now is that it will also copy the “mobx” library from the node_modules into the “resources” folder of the app:

 



The build process will also handle the third-party library differently compared to UI5 controls/libraries to make it resolvable:

Deploy

All fine until here, you can run and build the app which will work perfect! Although this might fail when running this app from in a Fiori Launchpad on-premise or in BTP. Once deployed, the app will not be able to find the library as it will search in the resources folder. All requests to this folder are forwarded to the UI5 SDK.

As a solution you have to configure the build task as followed: “prependPathMappings”

https://github.com/lemaiwo/UI5WithThirdPartyLib/blob/560340f6c732d1e473236afea6d7268d065deb1f/ui5.ya...

This will add UI5 config in the component.js which maps the third-party library with the path to the library in the project:

End

With this you should be good to go for consuming third-party libraries in UI5 with TypeScript.

 

More information regarding the task and middleware: https://www.npmjs.com/package/ui5-tooling-modules

 

The demo app: https://github.com/lemaiwo/UI5WithThirdPartyLib