SAP Business Application Studio(BAS) Deploy UI5 Application To the Server using Npm command

[priteshpatel65]

Hello Everyone,

Overview

SAP Business Application Studio is an SAP Business Technology Platform service in the Cloud Foundry environment. It is built on open-source and leading industry standards and supports a modular approach to developing different kinds of apps.

For a general overview and more information about the capabilities of SAP Business Application Studio, refer to the official SAP Business Application Studio product page.

How to access SAP Business Application Studio

If you do not have existing access to SAP Business Application Studio, you can get a fully-functional SAP Business Technology Platform trial account. From there, you can access and use SAP Business Application Studio.

1. Get a Free Trial Account on SAP Business Technology Platform


2. Set Up SAP Business Application Studio for Development


3. Create a Dev Space for SAP Fiori Apps


4. Create a Destination within the Cloud Foundry EnvironmentOptional. This will create a destination within the SAP Business Technology Platform Cloud Foundry environment so that you can access the free Northwind OData services. You need this to get sample data for some of our Tutorials


5. Create an Empty SAPUI5 ProjectWith this step, you set up an empty SAPUI5 freestyle app project.

In this blog, I will share how to deploy sample SAP UI5 application in Business Application Studio(BAS) to server by the following steps:

Prerequisites

• See the prerequisites listed in Developing an SAP Fiori Application Based on an SAP S/4HANA or ECC System.


• Your target ABAP system for deployment must include the SAP_UI 753 SP00 or higher software component, available from SAP Fiori FES 5.0. See SAP Note 2217489.


• Make sure that your WebIDEUsage includes dev_abap for deploying to the SAPUI5 ABAP Repository. (For example, your WebIDEUsage includes odata_abap,dev_abap).


• Make sure to add the HTML5.Timeout= 60000 additional property to your destination.


• For deploying to SAP S/4HANA on-premise, you need to set up an on-premise destination and the cloud connector. See Cloud Connector.


• For deploying to SAP S/4HANA on-premise, you should add the sap-client additional property to your destination.


• For deploying to SAP S/4HANA on-premise, you need to activate the /UI5/ABAP_REPOSITORY_SRV service in your back-end system. See Activate and Maintain Services.


• For deploying to SAP S/4HANA Cloud, you need to set up a destination to an S/4HANA Cloud system with SAML Bearer Assertion authentication. See Using SAML Bearer Assertion Authentication.

 

Procedure To Deploy

1. Right-click the project folder and select Open in Terminal. 


2. Enter npm install:
   
   
   
   

   user: <SAP Fiori project> $ npm install

   
   
   
   


3. Add Deploy configuration using npx fiori add deploy-config commanduser:<SAP Fiori Project> $npx fiori add deploy-config
   
   


4. Enter Npm run deploy:user:<SAP Fiori Project> $npm run deploy 
   
   


5.  Check Your configuration and press 'Y' Enter system credential and press enter
   
   I hope this post will help you to deploy the ui5/fiori like application to your on-premise SAP system.
   
    
   
   Regards
   
   Pritesh Patel
   
    

[former_member735290]

hello priteshpatel6572

 

Your blog helped me to deploy a new app I am very thankful full but,

can you help me with how to deploy the existing app in BAS?

[Ranjeet]

@Pritesh Patel - how to deploy an application 2nd time via BAS?

For Example

1. created a new application in BAS, deploy it after all configuration and command.


2. now received a change request from business, did all the modification and tested it is working fine locally in BAS


3. Now need to re-deploy to S4/Hana system from BAS.

Could you please put some light on this deployment scenarios via BAS?

 

Regards,

Ranjeet

[priteshpatel65]

Hi sshanmuka

for existing app( developed using web ide)  you need to follow below step

Step 1-Import Project in to BAS.

Step 2- Run command -> Npm install

step 3-  go to View section on menu bar--select Find command -- >Fiori: Migrate Project for use in fiori tools --Select your Project and start Migrate.

Step 4- Add Deploy configuration using npx fiori add deploy-config command user:<SAP Fiori Project> $npx fiori add deploy-config

Step 5- Enter Npm run deploy:user:<SAP Fiori Project> $npm run deploy 

 

Regards

Pritesh Patel

[priteshpatel65]

Dear ranjeetkumarsingh2k1474

 

After testing your app locally ,

You need to add new deployments configuration using below command

user:<SAP Fiori Project> $npx fiori add deploy-config

Please ensure that package, App name must be same  and  add new work batch TR

After adding this configuration need run command-  $npm run deploy.

 

Regards

Pritesh Patel

 

[DigantTrivedi]

Hi Pritesh,

Thanks for the blog.

I am facing an error while deploying my first Fiori app using BTP and BAS after  command npm run deploy. Here is the screen shot of the same. Can you please guide how to resolve this error.

Error

[priteshpatel65]

Hi digantvtrivedi

 

Below error related to authorization, please go to T-code SU53 and check below authorization objects.

S_DEVELOP,S_ICF_ADM,S_TCODE,S_TRANSPRT,S_CTS_ADMI,S_CTS_SADM

[ancutamezi]

Hi pritesh.patel

 

We have a case where we want to deploy a Fiori Application connecting to a CAP service to S/4HANA Public Cloud. Is this possible just by having a destination on CF to the S/4HANA Cloud and of course doing the configuration on the S/4HANA Cloud? For the deployment configuration would it work by choosing Cloud Foundry, not ABAP and the destination to the target System S/4HANA Cloud?

 

Any response would be more than helpful so thank in advance for this.

 

Kindest regards,

Ancuta

[kappa0617]

Hi pritesh.patel

