Setup Local Dev Environment for Fiori/UI5 Development on Windows 10
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
- Download and Install VSCode
- Install nvm for Windows
- Install proper version of Nodejs using nvm
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 Fiori Tools.
Attention, you need to cleanup your current nodejs setup, check the explanation on nvm site. You can also decide to have static nodejs version installation, and manually installing nodejs with a given version. You might be restricted lateron due of this. 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
- 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 @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
- 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)
- Install JSDoc Comments VSCode Extension
- 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
VSCode without Git installation
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.
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…