Build and Deploy your SAPUI5 application using SAP Business Application Studio to ABAP repository (on-premise system).

[vidhyasagarmule]

In this blog post, I will guide you through the process of building and deploying an SAPUI5 application using SAP Business Application Studio to an ABAP repository in an on-premise system.

I have taken the reference from

SAP Help Document

In this article will discuss

1) Activate and maintain the repository service in backend system.
2) Configuration of the Cloud Connector.
3) Creating the Destination in BTP.
4) Development of simple ui5 app in business application studio.
5) SAPUI5 application deployment on SAP ABAP repository.
6) Troubleshooting.

 

Lets get started.

1) Activate and maintain the repository service in backend system.

• Go to t-code /n/iwfnd/maint_services.

• Next add the service as indicated in the below snap, /UI5/ABAP REPOSITORY SRV.

• Choose the needed package by clicking on the service.

• Now that the repository service has been added.

 

2) Configuration of the Cloud Connector.

• For cloud connector setup you can refer @hyungjin.youn's Blog post.

https://blogs.sap.com/2022/07/18/how-to-connect-on-premise-sap-to-btp-using-sap-cloud-connector/

3) Creating the Destination in BTP.

• While creating the destinations in BTP please make sure that.

1. Your WebIDEUsage includes dev_abap for deploying to the SAPUI5 ABAP Repository. (For example, your WebIDEUsage includes odata_abap,dev_abap).


2. Make sure to add the HTML5.Timeout= 60000 additional property to your destination.


3. For deploying to SAP S/4HANA on-premise, you should add the sap-client additional property to your destination.

• Refer to the image below for the destination.

4) Development of simple ui5 app in business application studio.

• Go to your business application studio click on Menu->File->New Project From Template-->click on SAP Fiori application.

• Choose the application type, then the application.

• Choose the needed ODATA service.

 

• After configuring the chosen service, click next.

• Together with choosing Yes for the radio option "Add deployment configuration," complete the project attributes.

• Add the deployment configuration as displayed in the following image, then press Finish.

 

• The project and deployment configuration have now both been generated.
  The app can be tested and operated locally.

5) SAPUI5 application deployment on SAP ABAP repository.

• As the deployment configuration was added when we created the application (You can also add the configuration manually using command npm run deploy-config).

• To deploy the application into the SAP UI5 ABAP repository, run the npm run deploy command.

• The application will be deployed into our ABAP repository once you choose Yes to begin the deployment.

• Now the application has been deployed to ABAP repository go to T-Code SICF and test your application.

       

 

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

 

    6) 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 develop and deploy SAPUI5 applications using SAP Business Application Studio (BAS). I hope this guide has been helpful in getting you started with building and deploying SAPUI5 applications. If you have any questions or comments, please feel free to leave them below.

• Please follow https://community.sap.com/topics/ui5 for SAPUI5 Topic related updates.


• Post questions and answers on SAPUI5 here.


• Read other posts on SAPUI5 here.


• Please follow me for the future updates.

[alejiandro_sensejl]

Hi Sagar,

thank you for your interessting blog! Can you also explain how to do this in an enterprise scenario, please? Like how to do this with multiple developers without sharing same credentials in destination or how to add new app to a transportable package?

Kind regards,
Alej

[vidhyasagarmule]

Hi Alejandro,

We must set the authentication type to NoAuthentication in the destination configuration at the sub account level if many developers wish to deploy apps using their credentials.

The system will ask for the credentials as seen below when we attempt to deploy the application using the npm run deploy command.

Use the npm run deploy-config command to add the necessary package and TR as shown in the below snap if you want to add the transportable package (both new and existing apps).

You can also store the credentials in environment file for more details please refer Setting Environment Variables

Regards,
Sagar Muley

[maxboo]

Hi Sagar,

everything works from our site - but one questions:

How do we re-deploy the app or even delete it from BAS? Like when i am making a change to the app and run deploy again i am getting error.

Guess it somehow forbidds to overwrite stuff?!

Regards,

Max

[harald_w]

The picture at chapter "create destination" is missing

[devi123prasad]

Hello Sagar, thank you for the detailed information.

While deploying the app from BAS to S4, we are getting the following errors. could you please help!

 

error builder:custom deploy-to-abap Request failed with status code 500
Command deploy failed with error Request failed with status code 500