Skip to Content
Technical Articles
Author's profile photo Jakob Marius Kjær

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.

 

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin Panneels
      Robin Panneels

      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

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

      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.

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

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

      Author's profile photo Robin Panneels
      Robin Panneels

      Hi Jakob Marius Kjær

      I'm currently moving our workflow also to use the ui5 tooling. And for me this is way more elegant than our old grunt-setup. With these middleware components the development is indeed a lot simpler.

      In the new versions of nw-abap-uploader and the basicauth proxy you can now also add your user credentials in a .env file, which is typically not pushed to git.

      In next couple of weeks we are going to ask the other devs of our team to transition to the ui5-tooling way of working. So I'm hoping this transition will go smoothly 🙂

      Thanks for your blog series, it is awesome!

      Regards,

      Robin