SAP-samples/cloud-cap-samples

Empty Fiori page after starting

alexlopez3102 opened this issue · 18 comments

I'm not able to test the project
After npm install and cds watch if I click on any webapp like
https://port4004-workspaces-ws-kxwrg.us10.trial.applicationstudio.cloud.sap/products/webapp/index.html
Empty tab is displayed no data no fields at all

chgeo commented

Please provide step by step instructions to reproduce the issue.

I guess it's an issue with the current SAPUI5 1.107.0 version. With 1.107.1 the Launchpad Mock works again.

This is the complete log of npm install
npm_install_log.txt

This is what I see when I click on products webapp
Output Runing Products App

Have you checked the console output of the development tools?

Could it be related with the "destination" to add? I have the issue that during deployment of the Fioir App I will be asked for "Destination Name" but I can't find any useful documentation what this should be.
So in all. CAP Service itself and database works. Fiori app is not deployed at all.

chgeo commented

@sfdfklskldf I am inclined to treat comments by sfdfklskldf username as spam ;)
Any chance you can use a different one?

Why should it be spam? It is just a random name (try to find a nice one that is not occupied).

But the issue is real or not?
In https://cap.cloud.sap/docs/guides/deployment/to-cf it is described how to deploy.
The screenshot in this ticket looks similar to mine.
Local (I am not using BAS cloud!) but BAS local installation with plugins. I see my Fiori App in the overview screen.
mta.yaml does not describe the Fiori app to upload.

If I run:

Adding deploy-config to the project.
info Add:Deploy-config Using: @sap/fiori:deploy-config
? Destination name ()

I have no idea what "destination" is meant here.
No hint nothing.

chgeo commented

If I run:

Adding deploy-config to the project.
info Add:Deploy-config Using: @sap/fiori:deploy-config
? Destination name ()

I am afraid I don't know which tool you use. I guess it's some Fiori tool. So, what did you do that produces the output above?

chgeo commented

Why should it be spam? It is just a random name

First and last name in your profile would be nice.

I am using the SAP Template Wizard inside BAS (local installation). Technically it will be this:

    "scripts": {
        "deploy-config": "npx -p @sap/ux-ui5-tooling fiori add deploy-config cf"
    },

This seems to setup typical SAPUI5 build process (creating dist folder and so on) and creates a xs-app.json file inside the folder of this app.
That looks like this:

$ cat app/appname/xs-app.json

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/admin/(.*)$",
      "target": "/admin/$1",
      "destination": "destinationnametoenter", <<- what is this for?
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

There is also an xs-app.json in the app folder:

$ cat app/xs-app.json

{
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/app/(.*)$",
      "target": "$1",
      "localDir": ".",
      "authenticationType": "xsuaa",
      "cacheControl": "no-cache, no-store, must-revalidate"
    },
    {
      "source": "^/(.*)$",
      "target": "$1",
      "destination": "srv-api",
      "authenticationType": "xsuaa",
      "csrfProtection": true
    }
  ],
  "welcomeFile": "/domainappname" <-- here the domain like com.sap.appname is used without dots
}

After mta deployment to cloud foundry I just see the GET /domainappname not available.

chgeo commented

Alright, I have pinged colleagues w/ expertise in this area. Let's see.

My assumption would be that the GUI part is part of the main service of a CAP application. At least this is how I understood the CAP documentation?
https://cap.cloud.sap/docs/get-started/in-a-nutshell
So if I create "cds init example" and add "app/vue/index.html" I would assume the frontend could be reached over the url of the "example" service deployed?
Is this assumption correct?
Meanwhile I fear the Fiori deployment requires some launchpad configuration on BTP cloud and uses HTML5 repository?

chgeo commented

My assumption would be that the GUI part is part of the main service of a CAP application
So if I create "cds init example" and add "app/vue/index.html" I would assume the frontend could be reached over the url of the "example" service deployed?

Yes, the app folder is served in any CAP app started with cds run/serve.

However, SAP-style deployment layouts (MTA) separate UI files from the server, so that this folder isn't packaged by default. There, either the html5 repo (plus a centrally-managed approuter) serve the files, or a standalone approuter that is deployed along with the application. Approuter always comes with its xs-app.json file defining the routes.

So, if you want to keep it simple and don't need FLP, you can package the app folder by a post-build step into the deploy archive.
If you need FLP, however, you need to go the full way using approuter and/or html5 repo.

My first try would be to figure out to pack it with the CAP stuff.

Happy new year. It took some time but I still can't deploy the CAP project. As soon as I pack a Fiori app with it it does no longer work. Is there somewhere an example app with a Fioir UI that I could clone from git and deploy it?
So that the UI is part of CAP service?

Happy new year. I would suggest you work through Deploying a CAP based Fiori app to a central Launchpad. If you use my branch https://github.com/gregorwolf/central-launchpad-cap/tree/add-authentication you can try it also with authentication.

I also assembled a little end-to-end scenario that might be useful... very simple but end to end with Fiori UI.
https://github.com/RizInno/cds-customer-stepbystep