Deploy UI5 Application into ABAP Repository using VSCode

[former_member723794]

In this blog post, we will see, how to deploy UI5 application into ABAP Repository using VSCode. Before moving to next step, you required to install VS Code and node, and must needed ABAP Server for deploy. In this blog, I am using S/4HANA. I hope you already created UI5 application in VSCode.

Install

• Visual Studio Code -  https://code.visualstudio.com/download


• Node                       -  https://nodejs.org/en/download/

 

Prerequisites

• Visual Studio Code


• ABAP Server


• UI5 Application


• Node installed

Lets Start the deployment process..!!!

 

Step 1 : Open your project in Integrated Terminal

 

Step 2: Now build the app using "ui5 build" command. when it successfully executed, you will see the dist  folder inside your root, which will deploy to the ABAP Repository.

 

Here is the dist folder, which gets created. It contains the copies of the files and preload library.

 

Step 3: Now 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",        //  hana username



    "conn_password": "password",   // hana password



    "abap_package": "$TMP",       //package name



    "abap_bsp": "ZChait",  //Name of the file to create in server(should starts with "Z")



    "abap_bsp_text": "Split App through VSCode App"    //Description for that



} 

 

So what will the above do? Let's go through them line by line:

base : It references what folder to upload, seen as NPM runs from the base of my project it will just load up from './' which means the current directory. You might want to change this to "base": "./dist" to only upload your dist folder from your build scripts.

conn_usestrictssl : This is set to false because I'm accessing a server with a self-signed SSL certificate, quite common in the workplace and as such probably a neccessity for you too.

conn_server : Here you have to give servers address and port number.

conn_user : This is for your SAP username.

conn_password : This is for your SAP password.

abap_package : This is for the package on which your BSP is assigned.

abap_bsp : This is for the name of your BSP in which your UI5 application is assigned.

abap_bsp_text : This is for the name of your BSP description in which your UI5 application is assigned.

conn_client : This is for the client for which you want to connect to.

Other options that exist which I've not included are as follows:

calcappindex : It will automatically trigger the application re-index upon deployment, default false.

abap_transport : This is for the name of the transport number for which you've got open in your name.

abap_language :  ABAP Language.

Step 4: Add "deploy": "npx nwabap upload" in the package.json. It reads the content of this file and uploads to the repository that you specified.

 

Step 5 : Now that the deployment setup is complete, it’s time to execute the deploy command using "npm run deploy". If everything executes smoothly then you will see all the files are deploying into ABAP repo in the terminal.

 

Step 6 : Open SAP Logon and check your application with all the files and folders. Run the transaction 'SE80' .

And from the dropdown select BSP Application(i.e  Business Server Page , this will executed your application in a Web browser rather than in the SAPGUI). and in the next dropdown search for your application by using the app name.

 

Step 7 : Once found , test the deployed UI5 application by right-clicking on the app node , select 'test' and allow it to open on a browser.

You can test your application from transaction SICF too, which I have shown in Next step.

 

Step 8: Another Way to test your deployed UI5 Application.

Run the transaction 'SICF' , and in "Created By" - "username" , give the username, where you have deployed your application and execute.

 

You will see the below screen, search the name of your application which you have given , while deploying(i.e in .nwabaprc file), once found, right click on the node(ui5_ui5/sap/Your_app_name) and select "Test Service" . After that one popup will come, allow it to open your application in the web browser.

 

Here is your Application Running(this is sample application I have created just to show you people how to deploy ).

 

Hope you all enjoyed deploying the application without any problems. Now you can configure your UI5 application on Fiori launchpad and assign the roles to use them.

 

Feel Free to Comment or suggestions..!!! Cheers 🙂

 

Regards,

Chaitali Pandya

[pieterjanssens]

Great blog. Thanks.

For reference, here is the homepage of the package that makes this easy npx command possible: https://www.npmjs.com/package/nwabap-ui5uploader

[former_member723794]

Thank you piejanssens . Glad you liked it..!!

[former_member383742]

Nice blog. Btw. you can migrate your SAP Fiori App to use SAP Fiori Tools and having that it automatically supports deployment to ABAP frontend server out of the box. Please check:

https://blogs.sap.com/2020/06/22/sap-fiori-tools-is-generally-available.-increase-the-efficiency-of-...

and

https://blogs.sap.com/2020/08/10/sap-fiori-tools-deploy-to-abap-server/

[former_member723794]

Hi Chiuaru Catalin,

Thanks for the comment..!!

But I felt this way easy .

Thanks.

[Attila]

Hi Chiuaru,

AFAIK Fiori Tools and

abap-deploy

works starting with backend 7.53 only.

See ABAP Deploy

The plugin used by pandya123 is able to deploy even to lower releases due it is using the old ADT deployment service in NW. This is great due you are not restricted to S/4HANA only, but able to deploy to lower versions, also working with projects managed by Fiori Tools.

Can you please confirm ?

Deploying FE applicatiosn staring from 7.53 however is better to do with abap-deploy, due you can add FLP configuration also (intent).

BR,Attila

[beyhan_meyrali]

Hi Chaitali,

Thanks for sharing it was very helpful.