Migrating Fiori Apps from WebIDE to VS Code for Development

[christianjsosa]

Since WebIDE will no longer be supported by SAP in the future[1], 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.

** March 2023 Update **************************

Just recently the WebIDE started displaying a friendly reminder to start the migration:

WebIDE friendly reminder to start migration

It also provides resources about the migration to SAP Business Application Studio:

• Migrate SAP Fiori projects from SAP Web IDE to SAP Business Application Studio: https://blogs.sap.com/2022/01/06/migrate-sap-fiori-projects-from-sap-web-ide-to-sap-business-applica...


• It’s time to plan your move to SAP Business Application Studio: https://blogs.sap.com/2022/01/10/its-time-to-plan-your-move-to-sap-business-application-studio/

** End of the March 2023 Update **************************

Requirement

The source code for a Fiori Extension project (My Timesheet V3 [2]) 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.

Solution

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:

Initial screen on VS Code with 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:

File structure of the newly created workspace

Commit an initial version of the code

Versioning control with git is fully integrated in VS Code:

Initialize a new git repository

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.

Launching the migration wizard

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'

Migration wizard launched

After the project is successfully migrated, npm install is started automatically and the result should look like this:

Migration in process

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):

Run configurations were generated

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:

Application is now runnable, but still has errors

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:

Error description from browser development tools

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:

Missing dependencies added to ui5.yaml

          - 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:

App works normally after loading missing dependencies

Cleanup

Remove WebIDE specific folders and commit changes:

WebIDE specific files and folders are deleted

Wrap-up

If everything went well, our versioning history should roughly match our previous steps:

Version history after migration

Benefits of using VS Code

• Automatic reload of the App after changing any file.


• Testing framework WDIO/WDI5 is fully integrated in VS Code. [3]


• 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) [4]


• 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) [5]

References

[1] SAP WebIDE Trial Update: https://blogs.sap.com/latest/sap-web-ide-trial-update/#:~:text=On%20November%2013%2C%202020%20the,St...

[2] My Timesheet (Version 3/Fiori 2.0): https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F3074')/W24

[3] Use WDIO and WDI5 for testing UI5 apps: https://blogs.sap.com/latest/use-wdio-and-wdi5-for-testing-ui5-apps/

[4] Next-generation Annotation Modeler: https://blogs.sap.com/latest/provide-your-input-on-the-next-generation-annotation-modeler/

[5] Adaption project generator for BAS: https://blogs.sap.com/latest/adaptation-project-your-one-stop-tool-for-extending-sapui5-applications...