Deploying UI5 Applications on S/4 HANA on Premise ABAP Server using VSC

[Marwah_Shwaiki]

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