How to include a ui5-tooling fiori apps within this mta?

[js1972]

I am trying to copy an app built with fiori-tools in vscode (fiori elements app) -- or any custom built sapui5 app that is typically structured with a project folder containing config files and a webapp folder containing the ui5 sources for controllers and views and importantly the component and manifest.json. Typically the ui5-tools will deploy minimized versions of this into a /dist directory.

I can copy the webapp folder inside the HTML5Module folder like this:

Deploying this fails with this error : "[ERROR] Upload application content failed { CODE: '1001' } validation error: manifest.json not found."

It seems that the deployer wants the manifest.json in the HTML5Module root. But doing this breaks the layout of the fiori app.

How are we supposed to proceed and use a real fiori app with this multi-cloud html5 sample project structures? A lot of fiori apps have been built in the WebIDE for example and we went to move them to be an mta project and as a sap-managed fiori app.

It would be awesome to have some documentation on how to embed sapui5 apps that follow the "standard" project layout into these MTA projects.

[IObert]

Hi @js1972,

You get this error because the setup of the sample project requires that the "build" script creates a zip file that contains all web resources. E.g. everything that is in your "webapp" folder. You can make use of the UI5 tooling to write another build script that creates a zip file that contains the needed files (manifest,index,xs-app,views etc)

For this, I recommend checking out this tooling extension. You can see it in action in this project.

[js1972]

Hi again @IObert,

Would it be the /dist folder from a ui5-tools build that we'd want to deploy and not the /webapp folder? i.e.

"zip": "npx bestzip HTML5Module-content.zip dist/*",

Strangely I can't find any reference to ui5-task-zipper in that SAP4KIDS repo you mentioned.

[IObert]

Yes, the dist folder is a superset of the webapp folder. Both will work but it makes more sense to use the dist - the ui5 zipper will actually zip that folder for you. I just noticed that I don't use the tooling extension in the SAP4Kids project, you're right. This project uses the old deployer module - please ignore that for now.

[js1972]

... and for some reason we cannot use npm bestzip as used in these samples?? We need to use the ui5-task-zipper from ui5-tools? I don't get it... But will do some more testing tonight. ;-)

[IObert]

You need to zip the "dist" folder but you are free to choose any tool to do this :)

[js1972]

Zipping the /dist folder only still gives the same error by the deployer that it can't find the manifest.json. Yet in the dist folder I can see the manifest.json as well as xs-app.json and so on...

[IObert]

The manifest needs to be in the "root of the zip". Some zip tools nest items to keep the original folder structure. You can inspect the hierarchy with unzip -l file.zip on Unix systems.

[js1972]

Ok. This a what I thought in my original post. If I pull the manifest out of the webapp folder and put it in the html5module root folder it breaks the best practice app layout for gw fiori app and probably means fiori-tools may not work anymore.

If CF it my needs the manifest.json for the app.id and the in bound navigation settings (for the launchpad/portal service) then maybe we can just create a new manifest.json and put it at the root level which only includes the app id and inbound nav.

Then the fiori app contained in the webapp folder is still whole and fiori-tools and all the UI5 tooling will continue to work as normal for local development and testing.

This is probably the wrong place for this discussion but we developers really need some guidance here.

[js1972]

Hi @IObert, I got it working. There are quite a few little manual steps to do however but I hope that as time goes on these will be automated-away by the tooling (both vscode and BAS).

What I did was:

1. git clone this repo and cd into the managed-html5-runtime-fiori-mta directory
2. code . to open vscode
3. Run the fiori-tool yeoman generator and generate a fiori elements app based on the northwind sample odata service (in vscode type F1 - then start typing "fiori" to find the fiori-tools application generator)
4. Remove the top project directory that was generated by the fiori-tools yeoman generator (this is the name of the project you gave to the generator) so that we just include the webapp folder
5. Move the xs-app.json file inside the webapp folder and adjust the welcomeFile property to point to the generated flpSandbox.html file (or any index.html file you create to launch the app)
6. Add "sap.cloud": { "service": "cloud.service" } to the top-level of the manifest.json file. This is required for the sap-managed html5 service
7. In the manifest.json dataSources section: remove the leading / from the mainService URL to make it relative. If I don't do this I get "bad gateway" errors on all odata calls
8. Add the crossNavigation - inbound section so that the Portal/Launchpad can create a tile for the app
9. Adjust the html file to use the sapui5 runtime from the CDN and not locally served (its faster during development to use UI5 locally so this would be a step you want to change just for deployment - may be able to do this with a custom ui5 build step)
10. Adjust the fiori apps descriptor (package.json) to zip the /dest folder for deployment by the html5 app deployer (described in the mta file) which is created by the UI5-tooling as follows. See the build and zip steps below:

"scripts": {
        "start": "fiori run --open test/flpSandbox.html#masterDetail-display",
        "start-mock": "fiori run --open test/flpSandboxMockServer.html#masterDetail-display",
        "start-local": "fiori run --config ./ui5-local.yaml --open test/flpSandboxMockServer.html#masterDetail-display",
        "build": "npm run clean && rimraf dist && ui5 build -a --include-task=generateManifestBundle generateCachebusterInfo && npm run zip",
        "deploy": "fiori add deploy-config",
        "zip": "cd dist && npx bestzip ../HTML5Module-content.zip *",
        "clean": "rimraf HTML5Module-content.zip manifest-bundle.zip"
    },

What is most important here is that the manifest.json and xs-app.json are in the root of the zip file which is deployed to CF. See the zip command above where we ensure this. If the manifest.json is not in the root of the deployed zip file you will get cf deploy errors that say it cannot find the manifest.json.

After doing these steps, we can successfully:

• Continue to build locally with fiori-tools, adjusting annotations and running locally with npm start and also running unit tests etc.
• Use npm run deploy to deploy to the CF runtime as a sap-managed html5 app
• Configure the deployed app into the Launchpad or Portal service

Thanks for your assistance here Marius. ;-)

ps. When running cf html5-list -d -u the app shows a url of: https://sap.com/DUMMY_URL - any idea why? Think I'll ask on the html5 cf plugin repo.

[vobu]

"holter-di-polter"-deployment style, we'd say in German to this :) as you said, hoping for cli- and vscode-plug-in-automation here. and for the next blog post by @IObert showing what we're all doing wrong here :)

[IObert]

First of all, I'm glad you made it run!

I'm not sure why cf html5-list -d -u shows a dummy URL but I guess it's because they wanted to print anything (and there is no URL because there is no approuter).

In case others find this post, I want to state this repo is a sample code repo to see how other projects work. It's not intended to copy existing Fiori projects in this folder because I think you'd be easier off to make changes to your Fiori project than to make changes to this sample here. But I'm glad it worked anyway. If you want to insert other projects, this tutorial might be able to help you (but again: not the intended way of doing this). If you want to deploy a Fiori App from the Fiori tool to SAP Cloud Platform, please use the npm run deploy script that is generated. Currently, this script does not support the managed approach but I'm sure this will come in the future.

[js1972]

fyi. the issue with cf html5-list -d -u was a bug that is fixed in the latest 1.43 version

[nicoschoenteich]

I just came across this years later, as I also had the manifest.json not found error. If you encounter the same issue it might be worth checking if your manifest.json is REALLY at the root of your zip file. You be might zipping a folder containing the app (and the manifest.json), rather than cd'ing into the folder and zipping all contents into an output folder. The difference is not visible to the naked eye, meaning when you unzip via the Mac OS Finder (or any other GUI), but can be inspected via unzip -l file.zip (or some Windows equivalent).