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

By /

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:

  1. Existing SAP UI5 Project:
    Assume you’ve already set up an SAP UI5 Fiori application project, and it’s ready for local deployment.
  2. You need a trial account on SAP BTP. If you don’t have one, follow the instructions in:
    Get a Free Trial Account on SAP Cloud Platform.
  3. 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
  4. (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.

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

If you found this blog post useful in your learning journey, please consider giving it a ‘‘Like’ ,‘Share’  it with your friends and followers, and ‘Follow’ me for more valuable content. Your support means a lot to me!

1. SAP BAS Terminal:

    1. Open Terminal in BAS
    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 my Fiori application locally.

      npm run start-local
    4. Access the Application:
      BAS automatically opens a web browser tab and opens 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 open it any time using the menu item View > Command Palette… and select Fiori: Open Application Info.
  2. Click on Preview Application.
  3. Choose an option as per need.

Note: An Application Information page is shown giving you an overview of project details and tasks that you may perform on this project. It is recommended that you keep this page open as it will be used in other steps.

Output:

SAP Business Application Studio opens the application in a new tab, as demonstrated in the below screenshot, 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.

To set up a run configuration:

  1. Navigate to Run Configurations:
  2. Create a New Configuration:
  3. Configure the Settings:
  4. Save the Configuration:
  5. Run the Application:

Thank you for reading! If you found this blog post useful in your learning journey, please consider giving it a ‘‘Like’ ,‘Share’  it with your friends and followers, and ‘Follow’ me for more valuable content. Your support means a lot to me!

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

Scroll to Top