Fiori Elements issues faced in VSCODE; better stick to BAS

[P281512]

Returned to trying out Fiori Elements after 2-3 months in
a) VSCODE in my PC and b) BAS service in BTP trial
Experience in VSCODE not good

Existing projects were working fine but fresh project crashed with error when I tried npm run start

⚠️ Process Failed With Error
Error Message:
Invalid ui5.yaml configuration for project @sap/ux-ui5-tooling
Unsupported "specVersion"
C:\Users\sssca\projects\zpawan1\node_modules\@sap\ux-ui5-tooling\ui5.yaml:2
1: # https://sap.github.io/ui5-tooling/pages/extensibility/CustomServerMiddleware/
2: specVersion: '3.0'
^
Your UI5 CLI installation might be outdated.
Supported specification versions: "2.6", "2.5", "2.4", "2.3", "2.2", "2.1", "2.0", "1.1", "1.0", "0.1"
For details see: https://sap.github.io/ui5-tooling/pages/Configuration/#specification-versions
For details, execute the same command again with an additional '--verbose' parameter

After comparing existing yamls and jsons concluded that upgrade in Application generator needs v3 of SAP-UI5

Searching hit https://sap.github.io/ui5-tooling/v3/updates/migrate-v3/

npm i --save-dev @ui5/cli@latest

Next faced a seemingly insurmountable hurdle error
Error Message: Failed to add extension sap-fe-mockserver to graph: An extension with that name has already been added

After some searching found solution by frank.kohler

https://blogs.sap.com/2022/04/16/sap-business-application-studiobas-deploy-ui5-application-to-the-se...

“I found the solution. By mistake I used the deprecated version:
https://www.npmjs.com/package/@sap/ux-ui5-fe-mockserver-middleware
using this version worked fine:
https://www.npmjs.com/package/@sap-ux/ui5-middleware-fe-mockserver
npm uninstall @sap/ux-ui5-fe-mockserver-middleware
npm install @sap-ux/ui5-middleware-fe-mockserver”

My issue is that for each project I have to do all the 3 commands

npm i --save-dev @ui5/cli@latest
npm uninstall @sap/ux-ui5-fe-mockserver-middleware
npm install @sap-ux/ui5-middleware-fe-mockserve

Hope someone can help me find a permanent fix that allows Right First Time

---

Experience in BAS very good and no quirks

Am documenting the steps in brief
I had crossed my 90 days and SAP had deleted BTP trial and BAS
A good thing as this helps on retrace and practice the steps

I started the rcscc_daemon and configured connector
https://blog.surges.eu/sap-abap-1909-developer-edition-connect-btp-trial-via-sap-cloud-connector/ this link was best for my setup

Faced a lot of hurdles in BTP cloud connector integration with BAS till I read and implemented https://developers.sap.com/tutorials/cp-portal-cloud-foundry-gateway-connection.html

http://s4hanacen:50000 is my virtual host

## Export of connector
#Password=<< Existing password/certificate removed on export >>
#
#Wed Aug 30 19:52:59 UTC 2023
Description=S4HANACEN
Type=HTTP
HTML5.Timeout=60000
HTML5.DynamicDestination=true
Authentication=BasicAuthentication
WebIDEUsage=odata_abap,dev_abap
Name=CEN
WebIDEEnabled=true
ProxyType=OnPremise
URL=http\://s4hanacen\:50000
sap-client=001
User=DEVELOPER
WebIDESystem=Gateway

Till I got this right I could not see my system CEN in BAS Application Generator

No issues with BAS except no BUSY CIRCLE for 5-10 seconds before specifying folder etc
till black “Finish” button turns blue

Overall smooth easy to use and no glitches apart from sluggishness that is understandable as it goes through local proxy BTP connector to target

package.json of BAS indicates a different YO working!
Please see my reply to Alex who replied promptly and set me reading
This means that VSCODE is not maintained with same attention as BAS
Seems to me it is best not waste time in VSCODE and use BAS alone

[P281512 · Accepted solution]

Nothing pleases me more than answering myself in detail!

The real credit goes to Alex who pointed two things

He uses @sap/generator-fiori 1.10.5 and he ses UI5.yaml specVersion: "2.6"

IN BAS

I found npm list -g

command does not work

/usr/bin/find /extbin/globals/pnpm/5/.pnpm/ -iname "*generator-fiori*"

/extbin/globals/pnpm/5/.pnpm/registry.npmjs.org+@sap+generator-fiori@1.10.6

yo --version Shows 4.1.0

IN VSCODE

npm list -g works

@sap/generator-fiori@1.5.2

yo@4.3.1

So I tried

npm uninstall -g @sap/generator-fiori

npm install -g @sap/generator-fiori

I was advised to visit URL https://sap.github.io/ui5-tooling/v3/updates/migrate-v3/

I had already installed latest @ui5/cli

I tried Application Generator

AND LO AND BEHOLD it was a perfect result no hiccups

Package.json was same as in BAS and UI5.yaml specVersion: "2.6"

It seem Theia is abandoned

