How to consume UI5 custom libraries in BAS or VS Code

Introduction

A while ago, I posted the following question to SAP Community.

Is there a way to consume custom UI5 library from SAP Business Application Studio?

At that time, I managed to find a workaround, which is described in the comment of above question. However, it required an adjustment before deploy, so obviously wasn’t the best solution.

Recently, I learned from UI5ers live that I could use yarn workspaces to manage dependencies inside my local development environment.

In this blog, I’d like to share how to set up environment for consuming custom UI5 libraries locally in VS Code or BAS. I have tested this in VS Code, but it should work the same way in BAS.

Prerequisites

Install the following npm packages (globally) to your development environment.

• • yarn : npm install -g yarn
  • yoman : npm install -g yo
  • generator-ui5-library : npm install -g generator-ui5-library
  • generator-easy-ui5 : npm install -g generator-easy-ui5

Steps

1. Setup workspace
2. Create UI5 library
3. Create UI5 app
4. Resolve local dependencies
5. Use library in UI5 app

1. Setup workspace

First, create a root folder which will contain UI5 library and UI5 app projects.

Initial workspace structure will look like below.

test-workspace
    ├ packages // Inside this folder you'll create library and ui5 app folders
    └ package.json

package.json

{
  "name": "test-workspace",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "private": true,
  "workspaces": [
    "packages/*"
  ]  
}

yarn will resolve the dependencies for the directories specified in “workspaces” section.

Also, note that private: true is set because workspaces are not meant to be published.

2. Create UI5 library

Create a folder under packages.

* ui5-library generator doesn’t create a root folder but directly creates src and test folders

test-workspace
    ├ packages 
        └ testlibrary //this folder will contain sources for library
    └ package.json

Run below command on test-workspace/packages/testlibrary to generate an UI5 library project.

yo ui5-library

Below image shows generated library structure.

As the generated library folder already contains an example controller and test resources, you can test it locally by executing npm start.

3. Create UI5 app

Next, create a UI5 app which consumes the library we’ve just created.

Run below command on test-workspace/packages directory to generate an UI5 app project.

yo easy-ui5

As a result, UI5 app project will be created under test-workspace/packages folder.

Now, let’s add the library to dependencies of this UI5 app. To do that, add the following sections to demo.testapp/package.json.

Note that package name “testlibrary” is coming from the name declared in package.json file of the library.

If I execute npm start on the app folder at this point, an error occurs saying that “testlibrary” could not be found. This is expected and we’ll resolve this in the next step.

4. Resolve local dependencies

Here, yarn comes into play. Execute the command yarn on test-workspace folder and yarn will resolve local dependencies.

Now you can execute npm start on the UI5 app folder without errors.

5. Use library in UI5 app

Add Example control from the library to the view of the UI5 app.

When you execute the app, you will still get this error. Notice that the browser is trying to get Example.js file from CDN (https://sapui5.ondemand.com).

When you open the browser and enter http://localhost:8080/resources/demo/testlibrary/, you can see library resources exist.

So all you need to do is to change the src path in the index.html file.

Finally, the app can consume resources from the library.

Conclusion

In this blog, I have demonstrated how to consume a custom UI5 library in BAS or VS Code (locally). Please note that this app is not yet ready to run in CF environment. To make it runnable in any environment, refer to Wouter Lemaire‘s  blog post.

References

• UI5ers live Episode 05
• ui5-library-showcase (Git Hub)
• My sample repository