Setup Local Dev Environment for Fiori/UI5 Development on Windows

Considerations / Remarks

• Done on Fresh Win 10/11 installation, nothing installed on the system so far
• I need templates for application generation and Source Code Management like Git
• 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 all the time NodeJS version is not manageable

Steps

1. Download and Install VSCode
2. Install proper version of NodeJS. 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 SAP Fiori Tools – Service Modeler for example
   
   
   
   • A. 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. The update happens the same way.
     XOR
   • B. installation with nvm
     Install nvm for Windows.
     Attention, you need to cleanup your current nodejs installation, check the explanation on nvm site.
     You can also switch nvm completely off later, if this is not the way You want to work.
     • 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
3. Install UI5 CLI (as of 20250909) previously UI5 Tooling
   npm install --global @ui5/cli
   Hint: using nvm every package you install is installed into the currently selected NodeJS version only. If you later switch to another version, you must install the required packages again.
4. Install SAP Fiori Tools – UI5 Tooling
   npm install --global @sap/ux-ui5-tooling
5. Install yo (Yeoman), and generator templates by npm for Fiori
   npm install -g yo
npm install -g mta
npm install -g mbt
npm install -g @sap/generator-fiori
   
6. In case You want to do Freestyle UI5 development later, you can also install Easy UI5 Generator providing some more useful templates, which helps you to generate UI5 application project files via Yeoman
   npm install -g yo generator-easy-ui5.
   
   Hint: your npm packages can be listed with npm list -g --depth=0 and updated with npm update -g
7. Install Fiori Toolkit Extension Pack in VS Code, it will install generator templates for yo implicitly if that is not done in previous step already (generator-fiori)
   
   
8. 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, GitLens is also very useful VSCode Extension
   There are also GUI clients for Git Windows. They provide graphical representation about branch lifecycles, source code comparison visualizations and comments

You need some more

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

ES Lint

ES 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.

UI5 Linter

The UI5 Best Practices which ensure your app will be compatible with UI5 2.0 are partly covered by the UI5 Linter

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…

There is a big extension pack including SAP official extensions and other community goodies, like connection and controlling your BAS workspace from Your local VSCode instance.