cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to consume local resources path in ui5 app with SAP BAS?

Go to solution
Jsousa
Participant

on ‎06-22-2020 1:47 PM

0 Kudos

Hello!

I'm trying to run one app from SAP Business Application Studio loading the ui5 bootstrap src resource path from locally:

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/resources/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />


  <title>fhirApp</title>

  <script id="sap-ui-bootstrap" src="resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3" data-sap-ui-resourceroots='{
        "sample.cloud.fhirApp": "./"
      }' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatVersion="edge"
    data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
    </script>
</head>

<body class="sapUiBody">
  <div data-sap-ui-component data-name="sample.cloud.fhirApp" data-id="container"
    data-settings='{"id" : "fhirApp"}'>
  </div>
</body>

</html>

I've installed the dependencies in package.json:

{
  "name": "fhirApp",
  "version": "0.0.1",
  "scripts": {
    "start": "ui5 serve --config=uimodule/ui5.yaml  --open index.html",
    "build:ui": "run-s  build:uimodule",
    "test": "run-s lint karma",
    "karma-ci": "karma start karma-ci.conf.js",
    "clearCoverage": "shx rm -rf coverage",
    "karma": "run-s clearCoverage karma-ci",
    "lint": "eslint .",
    "build:mta": "mbt build",
    "deploy:cf": "cross-var cf deploy mta_archives/fhirApp_$npm_package_version.mtar",
    "deploy": "run-s build:mta deploy:cf",
    "serve:uimodule": "ui5 serve --config=uimodule/ui5.yaml",
    "build:uimodule": "ui5 build --config=uimodule/ui5.yaml --clean-dest --a --dest deployer/resources/uimodule --include-task=generateManifestBundle "
  },
  "devDependencies": {
    "shx": "^0.3.2",
    "@ui5/cli": "^2.2.5",
    "ui5-middleware-livereload": "^0.3.0",
    "karma": "^5.0.9",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "^2.0.2",
    "karma-ui5": "^2.1.2",
    "npm-run-all": "^4.1.5",
    "eslint": "^7.1.0",
    "ui5-middleware-cfdestination": "^0.2.0",
    "ui5-task-zipper": "^0.3.0",
    "cross-var": "^1.1.0",
    "mbt": "^1.0.14"
  },
  "ui5": {
    "dependencies": [
      "openui5-fhir",
      "ui5-middleware-livereload",
      "ui5-middleware-cfdestination",
      "ui5-task-zipper"
    ]
  },
  "dependencies": {
    "openui5-fhir": "^1.0.5",
    "@openui5/sap.m": "^1.75.0",
    "@openui5/sap.ui.core": "^1.75.0",
    "@openui5/themelib_sap_fiori_3": "^1.75.0",
    "@openui5/sap.uxap": "^1.75.0"
  }
}

And I've referenced my webapp folder in xs-app.json file:

{
  "welcomeFile": "samplecloudfhirApp/index.html",
  "authenticationMethod": "none",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/samplecloudfhirApp/(.*)$",
      "target": "$1",
      "localDir": "../uimodule/webapp",
      "authenticationType": "xsuaa"
    },
    {
      "source": "^/myDest/(.*)$",
      "target": "$1",
      "authenticationType": "none",
      "destination": "myDest"
    }
  ]
}

But when I run the app I get the following error:

GET request to /resources/sap-ui-core.js completed with status 404 - ENOENT: no such file or directory, stat '/home/user/projects/sample.cloud.fhirApp/uimodule/webapp/resources/sap-ui-core.js'#

If I link the resources to remote libraries (https://sapui5.hana.ondemand.com/resources/sap-ui-core.js) works fine but I can't use the additional libraries referenced in package.json (e.g. openui5-fhir).

In VS Code the app works fine with local resource path.. But I'm trying to develop directly in SAP BAS using approuter..

Could you please help me with this?

Thanks in advance!

Show replies
Show replies
mariusobert
Developer Advocate
Developer Advocate
‎06-22-2020 6:02 PM
0 Kudos

With which command do you start the local webserver?

Jsousa
Participant
‎06-22-2020 6:05 PM
0 Kudos 
npm run local

from approuter folder. Thanks for answering!

Answer

Accepted Solutions (1)

Accepted Solutions (1)

mariusobert
Developer Advocate
Developer Advocate
‎06-23-2020 9:25 AM
0 Kudos

Given your answer from the comment, this explains this behavior. The "run local" script is an old relict I was planning to remove anyway.

Please use "ui5 serve" from the project root going forward. In case you want to use destinations, you need to include the ui5 middleware ui5-middleware-cfdestination

Show replies
Show replies
Jsousa
Participant
‎06-23-2020 10:48 AM
0 Kudos

Thanks Marius. Now the local resources are loaded! I've a question about destination because I've created a simple HTML destination in CF and I've bounded the destination service to my app (.env file in the approuter folder). I'm trying to add the destination to my xs-app.json:

{
      "authenticationType": "none",
      "csrfProtection": false,
      "source": "^/httpDest/(.*)$",
      "target": "$1",
      "destination": "httpDest"
}
<br>

But it fails because destination is not found:

Error Message:
xs-app.json/routes/0: Format validation failed (Route references unknown destination "httpDest")<br>

Do you know what's going on?

Jsousa
Participant
‎06-23-2020 11:27 AM

Regarding my last comment the error was in my ui5.yaml file. My ui5-middleware-cfdestination destination name wasn't the same.

Thanks a lot for your help

Answers (0)

Ask a Question