Considerations / Remarks
  • Done on Fresh Win 10 installation, nothing installed on the system so far
  • I need templates for application generation and Source Code Management like Git
  • VSCode unfortunately provides no support for Adaptation project and WYSIWYG layout editor by Fiori Toolkit, like Business Application Studio(BAS) does. This time no additional feature of BAS is required, I just want to use it for greenfield Fiori development. If you want to do adaptations, you have to go for BAS (decision point) – 16.07.2021
  • I need to connect and deploy to onPremise Systems (or BTP ABAP Environment)
  • I may need to deploy to systems lower than 7.53, due I want older systems become benefit of Fiori Elements using local annotations
  • I want somehow to switch nodejs versions used by Fiori Toolkit dynamically, due variety of tools require variety of dedicated nodejs version, and reinstalling nodejs version is not manageable
Steps
  • Download and Install VSCode
  • Install proper version of Nodejs using nvm or without. For Fiori Toolkit, the minimum version is 10 (on 20.07.2021). Check the actual required version in VSCode/Extensions panel before installing. Look for Fiori Tools.
    • standalone installation without nvm
      You can decide to have a static nodejs version installation instead of operating it using nvm. In case You do not plan to develop anything else with Nodejs, just UI5/Fiori you can simply install nodejs executable.
    • installation with nvm
      Install nvm for Windows.
      Attention, you need to cleanup your current nodejs setup, check the explanation on nvm site.
      You can also switch nvm completely off later, if this is not the way You want to work.
kep Setup Local Dev Environment for Fiori/UI5 Development on Windows 10/11
  • I installed latest stable verson in PowerShell window executing following command:
    nvm install 14.17.3
    Then set this version to be used by windows using following command in PowerShell
    nvm use 14.17.3
  • Install yo (yeoman), and generator templates by npm for Fiori
    Now the currently used NodeJS version is the above one. Every package you install is installed in this version only. If you later swicth to another version, you must install the required packages again.
    npm install -g yo
    npm install -g mta
    npm install -g mbt
    npm install -g @sap/generator-fiori
  • In case You want to do Freestyle UI5 develoment lateron, you can install some more useful templates, which helps you to generate UI5 application project files
    npm install -g yo @sapui5/generator-sapui5-templates
    npm install -g yo generator-easy-ui5

  • for freestyle development UI5 Tooling is also recommended
    npm install --global @ui5/cli
  • Install Fiori Toolkit Extension Pack in VS Code, it will install generator templates for yo implicitly if is not done in previous step already (generator-fiori)
kep-2-1024x375 Setup Local Dev Environment for Fiori/UI5 Development on Windows 10/11
  • Install JSDoc Comments VSCode Extension, built in support there just type in /** 😉
  • npm install --global @sap/ux-ui5-tooling
  • Install Git for Windows
    VS Code will leverage your machine’s Git installation, so you need to install Git first before you get these features.
    Read more about Version Control in VS Code.
    Checkout GUI clients for Git Windows, which provide graphical representation about branch lifecycles, source code comparison visualizations and comments
kep-3 Setup Local Dev Environment for Fiori/UI5 Development on Windows 10/11

VSCode without Git installation

Outlook

Deployment to older releases

SAP removed SAP WebIDE Fullstack from SAP Store. Customers still have older systems NW < 7.53, therefore deployment from BAS or VSCode is not possible using (abap-deploy), and Fiori elements never seen there.
Even SAP has plenty of Freestyle applications running on S/4HANA, which can be enhanced within the confines of extension project only. But extension projects are supported in WebIDE only. Stucked at this point ?
Old deployment service for lower systems can help to implement greenfield solutions in VSCode and deploy to releases below NW 7.53.
Someone implemented a plugin for that called NW ABAPUI5 Uploader. It makes sense to think about usage of this tool.
You can decide for SAP WebIDE Personal Edition alternatively, but it has not been updated for a while, and will never be!

Linting

UI5 Linter comes handy for prehistoric browser support. How long we have to support such and go for modern JS…? Good luck that we don’t still have Netscape Navigator…
SAP defined other custom rules as well to cut down Your plain JS developer mind in UI5 context
Prerequisite is to install: ESLint

ESLint for VSCode

You can configure the ESLint feature on save in VSCode with config parameter: editor.codeActionsOnSave. One of that is fixAll.eslint.

Further VSCode extensions

Why not to complement the base setup with complementary tools ? You can search for additional extensions, which might support Your work. Type in UI5, ABAP, CDS…

kep-4 Setup Local Dev Environment for Fiori/UI5 Development on Windows 10/11

Share this content: