Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
loganathanc
Participant
8,769
In this blog post, I will guide you step by step process for Migration of SAP UI5 Application from SAP Web IDE to Visual Studio Code (VS Code). And deployment of the application to S/4 HANA On-Promise ABAP Repository from Visual Studio Code (VS Code).

I have taken reference from


SAP Help Document

Follow the below link to set up Visual Studio Code for SAPUI5 development @lenahammerer


Getting Ready for UI5 Development with Visual Studio Code

In this article will discuss


Migration of SAP Web IDE Project into VS Code



  1. Download the BSP application from S/4 HANA On-Promise ABAP Repository using SAP Web IDE.

  2. Create a workspace for Visual Studio Code UI5 Development and copy the source code to workspace.

  3. Start the migration process using Visual Studio Code.

  4. Modify the ui5.yaml file to connect S/4 HANA On-Promise system & Preview the application.


UI5 Application deployment process for S/4HANA On-Promise System.



  1. Add the gateway system details in Visual Studio Code.

  2. Add deployment configuration.

  3. Deploy the application to S/4 HANA On-Promise system ABAP repository.


Lets get started.


Migration of SAP Web IDE Project into VS Code.


Step 1: Download the BSP application from S/4 HANA On-Promise ABAP Repository using SAP Web IDE.


BSP Application from ABAP Repository


Step 2: Create a workspace for Visual Studio Code UI5 Development and copy the source code to workspace.


BSP Application copied in to Visual Studio Code workspace


Step 3: Start the migration process using Visual Studio Code.

  • Ctrl + Shift + P (Show All Commands)

  • Fiori: Migrate Project for use in Fiori Tools



Migrate Fiori Project



Start Migration



After successful migration


Step 4: Modify the ui5.yaml file to connect S/4 HANA On-Promise system & Preview the application.

  • Modifying ui5.yaml file



ui5.yaml modification




  • Preview application



Preview Application




npm run start



Application loaded successfully in browser


 

UI5 Application deployment process for S/4HANA On-Promise System.


Step 1: Adding Gateway System in the Visual Studio Code


Adding Gateway System in the Visual Studio Code


Step 2: Adding deployment configuration.

  • Create ui5-deploy.yaml file for deployment configuration


Note: Before deployment please create your package & Transport request. If your deploying into $TMP package then Transport Request is not required


ui5-deploy.yaml file


Step 3: Deploy the application to S/4 HANA On-Promise system ABAP repository.

  • Add deploy scripts in package.json


"deploy": "npm run build && fiori deploy --config ui5-deploy.yaml && rimraf archive.zip",



Successfully deployed the application




  • Congratulations! You have successfully deployed and tested your SAPUI5 application.



SICF



Application running in development system.



Troubleshooting


There are a variety of virus scan errors:



  • Virus scan server error

  • No virus scan profile is selected as the default.

  • Virus scan errors should not block the deployment process. The virus scan should be configured in such a way so as not to disturb the deployment process.

  • Also, a default virus scan profile should be selected in the system or switched off entirely.

  • See SAP Note: https://launchpad.support.sap.com/#/notes/3052386


Conclusion


After going through this post, you should be able to migrate and deploy SAPUI5 applications using Visual Studio Code. I hope this guide has been helpful in getting you migration of the SAPUI5 application to Visual Studio Code and deploying SAPUI5 applications. If you have any questions or comments, please feel free to leave them below.
4 Comments
Labels in this area