Technical Articles
Kickstart your UI5 library development with the UI5 Library Generator
During some of my latest projects I had to make use of custom UI5 libraries to centralize some custom controls. Personally since the release of the UI5 tooling, I’m using VS Code to do all my developments related to UI5 / Cloud.
I noticed that for creating a custom library there’s no straight forward way to generate a template for custom libraries. Actually there is one, which doesn’t seem to be maintained anymore for over 2 years.
So at that point, I was still using a template generated by SAP Web IDE. The template itself is great, but still isn’t using the latest features of the UI5 tooling. So I thought to myself, why not create a custom generator based on this template, fully enabled with the latest features of UI5 tooling.
Let me introduce the UI5 Library Generator, a custom UI5 library generator based on the original Web IDE template and some of concepts of the Easy UI5 generator.
Generating a new library using the UI5 Library Generator
First install Yeoman and the UI5 Library Generator using the command line.
npm install -g yo
npm install -g generator-ui5-libraryyo ui5-library
Anwer the questions posed by the generator:
After choosing the framework you want to use, the generator will create your new UI5 library and you’re up and running right away.
You can test the demo control using:
npm run start
Which will result in the UI5 tooling launching the demo control:
Next steps
This is the first version of the UI5 Library Generator. The essence of the generator is in place: generating a custom UI5 Library in a matter of minutes. But still there are a few things I have in mind to add, like:
- Automated testing for the generator
- CI / CD setup for automated deployment to NPM
- Deploy configuration
- Sub generators for e.g. creating a new control
- …
So still a lot of things to do, contributions are always highly appreciated!
Enjoy kickstarting your custom UI5 library projects!
Great initiative.
I'm excited to see where you take this.
Thanks for this!
This definitely addresses a pain point. Everything around custom libraries seems to have been neglected over the past ~2 years. Especially with all the tooling and IDE changes there have been.
Great initiative, can't wait for the rest of the #SAPCommunity to once again uplift the entire ecosystem bit by bit. 🙌🙌
Great blog post and wonderful you shared your project with the community. I believe this helps a lot of people to make a jump start with custom libs. Therefore we featured your blog post on the SAPUI5 community topic page and will add your generator to the developer tools section.
Maybe you also want to contribute your project to our OpenUI5 Project page? We are actually about to update this page and highlight more recent projects. So your project would be definitively in the short list to be displayed directly on the page 😉
Thanks for the feedback! Well I'm actually in contact with Peter to contribute this project to the new UI5 community GitHub repository as well. So for sure, I just added it to the OpenUI5 Project Page (pull request on GitHub is pending)!
Geert-Jan Klaps
Is there any way to generate the mta.yaml with the tool? What have to be included there ? An example available for the mta.yaml file?
With that it could be deployed to CF ... I guess this must be installed in the HTML5 repo? Own approuter needed?