Deploying UI5 Applications To ABAP Server: Two Flavours, same taste.

In this blog post, I’d like to share my experience with the deployment of UI5 applications on the ABAP Server using two different methods.

Fiori Tools VSC Extention and the /UI5/UI5_REPOSITORY_LOAD ABAP Report.

for the application development, I used the UI5 Toolings on Visual Studio code with the SAP Fiori tools Extension Pack and Yeoman Easy-Ui5 generator.

Deploying UI5 Application Using Yoeman Generator.

1- In the VSC embedded Terminal, run the command

npm run build

a dist folder will be created in the root, which we can deploy to the ABAP repository

2- We can now deploy the app to the ABAP repository using nwabap-ui5uploader . Run the Command :

npm install nwabap-ui5uploader --save-dev

3- Now you need to create .nwabaprc in the root folder with the below properties.

{
    "base": "./dist",
    "conn_usestrictssl" : false,
    "conn_server": "http://<hostname>:<port>/",
    "conn_client" : "client",
    "conn_user": “UserName”,
    "conn_password": “Password”,
    "abap_package": "$TMP",
    "abap_bsp": "ZVSCODE_APP",
    "abap_bsp_text": "UI5 upload through VSCode App"
}

4- Go to package.json and add “deploy”: “npx nwabap upload” under the scripts.

5- Run the command npm run deploy and see the magic happen 🤩 and et voilà your UI5 Application is now successfully deployed.

npm run deploy

go to the SAP GUI , use the Tcode : SE80 , under the BSP application you can search for your application name and now you should see the webapp folder deployed

Deploying UI5 Application Using the ABAP Load report /UI5/UI5_REPOSITORY_LOAD .

Now we have another way to do the deployment on the ABAP Server.

1- The first step is to use the T-code: SE80 on SAP GUI and execute the Report /UI5/UI5_REPOSITORY_LOAD.

2- Enter the Name of the application ( or the Z name for the non-SAP Objects)

3- Choose Upload and execute, a dialog box will appear prompting you to enter the application source directory.

4- Enter the project source directory, upload only the webapp folder, and click on OK.

after that, you need to add the description and package parameters, if you are using a non-sap object package or a client system, make sure that the package is assigned to the transport request that you will be using later to transport the application.

5- A summary of the objects to be uploaded is displayed, Click on the green highlighted link The files are now uploaded.

and now you’re all set 😉.

You can check the BSP application using the T-code SE80 to make sure that your application is successfully deployed.

notice that you can also use the /UI5/UI5_REPOSITORY_LOAD Report deployment method with the UI5 applications that are developed using both VSC and Eclipse 🤗.