Skip to Content
Technical Articles

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

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.

 

3 Comments
You must be Logged on to comment or reply to a post.
  • Hi Jakob Marius Kjær

    Nice blog! Really interesting.

    Are you working alone on these projects or together with other developers?

    I have the feeling that for most of the developers I work with that the node/npm way of working is complex. But it looks like your setup with the ui5-tooling is easier than the one we are using right now.

    Kind regards,

    Robin

    • I think so. We are 5 ui developers, so as I mention in my next blog use a central git rep. The local deployment is really just for when you are alone on a particular project. For us we are doing some stuff alone and then local deployment is fine because it speeds up and you might not want to commit all the time to deploy.

      With the ui5 tooling and especially these middleware components makes development a lot simpler.

    • But basically I’m writing these blogs as part of our transition to local development. So I’ll let you know how we get along after a couple of weeks. 😉