How to Deploy an SAPUI5 App

Manual deployment of SAPUI5 apps is a simpler and more immediately accessible option compared to automated procedures, as it only requires an integrated development environment (IDE) and no additional services or extensive infrastructure.

This approach is particularly suitable for development and test environments where fast results and direct control over the deployment process are required.

We’ll first use this post to introduce the deployment of SAPUI5 apps to SAP Business Technology Platform (SAP BTP). SAP BTP provides a robust cloud environment that enables SAPUI5 apps to be deployed directly in the cloud and made available to users. We’ll go through the steps and configurations required to successfully deploy your app on SAP BTP. This includes creating a corresponding HTML5 repository and configuring the target environment to ensure that the app is correctly available to end users.

We’ll then discuss deployment to an SAP S/4HANA on-premise system. This option is particularly relevant for companies that want to operate their SAPUI5 apps within a local system landscape and without an external cloud connection. Deployment in an on-premise environment requires that the SAP S/4HANA system is correctly configured to accept and run HTML5 applications. In this section, we’ll explain the necessary steps and prerequisites in detail to ensure a smooth deployment and optimal performance of the application in the SAP S/4HANA context.

In principle, it’s also possible to deploy SAPUI5 apps as static HTML pages on a conventional web server such as nginx or Apache Tomcat. This can be a cost-effective and flexible alternative if the app is to be operated independently of SAP systems or if fast, standalone deployment is required. This method is particularly suitable for scenarios in which no special SAP backend functionalities are required. We’ll also cover the basic steps on how to configure an SAPUI5 app as a static website and host it on a web server, including the necessary customizations in the configuration file to ensure that the app loads and runs correctly.

SAP Business Technology Platform

To deploy an SAPUI5 app to SAP BTP, a few preparatory steps are necessary. First, an mta.yaml file is added to the project, which describes the concept of the multi-target application (MTA). In this file, you define which modules and resources belong to your application, how they are connected to each other, and which dependencies exist.

The mta.yaml file is to a certain extent the heart of the deployment configuration and ensures that all components of the application can be provided together and coherently. In addition to mta.yaml, you need an xs-app.json and an xs-security.json file. The xs-app.json file defines important routes and access control for your application. It ensures that the app can be reached via the correct URLs and that access to the various parts of the application is regulated. The xs-security.json in turn is responsible for the security configuration. This is where the authentication and authorization rules are defined to ensure that only authorized users have access to the application and its data.

A deployment configuration is created to ensure that these files are correctly and completely available in the project. This configuration helps to automatically create and adapt all necessary files such as mta.yaml, xs-app.json, and xs-security.json. This structures and simplifies the entire deployment process, and you can be sure that your SAPUI5 app is optimally prepared to be deployed as an MTA in SAP BTP.

In the following, we’ll show you how to create these steps using the application information. In the first step, right-click to open the context menu in the webapp folder in your project, as shown in the figure below, and click on the menu item Open Application Info.

The application info provides you with an overview of your app. In addition, you can perform common operations such as adding an OData service at this point. It’s also possible to create a deploy config. To do this, click Add Deploy Config, as shown in this figure.

In the next step, select Cloud Foundry as the target environment. In the Destination Name field, you can select the None option. At this point, you can also specify a particular destination to be used for the deployment. Then, select the Yes option to add the Managed Application Router and confirm by also selecting Yes to overwrite the existing configuration. Finally, click Finish.

The managed application router enables access to and execution of HTML5 applications in a cloud environment without the need to operate a proprietary runtime infrastructure. This runtime environment for HTML5 applications is provided by the following products:

• SAP Build Work Zone, standard edition
• SAP Build Work Zone, advanced edition
• SAP Cloud Portal

In the next step, the files mta.yaml, xs-app.json, xs-security.json, and ui5-deploy.yaml are automatically added to the project, as shown below.

The deployment is controlled by the ui5-deploy.yaml file. Open this to familiarize yourself with the structure of the file. The name attribute in the metadata area and the type that has the application value are important.

Before an app can be deployed, a build must be carried out. To do this, open the context menu of the mta.yaml file, and select the entry Build MTA Project.

This adds a directory called mta_archives to the project, as shown in the next figure. The result of the build is stored in this directory in the form of a MTA archive (.mtar). Open the context menu on this file, and select Deploy MTA Archive to start the deployment.

