Add your UI5 Library to UI5Lab
You created a UI5 control and wrapped it into a UI5 Library in the previous blog: https://blogs.sap.com/2018/03/02/create-your-own-ui5-library-for-ui5lab/ . After that you’re ready to share it with the UI5 Community thanks to UI5Lab. In this blog I’ll show you how you can add your UI5 Library with your own controls in UI5Lab.
More information about UI5Lab can be found here: http://ui5lab.io/
Get a local version of UI5Lab
Start by creating a Fork on the UI5Lab-central Github
https://github.com/UI5Lab/UI5Lab-central/
This can take a few seconds…
Once you have done that, you can clone “UI5Lab-central” from your own Github:
Go to your desktop and open command line, create a folder and navigate to it
I created a folder “ui5lab”
Clone UI5Lab from your github fork:
git clone https://github.com/lemaiwo/UI5Lab-central.git
Add your library
Go to the local UI5Lab folder and add the following files to add your library:
- Libaries.json
- Package.json
- combineProjects.json
Add your library name to “libraries.json”
devDependencies name should be same as in the package.json of your library
Copy the the folders from your library in node_modules to the folders of UI5Lab.
- resources folder is used for the library
- test folder is used for your examples
Build UI5Lab on your desktop
After the configuration we can build a local version of UI5Lab with our library in it.
We need to go back in the command line and navigate to the folder
cd UI5Lab-central
Here we need to run the command:
npm install –ignore-scripts
This will load all the required npm dependencies without running their individual scripts
After that, run:
npm run postinstall
This will load bower dependencies and copy all files to the correct places
Last command:
grunt serve
This will run a local webserver to test UI5Lab on your desktop.
Test UI5Lab on your desktop
Go to the local webserver in a browser on your desktop via this url:
http://localhost:8080/test-resources/ui5lab/browser/
Here you’ll see your library
Navigate to your Library and you’ll see the samples that you’ve created:
In the local version, it can be possible that not all examples work, including your own. UI5Lab is still not completely finished and this step is still on the todo list to be fixed.
Add changes to your Github fork
Now you’re ready to push your changes back to git. But before you do, don’t forget to set your email. This is required for the contribute license agreement. Do this with the following command:
git config –global user.email “email@example.com”
Add your changes to git with the following commands:
- git add .
- git commit -m “description”
- git push origin master
Do a Pull request
Go back to your fork of UI5Lab-central on Github and create a “New pull request”
Click on “Create pull request”
Fill in a name and description for the pull request and click again on “Create pull request”
After that, it will start a “Contributor License Agreement” check and start a Travis CI build.
When the build is done, you should see the following:
After that Michael Graf will merge your pull request with the master branch on Github and you’ll see your library in UI5Lab
Find your library in UI5Lab
Welcome to UI5Lab!