Skip to Content
Technical Articles
Author's profile photo Ashwini Pardhi

Migrating a SAPUI5 application from WEB IDE to BAS

 

Introduction

As already declared by SAP, Business Application Studio (BAS) is the future of Web IDE . So, in this blog I will share how to migrate applications created in Web IDE to BAS.

To run a project locally on BAS we need to add some files as well as make changes in certain files.

There are blogs online to migrate the Web IDE project to BAS but that did not fulfil my requirement.

So, instead of  adding files manually, I have gone by the SAP defined migration process. SAP has an online guide on this migration process. The guide defines changes the process will make in the application structure.

 

Migrating the Project

Prerequisites:

  1. SAP Cloud platform with Cloud Foundry Subaccount
  2. Business Application Studio Subscription
  3. necessary roles and Entitlements for Application Studio
  4. SAP Fiori Dev Space (Navigate to BAS and click on create Dev Space)

 

Whenever we import a project from other environment (e.g., Web IDE) to BAS, BAS recognizes the changes and tries to make the project compatible for BAS development (including local run and deployment).

 

Step 1: Importing the project

On the Welcome page click on import Project and select the Application’s zip file from your system. Once the import will start it will display a message as shown in the image below, Click on Start migration:

 

Step 2: Select HTML5 modules from MTA

On the next screen that comes, you select the module from MTA and related information like (Project Path, SAP system and destination)

And click on start migration, it will install required scripts in every module’s package.json as shown here :

 

Step 3: Preview

after the installation is complete, you can preview the application by right clicking on any module and selecting preview application option from the popup

 

Conclusion

Hence, in this blog we have seen how to migrate a project created in Web IDE into BAS and run it locally. You can deploy this project further on cloud and test on server.

 

 

 

 

 

 

 

 

Assigned Tags

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

      Sorry but I don't understand the point of this blog. You're basically telling people to click the Migrate button and follow the steps.

      If there were specific help on challenges/pitfalls/differences of deployment from BAS vs WebIDE, in on-premise vs cloud scenarios, or any changes that need to be made or watch out for, perhaps it would be helpful. But clicking the migrate button to import your apps isn't something that hasn't been said in every SAP documentation about BAS.

      Maybe I'm missing something here.

      Author's profile photo Ashwini Pardhi
      Ashwini Pardhi
      Blog Post Author

      Thankyou for the comment.

      I faced the challenge with import process so I thought of sharing this blog. Speaking of pitfalls, certainly there were some, which I'm planning to write in coming series.

      Author's profile photo Ramin Shafai
      Ramin Shafai

      What was the challenge you faced? How did you resolve it?

      This "blog" doesn't articulate any challenges and/or solutions.

      Author's profile photo Pritesh Patel
      Pritesh Patel

      Hey Ashwini Pardhi

      nice blog. Maybe you can also add more details like.

       

      Migrate Project from WEBIDE and Deploy to cloud and ABAP

       

      Step-1: Import  webApp Folder of webide project

      Step-2: Right click on Project name  open terminal ==>  npm install ==>npm init ==> ui5 init

      Step-3: Go to View Menu ==> select Find command ==> enter Fiori: Migrate project for use in fiori tools

      Step-4: Right click on project and Preview Application

      Step-5: npx fiori add deploy-config for add deploy configuration

      Step-6: choose target ==> ABAP or Cloud Foundry

      Step-7: If choose Cloud Foundry mta.yaml file add in projects à Right Click on mta.yaml file and choose Build MTA project

      Step-8: MTA archives folder created in your project.  ==> open and right click on  .mtar file ==> deploy MTA archive

      Step-9: Now Right click on project Open new terminal  ==> cf html5-list –di <copy srv name from previous step  -dest-srv>  -u --runtime Launchpad

      Step-10: if select ABAP ==> add all config

      Step-11: Npm run deploy