Technical Articles

Pritesh Patel

April 16, 2022 3 minute read

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

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 Information published on SAP site .

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.

Get a Free Trial Account on SAP Business Technology Platform
Set Up SAP Business Application Studio for Development
Create a Dev Space for SAP Fiori Apps
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
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

Right-click the project folder and select Open in Terminal.
Enter npm install:

user: <SAP Fiori project> $ npm install
Add Deploy configuration using npx fiori add deploy-config commanduser:<SAP Fiori Project> $npx fiori add deploy-config
Enter Npm run deploy:user:<SAP Fiori Project> $npm run deploy
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

26 Comments

You must be Logged on to comment or reply to a post.

Sai Shanmuka

June 1, 2022 at 7:03 am

hello Pritesh Patel

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?

Pritesh Patel

Blog Post Author

June 2, 2022 at 9:13 am

Hi Sai Shanmuka

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

Ranjeet Kumar

June 2, 2022 at 7:45 am

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

For Example

created a new application in BAS, deploy it after all configuration and command.
now received a change request from business, did all the modification and tested it is working fine locally in BAS
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

Pritesh Patel

Blog Post Author

June 2, 2022 at 9:24 am

Dear Ranjeet Kumar

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

Heikki Ladau

March 31, 2023 at 5:48 am

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

Digant Trivedi

June 29, 2022 at 11:03 am

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

Error

Pritesh Patel

Blog Post Author

July 5, 2022 at 9:52 am

Hi Digant Trivedi

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

Ancuta Mezinca

September 5, 2022 at 5:27 pm

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

Tatsuya Maeda

October 11, 2022 at 6:40 am

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.

Pritesh Patel

Blog Post Author

October 14, 2022 at 8:35 am

hi Tatsuya Maeda

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.

Refresh the Page
Clear Browser Cache
Try in Incognito Mode
Check Error Log

Regards

Pritesh Patel

Bala Karthik Ramesh

October 14, 2022 at 4:46 am

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

Pritesh Patel

Blog Post Author

October 14, 2022 at 8:27 am

Hi Bala Karthik Ramesh

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

Regards

Pritesh Patel

Abhishek Nayak

October 25, 2022 at 10:38 am

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

Pritesh Patel

Blog Post Author

October 27, 2022 at 4:46 am

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

Abhishek Nayak

October 27, 2022 at 4:51 am

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.

Pritesh Patel

Blog Post Author

October 27, 2022 at 7:07 am

@Abhishek Nayak

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

Petyo Georgiev

February 27, 2023 at 11:47 am

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

Arpan Podder

June 26, 2023 at 3:47 pm

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

Jan Loewe

July 17, 2023 at 10:57 am

Same here ... Any help is appreciated

Regards, Jan

Frank Kohler

July 18, 2023 at 6:42 am

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

Frank Kohler

July 18, 2023 at 9:29 am

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

Jayanta Choudhuri

August 31, 2023 at 11:11 am

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

Jayanta Choudhuri

September 2, 2023 at 3:10 pm

Hi Frank

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

Regards
Jayanta

Manoj Kumar Potharaju

May 31, 2023 at 1:35 pm

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.

Pritesh Patel

Blog Post Author

June 19, 2023 at 11:21 am

Hi manoj

Try below url in index.html file

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

Thanks & Regards

Pritesh Patel

Manoj Kumar Potharaju

June 21, 2023 at 6:08 am

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.

Technical Articles

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

Hello Everyone,

Overview

How to access SAP Business Application Studio

Prerequisites

Procedure To Deploy

Assigned Tags