Deploying a Fiori application to the SAP On premise system using VS Code Editor

[arunkumarreddyr]

In this blog post, we will explore step-by-step instructions to deploy a Fiori application from VS Code to SAP On premise System. 

Prerequisites: 

• Visual Studio Code 


• ABAP Server 


• Fiori Application 


• Node installed 

 

To develop Fiori application in VS Code, install SAP Fiori Tools - Extension Pack in extensions 

To create a new project, open command palette

and run > Fiori open application generator

Choose template from template wizard. In this example I choose freestyle application. 

Give the data source as none (here I am not using any OData service). 

Provide the View name

Give the module name is nothing but project name and fill the required fields. 

Project will be created 

Run the by right click on the project and click on Preview Application or give the command npm run start-noflp in the integrated Terminal  

This is the output  

Then right click on the project and click on open in integrated Terminal 

Give the command  npm install -g @Sap/generator-fiori

then give the command npm run deploy-config and provide the below information 

Select Target system: Provide URL to which system you are going to deploy(http://host:port)

Enter client: give the client number  

SAPUI5 ABAP Repository: Provide the application name and with the same name can be seen

after successful deploying an application in ABAP Repository SE80 in BSP application. 

Deployment description: Give the app Description   

Package: Give any package that you have maintained in your ABAP Repository Or else $TMP 

Transport Request: Create the TR in SE09 and provide here  

After configuring all the details then give the command npm run deploy and re-check the details

that you have maintained above. 

Here we can see Deployment successful.

Application successfully deployed into ABAP repository, go to SE80 and check in BSP Application

for your deployed application. 

To run the BSP application in ABAP system by following steps: 

Go to ABAP system give t-code SICF and give the BSP name in Service Name then click on

execute. 

Right click on the below service and click on Test Services 

 

This is the output for deployed application. 

Thanks,

Arun Kumar Reddy.

 

[Marian_Zeis]

Hi Arun,

Can you explain what your blog post adds that is not already covered by the official tutorial or other blog post?

https://developers.sap.com/tutorials/abap-environment-vs-code.html

[Will2]

Thanks Arun, I found this very useful.

[Will2]

That other blog references a BTP Trial system. This blog deploys the app without one. Hope that clarifies.

[xiswanto]

Hi rarunkumarreddy

As I am following your tutorial, I am stuck on step npm run deploy-config where instead of having to provide information, the terminal show this instead:

Do you know the workaround of this?

[syedijlalayub]

Hi Siswanto Tan,

I faced a similar problem like this. What I did was install all required packages from https://developers.sap.com/tutorials/btp-app-work-zone-setup.html through Powershell in admin mode, and tried a fresh new app from scratch. That removed the error for me.

Syed Ijlal Ayub

[xiswanto]

Hi syedijlalayub

Not sure if It would work in my current environment, since I am using sap ERP 6 version not the SAP BTP, but I'll take a look anyway.

Thank you.

[Kura_Bharadwaj]

Hey Siswanto,

Could you please provide more information on which SAP system you are using.?

Regards/-
Kura

[syedijlalayub]

I understand, but I'm using sap ABAP platform trial 1909 SP07 on premise. Im not using cloud environment.

[xiswanto]

Hi bharadwaj.kura

 

I could only see the information such as below on my product version tab, do you need other specific information?

PRODUCT                        | RELEASE

EHP7 FOR SAP ERP 6.0 | EHP7 FOR SAP ER 6.0

SAP ERP                          | 2005

 

Regards,

Siswanto