cancel
Showing results for 
Search instead for 
Did you mean: 

can't see UI after deployment in BTP

satya-dev
Participant
0 Kudos

I created a CAP fullstack application, I ran locally and see the web link. After deployment to cloudfoundry I can not application anywhere.
Please find my GIT repo.

Accepted Solutions (0)

Answers (1)

Answers (1)

Ivan-Mirisola
Product and Topic Expert
Product and Topic Expert

Hi satya.dwivedi,

You are missing some important destinations on your mta file as well as definitions for the ui5 application.

Here are the corrected files:

app\sampleui\webapp\manifest.json

{
  "_version": "1.59.0",
  "sap.cloud": {
    "public": true,
    "service": "sampleui.service"
  },
  "sap.app": {
....
}
NOTE: here you were missing the "sap.cloud" directive which is required for the Work Zone Std to be able to fetch the metadata for your application in the html5 repository. It has to be unique for each application across your subaccount.You were also missing some important destination settings on your MTA.yaml.I shared here the entire file simply because it would be easier for you to get all the changes I've made.
_schema-version: "3.1"
ID: SampleApp
description: A simple CAP project.
version: 1.0.0
modules:
- name: SampleApp-destinations
  type: com.sap.application.content
  requires:
    - name: SampleApp-auth
      parameters:
        service-key:
          name: SampleApp-auth-key
    - name: SampleApp-repo-host
      parameters:
        service-key:
          name: SampleApp-repo-host-key
    - name: srv-api
    - name: SampleApp-destination-service
      parameters:
        content-target: true
  parameters:
    content:
      instance:
        destinations:
          - Authentication: OAuth2UserTokenExchange
            Name: SampleApp-app-srv
            TokenServiceInstanceName: SampleApp-auth
            TokenServiceKeyName: SampleApp-auth-key
            URL: '~{srv-api/srv-url}'
            sap.cloud.service: sampleui.service
          - Name: SampleApp-repo-host
            ServiceInstanceName: SampleApp-repo-host
            ServiceKeyName: SampleApp-repo-host-key
            sap.cloud.service: sampleui.service
          - Authentication: OAuth2UserTokenExchange
            Name: SampleApp-auth
            ServiceInstanceName: SampleApp-auth
            ServiceKeyName: SampleApp-auth-key
            sap.cloud.service: sampleui.service
        existing_destinations_policy: update
  build-parameters:
    no-source: true

- name: SampleApp-srv
  type: nodejs
  path: gen/srv
  requires:
  - name: SampleApp-db
  - name: SampleApp-auth
  provides:
  - name: srv-api
    properties:
      srv-url: ${default-url}
  parameters:
    buildpack: nodejs_buildpack
  build-parameters:
    builder: npm
- name: SampleApp-db-deployer
  type: hdb
  path: gen/db
  requires:
  - name: SampleApp-db
  parameters:
    buildpack: nodejs_buildpack
- name: SampleApp-app-content
  type: com.sap.application.content
  path: .
  requires:
  - name: SampleApp-repo-host
    parameters:
      content-target: true
  build-parameters:
    build-result: resources
    requires:
    - artifacts:
      - comsamplesampleui.zip
      name: comsamplesampleui
      target-path: resources/
- name: comsamplesampleui
  type: html5
  path: app/sampleui
  build-parameters:
    build-result: dist
    builder: custom
    commands:
    - npm install
    - npm run build:cf
    supported-platforms: []
resources:
- name: SampleApp-db
  type: com.sap.xs.hdi-container
  parameters:
    service: hana
    service-plan: hdi-shared
- name: SampleApp-auth
  type: org.cloudfoundry.managed-service
  parameters:
    config:
      tenant-mode: dedicated
      xsappname: SampleApp-${org}-${space}
    path: ./xs-security.json
    service: xsuaa
    service-plan: application
- name: SampleApp-repo-host
  type: org.cloudfoundry.managed-service
  parameters:
    service: html5-apps-repo
    service-plan: app-host
- name: SampleApp-destination-service
  type: org.cloudfoundry.managed-service
  parameters:
    config:
      HTML5Runtime_enabled: true
      init_data:
        instance:
          destinations:
          - Authentication: NoAuthentication
            Name: ui5
            ProxyType: Internet
            Type: HTTP
            URL: https://ui5.sap.com
          existing_destinations_policy: update
      version: 1.0.0
    service: destination
    service-name: SampleApp-destination-service
    service-plan: lite
parameters:
  deploy_mode: html5-repo
  enable-parallel-deployments: true
build-parameters:
  before-all:
  - builder: custom
    commands:
    - npx cds build --production
NOTE: you had a "service-name" directive on the resource "SampleApp-repo-host" with another name "SampleApp-html5-srv". And that resource has as dependent on the destination module named "SampleApp-destinations" (which was missing). So I removed the service name to make things a little bit simpler and easy to follow. NOTE2: under the service resource "SampleApp-destination-service" you have the directive "HTML5Runtime_enabled" set to false (which is also required).NOTE3: The entire module named "SampleApp-destinations" was missing here. You must add destinations to at least the uaa service and the repo service for your application. Here there is also another destination for the srv's URL. Each destination will be created under the destinations resource and have the corresponding OAuth2 User Token Exchange. The deployer takes care of grabbing the service key for each of the services and adding the destination with additional properties so all authentication is in place. Without it, Work Zone is unable to reach your application simply because it doesn't understand where to get it from.On the file SampleApp\package.json, I've defined the node version (minimum to the latest version of CDS) as well as the settings for production so it generates the correct artifacts for hana cloud:
{
    "name": "SampleApp",
    "version": "1.0.0",
    "description": "A simple CAP project.",
    "repository": "<Add your repository here>",
    "license": "UNLICENSED",
    "private": true,
    "dependencies": {
        "@sap/cds": "^7",
        "@sap/cds-hana": "^2",
        "@sap/xssec": "^3",
        "express": "^4",
        "passport": "^0"
    },
    "devDependencies": {
        "@cap-js/sqlite": "^1",
        "@sap/cds-dk": "^7",
        "@sap/ux-specification": "^1.120.1",
        "rimraf": "^3.0.2"
    },
    "engines": {
        "node": "^18"
    },    
    "scripts": {
        "start": "cds-serve",
        "watch-sampleui": "cds watch --open sampleui/webapp/index.html?sap-ui-xx-viewCache=false",
        "undeploy": "cf undeploy SampleApp --delete-services --delete-service-keys --delete-service-brokers",
        "build": "rimraf resources mta_archives && mbt build --mtar archive",
        "deploy": "cf deploy mta_archives/archive.mtar --retries 1"
    },
    "cds": {
        "requires": {
            "[production]": {
                "auth": "xsuaa",
                "db": {
                    "kind": "hana-cloud"
                }
            }
        }
    }
}<br>
Don't forget to add the following to your '.gitignore" file as well:
dist/
resources/
app/*/package-lock.json
*.zip
*.mta
Best regards,
Ivan