End-To-End setup of local development environment with UI5 Tooling – Part 4 Component reuse

IF you are reading this. I’m guessing you’ve come through my other blogs

• End-To-End setup of local development environment with UI5 Tooling

• End-To-End setup of local development environment with UI5 Tooling – Part 2

• End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code

• End-To-End setup of local development environment with UI5 Tooling – Part 5 Deployment

<core:ComponentContainer width="100%" height="100%" usage="myreuse" propagateModel="true" lifecycle="Container"/>

"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.