Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
UxKjaer
Product and Topic Expert
Product and Topic Expert
IF you are reading this. I'm guessing you've come through my other blogs


 

 



Thanks for sticking with me.


This blog will focus on how we can get our component reuse to work either locally or remotely.

Now I created another example app that I'm running locally and then I've got a third application that I want to load from my gateway server.

Let's start with the local app.

Because we already have middleware for loading static files, I'm thinking we should be able to reuse that.

So I've added a componentcontainer to my view
<core:ComponentContainer width="100%" height="100%" usage="myreuse" propagateModel="true" lifecycle="Container"/>

And i've added the component usages to my manifest.
"componentUsages": {
"myreuse": {
"name": "com.myorg.myUI5App",
"settings": {},
"componentData": {},
"lazy": true
}
}


Now when we run this we are getting the following error as expected:



 

This is because UI5 doesn't know where to read our reuse component from. I added the following into my yaml file.
  - name: ui5-middleware-servestatic
afterMiddleware: compression
mountPath: /resources/com/myorg/myUI5App/
configuration:
rootPath: "../com.myorg.myUI5App/dist"

So we are using the same middleware that we use to serve our UI5 resources for reading our file system and picking up another local app. So after a restart of my local server, I am now seeing my application.

Next issue, let's try and read from the gateway server.

I've added another component container and another component usage into the manifest
<core:ComponentContainer width="100%" height="100%" usage="testReuse" propagateModel="true" lifecycle="Container"/>

 
"testReuse": {
"name": "myreusetest",
"settings": {},
"componentData": {},
"lazy": true
}

 

Then here we need to use our basic auth proxy to fetch the application. So I've added the following into my yaml file.
  - name: ui5-middleware-proxy-basicauth
afterMiddleware: compression
mountPath: /resources/myreusetest/
configuration:
baseUri: "https://hostname/sap/bc/ui5_ui5/sap/myreusetest"
auth: "username:password"

 

And after another restart of the server, it then loads from my gateway server as well. Success!!!

Now if you have a common namespace for your apps, where the component name is the same as your ICF service, you can actually get away with just one entry in the yaml file.

Examle: So if all my apps are deployed with namespace au.com.agilux and the component name is z_test_reuse. In my yaml file I'll add the entry
  - name: ui5-middleware-proxy-basicauth
afterMiddleware: compression
mountPath: /resources/au/com/agilux/
configuration:
baseUri: "https://hostname/sap/bc/ui5_ui5/sap/"
auth: "username:password"

Now the UI5 server will strip the /resources/au/com/agilux/ from my relative path but still use the z_test_reuse. So it'll request the resource from https://hostname/sap/bc/ui5_ui5/sap/z_test_reuse

Cool right!

 

Alright next challenge is our deployment. Let's have a look at that in our next blog.

 
4 Comments
Labels in this area