Connecting UI5 TypeScript Components locally

[WouterLemaire]

Introduction

When developing UI5 apps that reuse other UI5 Apps as components (reusable components) with TypeScript it requires additional confiugration to run in BAS or VSCode. It doesn't only need to resolve the reusable component, it also needs to transpile both.

In the past I used the middleware fiori-tools-servestatic to resolve reusable components but that points to the webapp folder which doesn't work with TypeScript.

Luckely, peter.muessig came up with a solution for this: ui5-middleware-ui5

https://www.npmjs.com/package/ui5-middleware-ui5

 

In this blog post I'll show you how to use it which is a prerequisite of the following post for connecting UI5 apps in BTP CloudFoundry across spaces:

https://blogs.sap.com/2023/11/09/connecting-ui5-components-in-btp-cloudfoundry-across-spaces/

 

Setup

I generated two UI5 Apps/Components with TypeScript enabled using the basic Fiori generator:

In my workspace I have two apps that I will use together:

• App1 will be used as a reusable component in app2


• App2 will be the main app that consumes App1 as a reusable component

To keep it as simple as possible, I only added a IllustratedMessage to the main view with the name of the app:

Running App1 separated results in the following:

 

The goal is to run App2 and also show App1 as a component inside App2. Therefore, I’ve defined “app1” as a component in the manifest of “app2:

This allows me to use show an IllustratedMessage in App2 but also show the main view with the IllustratedMessage of App1:

 

Problem

App2 needs to be able to resolve the dependency with App1 to run locally. This is something we could solve by using the Fiori tooling serve static middleware which I used in the past for the componentloader:

https://github.com/lemaiwo/ComponentLoaderPoC/blob/ff19a4192712084a17fc59e2415070daf87532a8/UI5Compo...

This works perfect when using JavaScript. Unfortunately, with TypeScript joining the game this is not good enough. Using servestatic would not transpile your changes on the fly which will require you to always rebuild the app and point to the dist folder.

Solution

Luckily, peter.muessig  has a solution for everything! 😊 He introduced me the “ui5-middleware-ui5” which can be used to load UI5 Apps/Components based on npm dependencies that are developed with TypeScript. Peter already explained very well with a showcase how to use this middleware here: https://github.com/petermuessig/showcase-ui5-middleware-ui5

For using this middleware, I first added “app1” as a devDepenency to “app2”:

(Using the local path as app1 is not published to npm)

Next, install “ui5-middleware-ui5” as a devDpendency to app2:

 

Add it to the ui5.yaml as a customMiddleware:

Full config : https://github.com/lemaiwo/ui5-ts-components/blob/main/app2/ui5.yaml

Running app2 (using npm start) will also load app1 and transpile it:

 

 

Both apps are available on GitHub: https://github.com/lemaiwo/ui5-ts-components

[ionutrazvanaanicai]

@WouterLemaire Nice and clear explanations. Any idea how would be possible to make it work in case if both apps were deployed to a SAPUI5 Repository to an On-Premise system?

[daniellelyle]

@WouterLemaire Great tutorial - I learned from last year's ui5con that it is possible to achieve this using npm workspaces as well, but I haven't been able to get it to work when the child component is using typescript. So I tried running your repo locally to see a working example, but app2 still fails to load the component for me. 

Does it still work for you? Maybe I have done something wrong. 🙃