Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty Fiori page after starting #417

Open
alexlopez3102 opened this issue Nov 2, 2022 · 18 comments
Open

Empty Fiori page after starting #417

alexlopez3102 opened this issue Nov 2, 2022 · 18 comments

Comments

@alexlopez3102
Copy link

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
Copy link
Member

chgeo commented Nov 2, 2022

Please provide step by step instructions to reproduce the issue.

@gregorwolf
Copy link
Contributor

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

@chgeo chgeo changed the title cloud-cap-samples -b openSAP-week3-unit2 Empty Fiori page after starting Nov 2, 2022
@alexlopez3102
Copy link
Author

This is the complete log of npm install
npm_install_log.txt

@alexlopez3102
Copy link
Author

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

@gregorwolf
Copy link
Contributor

Have you checked the console output of the development tools?

@sfdfklskldf
Copy link

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
Copy link
Member

chgeo commented Dec 5, 2022

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

@sfdfklskldf
Copy link

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
Copy link
Member

chgeo commented Dec 5, 2022

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
Copy link
Member

chgeo commented Dec 5, 2022

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

First and last name in your profile would be nice.

@sfdfklskldf
Copy link

sfdfklskldf commented Dec 5, 2022

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
Copy link
Member

chgeo commented Dec 6, 2022

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

@sfdfklskldf
Copy link

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
Copy link
Member

chgeo commented Dec 6, 2022

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.

@sfdfklskldf
Copy link

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

@sfdfklskldf
Copy link

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?

@gregorwolf
Copy link
Contributor

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.

@MartinStenzig
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants