Technical Articles
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
- yarn :
Steps
- Setup workspace
- Create UI5 library
- Create UI5 app
- Resolve local dependencies
- 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.
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.
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.
Hi Marius,
Thanks for letting me know about next UI5ers Live.
I'll definitely watch it!
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
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
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
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 run app from BAS
Structure
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.
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 on Ui5-library-workspace
Miss package.json
Hi Kefren 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 Structure
Dictation for life : Do it right, it will work. (>‿◠)✌
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
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/