Skip to Content
Technical Articles
Author's profile photo Marwah Al Shwaiki

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 🤗.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Alex Necula
      Alex Necula

      Hi Marwah Al Shwaiki,

      Thanks for taking the time to write this blog!

      These are indeed two fully working ways to deploy your UI5 application to the ABAP system. However, nowadays the VSC extension Application Wizard from SAP comes with everything you need for deployment. You configure the deployment directly through the generator, there is no need for nwabap or to change the package.json.

      You should try it, I think you will like that method more.


      Author's profile photo Marwah Al Shwaiki
      Marwah Al Shwaiki
      Blog Post Author

      Hi Alex,

      That's absolutely correct, and I've already worked with the Application wizard extension for VSC, but from my experience, as I worked with different system landscapes and different client use cases scenarios, using other deployment methods can save you a lot of time and will get the same results at the end.

      Author's profile photo Jun Wu
      Jun Wu

      you don't need nwabap-ui5uploader unless your sap system is very old.

      fiori tooling can do the deployment.