Deploying Fiori/UI5 Projects to S/4HANA On-Premise ABAP server via VSCode

[FiratAsan]

In this blog post, I’d like to guide you step by step process of deployment the  Fiori/UI5 application to S/4 HANA On-Promise ABAP Repository via Visual Studio Code (VS Code).

Before we were deploying our projects via SE38 program with /UI5/UI5_REPOSITIRY_LOAD.

We were choosing the Upload Check Box, giving the name, package and description of our application and uploading it to the SAP Server.

Now we are using Visual Studio Code (VSCode) and we have another way to deploy our projects to the ABAP Server.

First we are opnening new terminal.

Selecting our project and writing npm run build.

npm run build

VS Code creating dist folder for us in the root.

 

 

We are setting uploder for our project with command "npm install nwabap-ui5uploader --save-dev".

npm install nwabap-ui5uploader --save-dev

 

Now we need to create .nwabaprc file in the root folder with 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": "ZDEMO_APP",

    "abap_bsp_text": "UI5 Deployment Demo"

}

Then we are changing or adding package.json file “deploy”: “npx nwabap upload” setting.

"deploy": "npx nwabap upload",

 

As a last step we are writing Run Command "npm run deploy" to console.

npm run deploy

Now you can go to the SAP GUI and run your application to control with Tcode : SE80. 

Thank you for reading my post.

 

PS: You can step uploader installing step, but my system gave error without this step.

[karl_peham]

Hi,

actually I'm a noob however I am wondering if there is a benefit against using the options provided by Fiori Tools? (I see you have a ui5-deploy.yaml file there, too)

regards Karl

[FiratAsan]

Hi Karl,

First of all, thank you for your interest in my blog post.

There are multiple deployment methods. I tried some of them today. An alternative is to do it with the Deployment Configuration Generator as in the screenshots you show.

 

ui5-deploy.yaml file is created after i have run "npm run deploy-config" comand. There is deployment settings in that file but above we have created .nwabaprc file for that settings. If you prefer that methot your should change package.json file to "deploy": "npm run build && fiori deploy --config ui5-deploy.yaml && rimraf archive.zip" like that.

 

"deploy": "npm run build && fiori deploy --config ui5-deploy.yaml && rimraf archive.zip",