Skip to Content
0
Jun 22, 2020 at 12:47 PM

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

1528 Views Last edit Jun 22, 2020 at 12:55 PM 2 rev

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!