Skip to Content
Technical Articles
Author's profile photo Loganathan Chinnasamy

Migrating SAP UI5 Applications from SAP Web IDE to Visual Studio Code (VS Code) and Deploy the application to S/4HANA On-Premise ABAP Repository

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 @Lena Hammere.

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%20Application

BSP Application from ABAP Repository

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

Copied%20BSP%20Application%20in%20to%20VS%20Code%20workspace

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%20Fiori%20Project

Migrate Fiori Project

Start%20Migration

Start Migration

After%20successful%20migration

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%20modification

ui5.yaml modification

  • Preview application

Preview%20Application

Preview Application

npm%20run%20start

npm run start

Application%20loaded%20successfully%20in%20browser

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%20Gateway%20System%20in%20the%20Visual%20Studio%20Code

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%20file

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%20deployed%20the%20application

Successfully deployed the application

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

SICF

SICF

Application%20running%20in%20development%20system.

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.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Marian Zeis
      Marian Zeis

      Hi Loganathan Chinnasamy

      I appreciate the effort you've put into writing this blog post about migrating SAP UI5 applications from SAP Web IDE to Visual Studio Code and deploying them to an S/4HANA On-Premise ABAP Repository. However, I wanted to kindly point out that there are already several articles and resources available in the SAP Community that cover this topic quite extensively.

      Like:

      Migrating SAP Fiori Applications from SAP Web IDE to SAP Business Application Studio

      Migrating a SAPUI5 application from WEB IDE to BAS

      Migrate SAP Fiori projects from SAP Web IDE to SAP Business Application Studio

      Business Application Studio on BTP and Migration of Fiori App from Web IDE to BAS.

      Migrating Fiori Apps from WebIDE to VS Code for Development

      and many more see Google

      For the future, check if this topic has already been covered in detail and if so, if you can cover these topics with new information or insights. By doing so, you can contribute valuable content to the community and distinguish your work from other blog posts.
      Unfortunately this was not handled here.

      Regards,
      Marian

      Author's profile photo Shai Sinai
      Shai Sinai

      TBH,

      All of the above talks about a migration to BAS and not to VS code,

      and the last one (which does talk about VS Code) doesn't handle the deployment.

      Author's profile photo Marian Zeis
      Marian Zeis

      Hi Shai Sinai

      luckily the Migration is the same in BAS and VS Code thank to the Fiori Tools.
      Did he mentioned that? No.

      He talked about getting the BSP Application from ABAP.
      Is this the best way? No, the best is from the Git Repository. No mention.

      Generally very little other information about what he does.

      Regarding deployment, this is not a unique topic either.

      Deploy UI5 Application into ABAP Repository using VSCode
      Develop SAP UI5 Apps and deploy to ABAP repository using Visual Studio Code
      Setting up Visual Studio Code for UI5 development – part 2
      SAP Fiori Tools: Deploy to ABAP server
      Deploy UI5 Application into ABAP Repository using VSCode
      Build and Deploy your SAPUI5 application using SAP Business Application Studio to ABAP repository (on-premise system).

       

      Author's profile photo Massimo Olivieri
      Massimo Olivieri

      WEB ide neo worked much better... but sap choose to close!