Before the deployment is carried out, however, you still must register with the Cloud Foundry Endpoint via the API. The subaccount in which SAP Business Application Studio is located is proposed as the Cloud Foundry endpoint. You can either register with Credentials or with an SSO Passcode. We’ve chosen the SSO Passcode option. To do this, click on the link shown below.

This opens a new window in which you must select the desired identity provider (see figure below). You’ll then be authenticated against this identity provider.

After successful authentication, the Temporary Authentication Code is displayed, as shown in the next figure. Copy this to the clipboard.

Now insert the generated authentication code into the Enter your SSO Passcode field, and click on Sign In.

As shown in the following figure, you can now see that you’re logged in to the Cloud Foundry environment. You now need to select a Cloud Foundry Organization and then a Cloud Foundry Space within that organization. Click Apply.

The deployment is now started. This may take some time. The terminal will display the deployment status and also its successful execution, as shown here.

Now open the SAP BTP cockpit for the subaccount, and navigate to the HTML5 Applications area in the side menu, as shown in the figure below. In our example, you won’t find any applications in the figure. You’ll only see a note telling you that you need to subscribe to an edition of SAP Build Work Zone or the SAP Cloud Portal service. This is because we’ve decided to use the managed application router.

SAP S/4HANA

After learning how to deploy to SAP BTP in the previous section, this section shows how to deploy an SAPUI5 app to an on-premise SAP S/4HANA system. The deployment to an SAP NetWeaver AS ABAP system is identical. The prerequisite for this is that a destination is created in the subaccount in which SAP Business Application Studio is also running. The virtual hostname with the appropriate port must be stored in the URL field. You can view this in the cloud connector.

Select OnPremise as the Proxy Type, and maintain the desired type of authentication. We’ve decided to use NoAuthentication, as shown in the below figure. This means that the developer is prompted to enter a username and password during deployment. In addition, create the following Additional Properties:

• DynamicDestination = “true”
• Timout = “30000”
• WebIDEEnabled = “true”
• WebIDEUsage = “odata_abap,dev_abap” 

You now must create a deploy configuration for your project. To do this, open the Application Information page as we’ve already done. On this page, click on Add Deploy Configuration.

In the Please choose the target field, select ABAP (see next figure). In the Destination field, select the destination you created earlier. Now enter a username and the corresponding password for the SAP S/4HANA system. Then, click the button next to the password to log in.

After that, you must enter the SAPUI5 ABAP Repository. This is the name of the Business Server Pages (BSP) application that is created for your app. Note that this must be in the customer namespace or a namespace that you’ve registered. Then, optionally assign a Deployment Description, and enter a Package and a Transport Request. In the example shown, we’ve decided on the “$TMP” package. Therefore, no transport request needs to be specified. Finally, click Finish to create the configuration artifacts.

As you can see in the next figure, a file named ui5-deploy.yaml has been added to your app. Open it and take a look at the content. You’ll find all the entries you made previously there.

The deployment is started via a terminal. Therefore, as shown in the next figure, open a new terminal window using the context menu, and select Terminal > New Terminal.

Run the command npm run deploy in the terminal.

As shown in the figure below, you’ll now see a series of tasks that are carried out. You must then confirm that you want to start a deployment with the configuration shown by entering the letter “Y”.

The deployment can take some time. The terminal displays the deployment status (see final figure). If the deployment was successful, you should see the output Deployment Successful. However, errors may also occur. For example, the name of the application may already be in use, or you may have referenced a transport request that has already been released. In all cases, you’ll see an informative error message.

Editor’s note: This post has been adapted from a section of the SAPUI5: The Comprehensive Guide by Rene Glavanovits, Martin Koch, Daniel Krancz, and Maximilian Olzinger. Rene is an SAP consultant and developer who specializes in the latest SAP technologies, specifically in the development of full-stack applications with SAP Fiori, SAPUI5, OData, CDS, and SAP Cloud Application Programming Model. Martin conducts training for SAP and has developed four training courses on the topics of SAPUI5, SAP Fiori, cloud integration, and cloud security. Daniel is a software developer and consultant who focuses on full-stack development with SAPUI5, SAP Fiori, OData, SAP Cloud Application Programming Model, as well as mobile development. Maximilian is a software developer and consultant. He is an SAP Certified Development Associate and has handled projects for companies in all industries with great success. He conducts trainings in the areas of SAP Fiori, ABAP and web development.

This post was originally published 7/2025.