Friday, 25 August 2023

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

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.

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

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

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

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.

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

Selecting our project and writing npm run build.

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

npm run build

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

VS Code creating dist folder for us in the root.

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

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

npm install nwabap-ui5uploader --save-dev

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

Now we need to create .nwabaprc file in the root folder with properties :

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

{
    "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.

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

"deploy": "npx nwabap upload",

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

npm run deploy

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

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

SAP ABAP Career, SAP ABAP Skills, SAP ABAP Jobs, SAP ABAP Prep, SAP ABAP Preparation, SAP ABAP Tutorial and Materials, SAP ABAP Guides

No comments:

Post a Comment