How to use html5-push with MTA based fiori app?

[js1972]

Description

How do I use html5-push for a Fiori application generated with the standard business application studio templates (mta with html5 module).
If I try it does not seem to work. I think its because the ui5 tooling builds the app into a /dest folder which html5-push doesn't know about. so when I run cf html5-push from the project root I don't see any errors but my app does not seem to get updated.
Is html5-push not meant to be used for mta based apps?

Environment

• Plugin version (e.g. 1.3.0) - 1.4.3
• OS (macOS/Windows) - macos / business app studio
• SAP CF Landscape (e.g. Canary) - not canary - normal productive cf landscape
• IaaS provider (e.g. AWS) - aws
• Region (e.g. eu10) - ap10

CLI Output

Set environment variable DEBUG=1, run the flow and paste output here.

[micellius]

Hi @js1972 ,
Thanks for the question. Indeed, html5-push is designed to be agnostic to UI technology or deployment mechanism, so it knows nothing about MTA or Fiori. However, it provides flexibility to deploy any number of HTML5 applications, if you specify exact paths of the directories containing them. Directory is treated as HTML5 application, if it contains both xs-app.json and manifest.json files. For example, if you have the project structure like below, and your current working directory is mta_project:

|-- mta_project
    |-- ui_module1
    |    |-- dist
    |    |    |-- manifest.json
    |    |    |-- xs-app.json
    |    |    `-- ...
    |    |-- webapp
    |    |   |-- manifest.json
    |    |    `-- ...
    |    |-- xs-app.json
    |-- ui_module2
    |    |-- dist
    |    |    |-- manifest.json
    |    |    |-- xs-app.json
    |    |    `-- ...
    |    |-- webapp
    |    |   |-- manifest.json
    |    |    `-- ...
    |    |-- xs-app.json
    |    `-- ...
    `-- ...

you can run the html5-push in the following way to deploy both UI modules build artifacts:

cf html5-push ui_module1/dist ui_module2/dist

In case you have already deployed the MTA or pushed UI with html5-push, and you only would like to update the UI modules (without creating new instance of html5-apps-repo service app-host plan), you can use -r option:

cf html5-push -r ui_module1/dist ui_module2/dist

You can find some relevant info here #39 as well.

[js1972]

Thanks for the detailed response. I will try this. Typically I always use an MTA and was hoping html5-push would be a quicker way because after initial deployment most changes are just to the UI5 app. ;-)

[micellius]

By the way, if there is only one UI5 app that you deploy to preview intermediate results, you can copy xs-app.json to webapp directory, open terminal in webapp directory and use cf html5-push -r without specifying path. Current working directory is checked for being HTML5 app in this case, and you can save time of building the UI module.

Alternatively, you can run UI5 app in SAP Business Application Studio without deploying it. If you use managed or standalone Approuter in your MTA project, you can create run configuration (the "play" panel on the left side) and preview UI5 application with different UI5 versions, themes, as standalone HTML5 app with index.html or as part of FLP (if you don't have any HTML file, but only Component.js).

If you develop UI5 app outside of SAP Business Application Studio (e.g. in VSCode on your laptop), it is also possible to run UI application locally using html5-repo-mock NPM package that will emulate required CloudFoundry services.

[Gabriel-Yepes]

First, thank you @micellius for your responses.

I have a similar scenario where i have like 14 ui5 apps as modules inside a single MTA CAP project.

Lets say that i want to deploy just a single ui5 module called "configuringworkers".

After using the html5-push command to push it, I noticed that the 13 other apps stopped working and, after testing with the html5-list command, these apps were erased from the list.

Is this case an expected behavior? What can I do to just push a single ui5 module without affecting the others?

Thank you in advance!

[micellius]

Hi @Gabriel-Yepes ,
The behavior of html5-push you described is as expected. The html5-apps-repo service supports deployment operation only on the level of the whole app-host service instance, which means that update of individual files or html5 applications within that instance is only possible by re-deployment of the whole previous content and modified files together. This restriction is also mentioned in the official documentation of the html5-apps-repo service. Therefore, the options that you have are:

1. Don't deploy during development.

If you need to develop a new feature or fix an issue with existing UI application, you don't necessary need to deploy your UI application each time. You may use html5-repo-mock instead. The html5-repo-mock may work in a hybrid mode, where part of the resources (e.g. configuringworkers application) will be served from your development environment (e.g. BAS workspace or your laptop) and the rest from real html5-apps-repo. This allows to test UI applications before deployment, even if they have dependencies to other deployed applications or services. Once you are ready, use standard MTA build and deploy workflow.

2. Get all, push all

If you need to apply some hot fix, and don't want to go through the whole process or you don't have originally deployed files, you may:

• create some empty directory and open terminal in it
• run cf html5-list to figure out the app-host-id of previously deployed UI application
• run cf html-get --all <app-host-id>
• modify individual files that you want to patch within downloaded content (or copy modified files to relevant places)
• run cf html5-push <app-host-id> to re-deploy the whole content of specific service instance

3. Multiple app-host instances

If you have multiple teams or developers working on UI applications and you want to allow them to work without overriding changes of each other every time, you may model the MTA in way that instead of having single com.sap.application.content module and single html5-apps-repo instance you use multiple of them. In this case you deploy each UI application to a dedicated html5-apps-repo instance, and re-deployment of single UI application with cf html5-push -r will not delete all other UI applications of the MTA project (because they will not share the html5-apps-repo instance). The drawback of this approach is amount of service instances that you'll have in CF after deployment of the whole MTA.