Migrating Fiori Apps from WebIDE to VS Code for Development
Since WebIDE will no longer be supported by SAP in the future, current Fiori Apps need to be migrated to the newer generation development environments like Visual Studio Code (VS Code onwards) or the Business Application Studio.
The source code for a Fiori Extension project (My Timesheet V3 ) needs to be migrated from its current development environment (WebIDE) to VS Code. The App must be runnable and a versioning control system must be used to track all changes from the very beginning of the migration.
As a starting point, the following items are needed to carry out the migration:
- The working Fiori Application is available as a *.zip file exported from WebIDE.
- VS Code is installed with “SAP Fiori Tools – Extension Pack”.
- The target SAP System is configured in VS Code.
Get the project to VS Code
Extract the exported *.zip file to the desired projects directory for VS Code “C:\PathToVSCodeProjects\zcj_from_webide”. We then open VS Code and start a new Terminal:
Navigate to the created directory with the extracted *.zip files:
$ cd "C:\PathToVSCodeProjects\zcj_from_webide"
Open a new workspace from the command line:
$ code .
The newly created workspace should now open in a new VS Code window and look like follows:
Commit an initial version of the code
Versioning control with git is fully integrated in VS Code:
Migrate the Project to VS Code
VS Code requires certain configurations to be carried out before the App can be launched like in the WebIDE. Fortunately, the installed SAP Fiori Tools provide a wizard to perform this migration automatically. We start it by pressing Ctrl + Shift + P -> Migrate Project for use in Fiori tools.
The migration wizard should automatically locate the app, provided that the correct directory was opened. We only need to set the correct (and previously configured) ABAP System and press ‘Start Migration’
After the project is successfully migrated, npm install is started automatically and the result should look like this:
Run the App
By now, the “Debug and Run” panel of VS Code should show some available configurations. We now run the first option and wait for a new browser tab to open (you might have to explicitly allow this):
Special case for Fiori Extensions
For Freestyle Apps this step is not needed, since the Application should already run normally. You can now skip to Step n if that’s the case.
In case of Fiori Extensions, it is very likely, that the App will show some error like this:
The browser’s developer tools (F12) show that in our case, the common SAP library ‘hcm/fab/lib/common/library.js’ could not be loaded:
This is because the WebIDE uses the file neo-app.json to configure additional resources to be made available to the Fiori Extension. We solve this by setting the appropriate parameters within the ui5.yaml configurations:
- path: /resources/hcm/fab/lib/common pathPrefix: /sap/bc/ui5_ui5/sap/HCMFAB_COMMON url: https://your.own.domain/ destination: YOUR_OWN_DESTINATION
We now relaunch our App and it should now work normally:
Remove WebIDE specific folders and commit changes:
If everything went well, our versioning history should roughly match our previous steps:
Benefits of using VS Code
- Automatic reload of the App after changing any file.
- Testing framework WDIO/WDI5 is fully integrated in VS Code. 
- Apps can be tested on local mobile devices with little effort. See parameter ‘–accept-remote-connections’ on UI5 Tooling.
Downsides of using VS Code
- No Annotations manager as of now (April 2022) 
- No Wizard to develop Extensions, as available on the WebIDE (although there is one similar solution for the BAS, which does not quite work in VS Code yet) 
 My Timesheet (Version 3/Fiori 2.0): https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps(‘F3074’)/W24
 Use WDIO and WDI5 for testing UI5 apps: https://blogs.sap.com/latest/use-wdio-and-wdi5-for-testing-ui5-apps/
 Next-generation Annotation Modeler: https://blogs.sap.com/latest/provide-your-input-on-the-next-generation-annotation-modeler/
 Adaption project generator for BAS: https://blogs.sap.com/latest/adaptation-project-your-one-stop-tool-for-extending-sapui5-applications/