https://blogs.sap.com/2022/11/15/sap-business-application-studio-now-powered-by-code-oss/

But still there are “glitches”

npm list -g should work

Regards

Jayanta

[AlexNecula]

Hi,

I do not experience the issues you mentioned when creating a fresh project.

Did you install SAP Fiori Tools - Extension Pack? This comes with everything you need.

It seems to me that the problem is coming from the generator. I use @sap/generator-fiori which is the default one when you install the extensions.

Also, make sure you have the latest versions for the VS extensions.

Last time I have generated a project, it did it with specVersion: "2.6" and "@sap-ux/ui5-middleware-fe-mockserver": "2" and I had no error.

Alex

[jlongie]

A number of sample projects that you can use as a reference guide;

https://github.com/SAP-samples/fiori-tools-samples/

These projects should have the latest versions working in both BAS and VSCode, tested with node version v18.

John

[panpawel]

Thanks,

Your solution save my day!
BR

Pawel

[P281512]

Thanks Alex

BAS where I tried with no glitches
UI5.yaml has specVersion: "2.6"
In VSCODE UI5.yaml specVersion: '2.4'

BAS package.json is quite different from VSCODE

    "name": "zbasps1",
    "version": "0.0.1",
    "private": true,
    "description": "A Fiori application.",
    "keywords": [
        "ui5",
        "openui5",
        "sapui5"
    ],
    "main": "webapp/index.html",
    "dependencies": {},
    "devDependencies": {
        "@ui5/cli": "^3.0.0",
        "@sap/ux-ui5-tooling": "1",
        "@sap/ux-specification": "UI5-1.117",
        "@sap-ux/ui5-middleware-fe-mockserver": "2",
        "rimraf": "^3.0.2",
        "ui5-task-flatten-library": "0.2.5"
    },
    "scripts": {
        "start": "fiori run --open \"test/flpSandbox.html?sap-client=001&sap-ui-xx-viewCache=false#zjnczbasps1-tile\"",
        "start-local": "fiori run --config ./ui5-local.yaml --open \"test/flpSandbox.html?sap-client=001&sap-ui-xx-viewCache=false#zjnczbasps1-tile\"",
        "build": "ui5 build --config=ui5.yaml --clean-dest --dest dist",
        "deploy": "npm run build && fiori deploy --config ui5-deploy.yaml && rimraf archive.zip",
        "deploy-config": "fiori add deploy-config",
        "start-noflp": "fiori run --open \"index.html?sap-client=001&sap-ui-xx-viewCache=false\"",
        "start-mock": "fiori run --config ./ui5-mock.yaml --open \"test/flpSandbox.html?sap-client=001&sap-ui-xx-viewCache=false#zjnczbasps1-tile\"",
        "start-variants-management": "fiori run --open \"preview.html?&sap-client=001&sap-ui-xx-viewCache=false&fiori-tools-rta-mode=true&sap-ui-rta-skip-flex-validation=true#preview-app\"",
        "undeploy": "fiori undeploy --config ui5-deploy.yaml",
        "deploy-test": "npm run build && fiori deploy --config ui5-deploy.yaml --testMode true"
    },
    "sapux": true,
    "sapuxLayer": "CUSTOMER_BASE",
    "ui5": {
        "dependencies": [
            "ui5-task-flatten-library"
        ]
    }

In fact I had SAP Fiori Tools - Extension Pack v1.10.5
Reinstalled same thing but did not help
After you pointed out @sap/generator-fiori I searched and found
README.md has @sap/generator-fiori-elements
npmjs has only @sap/generator-fiori - I read about it
Very interesting; will try direct yo tomorrow

If you see your package.json extract yours may match my previous happy version

    "devDependencies": {
        "@ui5/cli": "^2.14.1",
        "@ui5/fs": "^2.0.6",
        "@ui5/logger": "^2.0.1",
        "@sap/ux-ui5-tooling": "1",
        "rimraf": "3.0.2",
        "@sap/ux-specification": "UI5-1.109",
        "@sap/ux-ui5-fe-mockserver-middleware": "1"
    },
    "ui5": {
        "dependencies": [
            "@sap/ux-ui5-tooling",
            "@sap/ux-ui5-fe-mockserver-middleware"
        ]
    }

But after my 3 npm commands what is working has package.json extract that is quite different

  "devDependencies": {
    "@sap/ux-specification": "UI5-1.117",
    "@sap/ux-ui5-tooling": "1",
    "@ui5/cli": "^3.5.0",
    "@ui5/fs": "^2.0.6",
    "@ui5/logger": "^2.0.1",
    "rimraf": "3.0.2"
  },
  "ui5": {
    "dependencies": [
      "@sap/ux-ui5-tooling",
      "@sap/ux-ui5-fe-mockserver-middleware"
    ]
  },
  "dependencies": {
    "@sap-ux/ui5-middleware-fe-mockserver": "^2.1.117"
  }

Thanks again Alex.
Request you try in BAS and see for yourself the new version that works smoothly and is different from VSCODE
Regards
Jayanta