Migrate SAP Fiori Application to Business Application Studio

You have a custom Fiori application developed using WEB IDE which is already deployed in backend in your on-premise system. At this moment, you do not have a WEB IDE instance and you wanted to make amendment to the application, you have a BTP license with Business Application Studio. How you will migrate the application to BAS and do the modification so that you can deploy the same back to ABAP repository.

I struggled for few days to find a workable solution even though SAP help portal explains it well(Importing an Application | SAP Help Portal). More over, I have gone though some nice video tutorials and SAP blogs. Unfortunately, there  also not much information described when there is “NO WEB IDE” to import the application. Finally, with the help of SAP product development team, I found the solution. Hence I thought to share that small knowledge with my community.

I am sure this scenario will definitely hit many audience especially SAP UI5/Fiori developer community those who worked extensively in WEB IDE platform and new to SAP Business Application Studio.

First of all, there is no direct way to connect your SAP backend with Business Application Studio so that you can retrieve your Fiori/UI5 applications.

Step 1 : Execute the Report : /UI5/UI5_REPOSITORY_LOAD

Choose your local drive/folder to download the BSP application.

Click OK to proceed to the next screen.

Click on the Green area to download all files.

Post Download, local folder will have the below structure.

Step 2 : Open the business application studio

• Create a folder with name : “restore-from-exported” in Business Application Studio
• Create a subfolder webapp
• Drag and drop the below files from the downloaded application to webapp folder
  • Component.js
  • index.html
  • manifest.json
•  Create a new Fiori application with the same category using the same OData service and the same name. Follow the link for detailed information(“Importing an Application | SAP Help Portal“)
• Copy the below files from the new application to the folder “restore-from-exported”
  • .gitignore
  • package.json
  • ui5.yaml
•  Copy the rest of the folders to from the downloaded application to webapp folder created under the main folder  “restore-from-exported

Step 3 : Open a new terminal in BAS( Terminal->New Terminal )

• Use command cd restore-from-exported to get into the root directory
• Execute command “npm install”
• Execute command “npm start”. If you get the error “Cannot GET /test/flpSandbox.html“,
• Right click on the folder “restore-from-exported” and select option “Preview Application”.
• Choose the 3rd option from the list
  
• You are now able to launch the application successfully.

Step 4 : Deploy Application

• Open the terminal again
• Navigate into the directory restore-from-exported
• Run command, “npm run deploy-config” and follow the steps
  
• Finally run command, “npm run deploy” to deploy the application to the backend.

Step 5 : Verify in SE80

• Open SE80 and input the BSP application name

Conclusion

In SAP WEB IDE, we had the option to connect the ABAP repository and import the BSP application, However, by design, SAP Business Application studio cannot  perform direct import.

Please share your feedback or questions in the comment section. I am happy to assist.

Also, please follow the topic page, post and answer questions and read other posts on the topic