Running SAP UI5 Fiori Application Locally in SAP Business Application Studio (BAS): A Practical Guide

[showkath_naseem]

Introduction:

SAP UI5 Fiori applications are fundamental in crafting intuitive user interfaces akin to state-of-the-art applications built on the robust UI5 framework, providing a seamless and engaging user experience.

Generally, to connect your Cloud Application to Backend (Internal or External System), you need to deploy the solution to BTP so that BTP Infrastructure will take care of the connection securely.

However, during the design and development phase of the BTP application, if you would like to preview the application locally, so that you can run/debug locally without deployment, then SAP Fiori tools offer the sap/ux-ui5-tooling npm package.

In this guide, I will delve into the essential approaches for achieving this goal, assuming you already have the necessary prerequisites and configurations in place, excluding UI5 CLI Tooling and @sap/ux-ui5-tooling setup.

---

Prerequisites:

• Existing SAP UI5 Project:
  Assume you've already set up an SAP UI5 Fiori application project, and it's ready for local deployment.
• Trial Account on SAP BTP:
  If you don’t have one, follow the instructions in: Get a Free Trial Account on SAP Cloud Platform.
• IDE: SAP Business Application Studio (BAS) Setup:
  Ensure that you have set up SAP Business Application Studio (also known as SAP BAS) in your BTP trial account. SAP BAS is the next generation of SAP Web IDE.
  For detailed instructions:
  Set Up SAP Business Application Studio for Development
  SAP Business Application Studio Dev Space Fiori Create
• (Optional) Backend Service Configuration:
  If your Fiori application requires connectivity to an external service (OData/Rest API), ensure you've handled necessary BTP (SAP Business Technology Platform) configurations, such as Destinations.

Destination at BTP:

To enable BAS to detect the destination, add the destination at the BTP Sub Account level, at least for the Development sub-account. This helps for local debugging/running the application locally to connect to external service APIs before you deploy to BTP. For other environments like QA and Prod, you can maintain instance-based (inside space) services.

For more information see: https://github.com/SAP-docs/btp-business-application-studio/blob/main/docs/connecting-to-external-sy...

Add the following additional properties to the created destination:

• WebIDEEnabled = true
• HTML5.DynamicDestination = true
• WebIDEUsage = odata_gen

Setting the WebIDEUsage Property for Your Destination Type:

Destination Type and Properties

Destination Type WebIDEUsage Value Description

ABAP System	odata_abap, dev_abap	odata_abap: For exploring ABAP service catalogs. dev_abap: For deploying to the SAPUI5 ABAP Repository and developing extension projects.
SAP Cloud for Customer	odata_c4c	Used to explore SAP Cloud for Customer catalogs.
Service URL	odata_gen	For an absolute URL, use the full URL option (WebIDEAdditionalData property with full_url as the value). For a service host, add the relative URL upon login.
SAP Business Accelerator Hub	apihub_sandbox	For accessing API Hub in a sandbox environment.

Integration Steps for Specific Systems:

If you are using an ABAP system from SAP BTP, ABAP environment, or SAP S/4HANA Cloud, follow these integration steps:

• SAP S/4HANA Cloud, public edition: Integrating SAP Business Application Studio
• SAP BTP, ABAP environment: Setup of UI Development in SAP Business Application Studio

On-premise System Connectivity:

If you are using an on-premise system, configure the Cloud Connector to expose your system correctly. Refer to Cloud Connector.

If you don’t have a Cloud Connector, set one up on your local machine or VM.

Note:

In the Access Control tab of the Cloud Connector, grant access to all relevant URL paths (Resources) to access the system. Select the "Path and all sub-paths" option for Access Policy.

Example paths:

• /sap/opu/odata
• /sap/bc/adt
• /sap/bc/ui2/app_index/
• /sap/bc/ui5_ui5

Once the destination is created, SAP Business Application Studio developers can use it in their dev spaces. See Accessing On Premise Systems.

Additional Note:

If you cannot access the on-premise system and there is an allowlist in your network, make sure to allow BAS inbound IPs as described in SAP Business Application Studio Availability.

Options for Running SAP UI5 Fiori Application Locally in SAP BAS:

1 ) SAP BAS Terminal:

1. Open Terminal in BAS: Access the terminal within SAP Business Application Studio.
2. Navigate to the Project Directory: If Node modules are not installed, run npm install in the terminal.
3. Start a Local Development Server: Use the command npm start or ui5 serve within the terminal to initiate a local development server, serving your Fiori application locally.                                     Alternatively, use npm run start-local command as per your project start command in package.json file.
4. Ensure Configuration of the Following Files:
   • ui5.yaml for connection adoption. More details here.
   • package.json start script.
   • manifest.json. For more insights, refer to this related blog.
5. Access the Application: BAS automatically opens a web browser tab and loads the application at the specified URL, typically https://port8080-workspaces-ws-pnjgb.eu10.applicationstudio.cloud.sap/index.html.

2 )SAP BAS Preview Mode:

1. Open Application Information Page: Open the command palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac). You can also open it using the menu item View > Command Palette… and select Fiori: Open Application Info.
2. Click on Preview Application:
3. Choose an option as per your needs.
4. Note: An Application Information page provides an overview of project details and tasks you may perform on this project. It is recommended to keep this page open as it will be used in other steps.

Output:

When you start the debug server, SAP Business Application Studio will open the application in a new tab. As demonstrated in the screenshot below, you can view $metadata of the Northwind service in the Network tab.

3 ) Run Configuration:

For a customized approach to running your SAP UI5 Fiori application, you can configure specific run settings based on your project requirements. This allows for greater control and flexibility in your local development process.

1. Navigate to Run Configurations: Access the Run Configurations section in your BAS environment.
2. Create a New Configuration: Set up a new configuration tailored to your project needs.
3. Configure the Settings: Adjust the settings as required for your local development.
4. Save the Configuration: Ensure that your configuration settings are saved.
5. Run the Application: Use the newly created configuration to run your application.

Conclusion:

Running and debugging SAP UI5 Fiori applications locally using SAP Business Application Studio (BAS) with UI5 tooling provides an efficient way to develop and preview applications without immediate deployment to SAP BTP. By following the steps and configurations outlined in this guide, developers can enhance productivity and streamline the development process.

Thank You for Reading!

If you found this blog post beneficial in your learning journey, please click the Like ‌👍‌ button and share your feedback in the Comments section below. Additionally, follow me for more valuable content. Your support means a lot to me!

Reference:

• Connect to External Data Sources with SAP Business Application Studio
• ui5.yaml
• UI5 Tooling: a modern development experience for UI5!

If you encounter any problems, have feedback, or need help, feel free to leave a comment or contact the SAP Community for assistance.