Thank you for the blog.

I get a 502 error after running "npm run deploy" with the written instructions.

(Request failed with status code 502)

However, when I actually check the deploy destination, the deploy completes successfully for some reason.(Test execution also works properly.)

Below is a screenshot of it. Please let me know how to resolve this error.

[balakarthikr]

Hi Team,

 

We have a Fiori installed as Hub Deployment. When we try to deploy the app to the front-end system but somehow it gets deployed to the back-end system. Is there a cause for this?

 

Thanks,

Bala Karthik R

[priteshpatel65]

Hi balakarthikrbk

 

Can you please check your cloud connector configuration or destination in BAS.

 

Regards

Pritesh Patel

[priteshpatel65]

hi kappa0617

the 502 Bad Gateway error usually relates to server-side problems, it can also be caused by misconfigurations or temporary issues from the client-side. Hence, follow the common troubleshooting steps.

1. Refresh the Page


2. Clear Browser Cache


3. Try in Incognito Mode


4. Check Error Log

Regards

Pritesh Patel

 

[abhi1185]

Hello Pritesh,

 

We have custom Fiori application already deployed to On-prem. We have done some changes in BAS and want to re-deploy application, so that changes reflect in On-prem also.

But "npm run deploy" command is throwing below error related to duplicate ID. Do we need to delete existing deployed app and then deploy again.

Or is there any way to re-deploy , so as to update the changes.

ERR! builder:custom deploy-to-abap Upload canceled: Errors have been detected.

ERR! builder:custom deploy-to-abap Duplicate Id: Id mandate.zhrman already contained in SAPUI5 Repository ZHR_MAN

ERR! builder:custom deploy-to-abap SAP Note: See SAP Note 2177717 for more details (https://launchpad.support.sap.com/#/notes/2177717)

ERR! builder:custom deploy-to-abap SAPUI5 application ZHRMAN was not uploaded or registered successfully

info builder:custom deploy-to-abap

info builder:custom deploy-to-abap * Done *

ERR! builder:custom deploy-to-abap SAP_Transaction:

ERR! builder:custom deploy-to-abap SAP_Note: See SAP Note 1797736 for error analysis

[priteshpatel65]

Hi Abhishek Nayak

Can you please try using same repository name(APP Name). else delete project from on prem. system and re-deploy using BAS.

Regards

Pritesh Patel

[abhi1185]

Hello Pritesh,

I am aware of this way around of deleting on-prem project and deploy again. Also, it can be deployed with different ID.

But what I want to confirm is that don't we have any option to deploy the changes only from BAS instead of whole app. In Web IDE we used to have an option to Update Existing app when deploying the changes. but I am not able to find this in BAS even though it's one of the most common requirements.

[priteshpatel65]

@abhi1185

In Web IDE you have option to Update Existing app when deploying the changes but in BAS you

directly deploy app using

          name: <App name which is given by you in webide or deployed app [ repository name(APP

Name)] Goto --SE80 and check repository name >

          description: <xyz>

          package: <Same packege name>

          transport: XC1X900863(<Transport number>)

this might  be work.

Regards

Pritesh Patel

[former_member817735]

Hi everyone,

does anyone know how I can fix this error. Today I tried to deploy the FIORI app to the SAP onPremise system and I get this message:

user: zbc_sysm_cust $ npm run build



> zbc_sysm_cust@0.0.1 build

> ui5 build --config=ui5.yaml --clean-dest --dest dist





  Process Failed With Error



Error Message:

Failed to add extension sap-fe-mockserver to graph: An extension with that name has already been added



For details, execute the same command again with an additional '--verbose' parameter

Previously I used "npm run build" and "npm run deploy" commands without problem. I guess the current problem came with some update.

Regards

Petyo Georgiev

[heikki_ladau]

For me the repdeployment worked. Just run the npx fiori add deploy-config with the same parameters than the first deployment. I actually used the same TR also. In the CL it says that the original app-file gets updated, and it did :).

-Heikki

[ManojKumarVarma]

Hi Pritesh and everyone,

Can anyone solve my issue. I am facing this from last few days, I didn't get solved can anyone please help me out.

Thanks in advance.

[priteshpatel65]

Hi manoj

Try below url in index.html file

src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

 

Thanks & Regards

Pritesh Patel

[ManojKumarVarma]

Hi Pritesh,

Thanks for your response.

Actually what I am doing is " I have deployed my application to HTML Repository but I am trying to push my application to the cloud foundry when I am doing this using command  'cf push app_name'.

While I am doing, I am getting this error. I have tried using this source too, but no use. src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

Please can you help me out from this, if possible.

You can check screenshots, here I am attaching.

Thanks & Regards,

Manoj Kumar P.

[Arpan2]

Hi @Petyo Georgiev,

 

We are facing a similar kind of issue. Can you help me by providing the solution for the same ?

 

Thanks in Advance

[9011609270]

Same here ... Any help is appreciated

 

Regards, Jan

[Frank-Kohler]

We face the same issue. Can please anyone help to solve it?

[Frank-Kohler]

I found the solution. By mistake I used the deprecated version:
https://www.npmjs.com/package/@sap/ux-ui5-fe-mockserver-middleware

using this version worked fine:
https://www.npmjs.com/package/@sap-ux/ui5-middleware-fe-mockserver

[P281512]

Hi Frank

Asked a question
https://answers.sap.com/questions/13959494/fiori-elements-issues-faced-in-vscode-and-bas.html

If you have time please have a look 

Regards

Jayanta

[P281512]

Hi Frank

May interest you - found solution
https://answers.sap.com/answers/13959997/view.html

Regards
Jayanta