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
- 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.
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
c3d1947136cd4c748a7aa794001af496's
blog post.
References