MTA Standalone Approuter with UI5 Tooling, live reload?

[antonette_oberholster]

Hi experts,

We develop MTA SAPUI5 apps with NodeJS or Java modules.

Is there a way to use the ui5-middleware-livereload feature of UI5 Tooling with standalone approuters?

We start the app in the approuter folder with this script "start": "node node_modules/@sap/approuter/approuter.js", but it does not start the UI5 Tooling, and would be great to have the live reload feature while making UI5 changes to speed up the development.

As a workaround we build the UI module and then start the app, but that takes time.

Is there any way to have the live reload feature with standalone approuter?

Regards

Antonette

[gregorw]

Hi Antonette,

just for clarification: do you want to achieve a live reload of the deployed app?

Best Regards
Gregor

[antonette_oberholster]

Hi Gregor,

No not for deployed. Just a way to test UI5 development without needing to build the solution after every change.

Regards

Antonette

[Tristan]

Hi Antonette,

we faced a similar problem as well. We solved it by pointing the approuter to our uncompiled webapp directory. If you start it that way you don’t need to build the project each time, but the Browser tab does not refresh on its own.

https://www.npmjs.com/package/@sap/approuter#:~:text=a%20service%20attribute.-,localDir,-String

Probably "start": "node node_modules/@sap/approuter/approuter.js --localDir ${PWD}/uimodule/webapp" could do the trick.

Best Regards,

Tristan

[pek]

Hi Tristan, any idea on how to do this with a typescript app? We had a similar solution before changing to typescript but now we require the extra build step...

[nicoschoenteich]

Hi all,

I know this is question is already a few months old, but a new solution to your problem was released recently: the dev-approuter. It hooks the UI5 Tooling (and an SAP CAP project if you want) into the SAP Approuter at dev time. I believe this is exactly what you were trying to achieve. The xs-dev.json file also clearly seperates dev time and productive configuration - so there is no need to edit a file before building the project.

Best, Nico

[pek]

Hi,

[antonette_oberholster]

Thank you jan_tristan_h !

I was not able to use that script, but it did inspire me to reroute the local dir route.

This is an easy workaround, you just need to remember to change it back when you build your project.

Simply change the local dir property of your uimodule in the xs-app.json file of your approuter to rather use the unbuilt files in your root/uimodule folder instead of the built ones in your root/approuter folder:

And yes, as you said, you will only have to start approuter once, and then manually refreshing the browser to see your changes.

I think with this way, if you did not make changes to any other modules (like services), it should still be able to run the entire project.

If anyone knows of a better way to do this, please let us know.

Regards

Antonette

[david_bizer]

Hi Antonette,

the ui5 tooling and the ui5.yaml files should reside in your app folder (also a seperate package.json). So you should be able to call ui5 serve withing your app folder (not your standalone approuter folder). This it at least how I use it on my standalone approuter projects to debug/test locally.

Best regards

David