How to Deploy and Run SAPUI5 application on ABAP Server

Prerequisite

To run application on ABAP server, we need to have ABAP Development tools and SAPUI5 ABAP Repository Team Provider plugin installed into your Eclipse IDE.

And on backend SAP system, you need to have below components.

Before deploying this application into SAP ABAP AS, if we see Run As menu, it will display below options. Once it will get successfully deployed, it will show option for testing on ABAP server.

Procedure

As displayed below, we need to right click on Project and go to menu Team --> Share Project.

Select repository type as SAPUI5 ABAP Repository.

In this step, you need to configure connection to SAP system where you want to deploy your SAPUI5 application.

After successful connection to SAP system, it will display properties of connection.

On click of Next button, logon screen will be displayed. Provide credentials of SAP system.

Now you will be provided with 2 options as below. We will select option to create new BSP application. By default, name of BSP application will be selected as your SAPUI5 project name. But in that case, you will get error message as displayed in below screen.

You need to give Z* name to your BSP application. Also you can browse package and select required package in which you want to save your BSP application.

In this step, you can perform selection of Transport Request. You will be provided with below 3 options.

You will get below kind of popup message for Server Runtime Version Check. Click OK.

Final step of the deployment will be submitting the project. Select option Team --> Submit.

As displayed below, it will ask resources to submit. Click on Finish.

With this step, SAPUI5 application will get deployed to SAP ABAP AS Server and SAPUI5 project structure will look like as below.

Notice the changes between before and after deployment.

Also you will see now Run on ABAP Server option got added as displayed below. By selecting this option, SAPUI5 application will run on ABAP server.

Here you can see URL path which is nothing but the BSP application URL path got created in SICF transaction.

If you see in backed SAP system, BSP application will get created as displayed below.

Also you can see service getting created under the path /sap/bc/ui5_ui5/sap/zflightdemo in SICF transaction.

Closing Remarks

We can easily deploy and run SAPUI5 application on ABAP server. Basically, in the backend SAP system, BSP application gets created when we share and submit SAPUI5 project.

Updates (Resubmitting UI5 project)

We can easily resubmit the changes done to the UI5 application. after doing changes in UI5 application, you need to again submit the project. in that case, you will see below screen with operation as Update.

I created UI5 application with input field and submitted as explained in this technical article. below is the screen of BSP application executed which I created for UI5 application.

After that, I added TextView UI element and again submitted the project. I again executed BSP application which reflected back the changes I did to my UI5 application.

Source: scn.sap.com