Skip to Content
Technical Articles
Author's profile photo Pritesh Patel
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.

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

    npx%20fiori%20add%20deploy-confix

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

    Deploy

  5.  Check Your configuration and press ‘Y’ Enter system credential and press enterSuccessfully%20deploy

    I hope this post will help you to deploy the ui5/fiori like application to your on-premise SAP system.

     

    Regards

    Pritesh Patel

     

Assigned Tags

      18 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sai Shanmuka
      Sai Shanmuka

      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?

      Author's profile photo Pritesh Patel
      Pritesh Patel
      Blog Post Author

      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

      Author's profile photo Ranjeet Kumar
      Ranjeet Kumar

      @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

      Author's profile photo Pritesh Patel
      Pritesh Patel
      Blog Post Author

      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

       

      Author's profile photo Heikki Ladau
      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

      Author's profile photo Digant Trivedi
      Digant Trivedi

      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

      Author's profile photo Pritesh Patel
      Pritesh Patel
      Blog Post Author

      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
      Author's profile photo Ancuta Mezinca
      Ancuta Mezinca

      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

      Author's profile photo Tatsuya Maeda
      Tatsuya Maeda

      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.

      Author's profile photo Pritesh Patel
      Pritesh Patel
      Blog Post Author

      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.

      1. Refresh the Page
      2. Clear Browser Cache
      3. Try in Incognito Mode
      4. Check Error Log

      Regards

      Pritesh Patel

       

      Author's profile photo Bala Karthik Ramesh
      Bala Karthik Ramesh

      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

      Author's profile photo Pritesh Patel
      Pritesh Patel
      Blog Post Author

      Hi Bala Karthik Ramesh

       

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

       

      Regards

      Pritesh Patel

      Author's profile photo Abhishek Nayak
      Abhishek Nayak

      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
      Author's profile photo Pritesh Patel
      Pritesh Patel
      Blog Post Author

      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

      Author's profile photo Abhishek Nayak
      Abhishek Nayak

      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.

      Author's profile photo Pritesh Patel
      Pritesh Patel
      Blog Post Author

      @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

       

       

      Author's profile photo Petyo Georgiev
      Petyo Georgiev

      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

      Author's profile photo Manoj Kumar Potharaju
      Manoj Kumar Potharaju

      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.