Skip to Content
Technical Articles
Author's profile photo Mio Yasutake

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.

 

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

generate%20library

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

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Marius Obert
      Marius Obert

      Hi Mio,

      thanks for this post (and the shout-out to easy-ui5) 🙂

      PS: I recommend to join the next UI5ers Live tomorrow (or to catch the replay). There will be some announcements that also affect your post here.

      Author's profile photo Mio Yasutake
      Mio Yasutake
      Blog Post Author

      Hi Marius,

      Thanks for letting me know about next UI5ers Live.

      I'll definitely watch it!

       

      Author's profile photo Osman Kartal
      Osman Kartal

      Hello Mio

      Thank your for the great tutorial 🙂

      I have followed the steps above but I have a problem: I can't consume the library from the app. When I try to open: http://localhost:8080/resources/demo/testlibrary I receive a 403 Forbidden message.

      When I type npm start in the library directory, it works fine.

      Any idea what the problem could be?

      Thanks and Regards

      Osman

      Author's profile photo Mio Yasutake
      Mio Yasutake
      Blog Post Author

      Hi Osman Kartal,

      Thanks for your comment and trying this out.

      I'm not sure about the cause of your problem, but I have uploaded my project to Git so that can clone compare it with your project.

      Regards,

      Mio

       

      Author's profile photo Osman Kartal
      Osman Kartal

      Hello Mio

      Now I have tried it with your project from Git and i managed to make it run, thats great.

      Thanks again 🙂

      ありがとうございました。

      Best Regards

      Osman

      Author's profile photo Kéfren Cezar Conceição
      Kéfren Cezar Conceição

      Hello Mio Yasutake,

      Thanks for sharing your knowledge, I followed all the steps in BAS. But the problem of not finding the library is happening here in BAS and the yarn command doesn't solve it.

      Do you have any idea what it might be?

       

      P.S:I'm using the trial account.Error%20run%20app%20from%20BAS

      Error run app from BAS

      Structure

      Structure

      Author's profile photo Mio Yasutake
      Mio Yasutake
      Blog Post Author

      Hello Kefren Conceição,

      Thanks for your comment.

      I noticed that in your project, package.json doesn't exist.

      The picture below is my project structure.

      Also, the code is available at GitHub. I cloned it to BAS and was able to run it.

       

       

      Author's profile photo Kéfren Cezar Conceição
      Kéfren Cezar Conceição

      Hi Mio Yasutake,

      How strange, I looked several times. I think this package.json is not described in his steps and is not in git either.

      I found package.json in the above level folder. This was described by you in step 1. Does this one inside the package folder follow the same logic as in step 1?

      I looked at https://github.com/ui5-community/ui5-library-showcase too, it doesn't have this package.json either. I will redo all the steps.

      Package.json%20on%20Ui5-library-workspace

      Package.json on Ui5-library-workspaceMiss%20package.json

      Miss package.json

      Author's profile photo Mio Yasutake
      Mio Yasutake
      Blog Post Author

      Hi Kefren Conceição,

      package.json I mentioned in the above comment is described in the step 1 of this blog. It is at the root of the project.
      In your project I see package-lock.json, but no package.json seems to be there.
      Author's profile photo Kéfren Cezar Conceição
      Kéfren Cezar Conceição

      Hi Mio Yasutake ,

      Thank you very much for your patience, I did everything again to broaden my absorption of the concepts. Really I had just put in packag-lock.json. I was able to run the application perfectly here.

      Correct%20Structure

      Correct Structure

       

      Dictation for life : Do it right, it will work. (>‿◠)✌

      Author's profile photo Michael Smith
      Michael Smith

      Mio Yasutake , fantastic blog!  This is extremely helpful!

      One question - is there a way to generate the mta.yaml for the generated library and app?

       

      Thanks,

      Michael

      Author's profile photo Mio Yasutake
      Mio Yasutake
      Blog Post Author

      Hi Michael Smith,

      Thanks for your comment.

      As far as I know, currently there's no way to generate mta.yaml for libraries.

      The following blog post by Wouter Lemaire may help to add deployment configuration to the library.

      https://blogs.sap.com/2020/10/16/using-ui5-libraries-in-cf-approuter/