Skip to content
master
Switch branches/tags
Go to file
Code

OpenUI5 logo

openui5-sample-app

OpenUI5 sample app using the UI5 Tooling.

REUSE status

Prerequisites

Getting started

  1. Clone this repository and navigate into it

    git clone https://github.com/SAP/openui5-sample-app.git
    cd openui5-sample-app
  2. Install all dependencies

    npm install
  3. Start a local server and run the application (http://localhost:8080/index.html)

    ui5 serve -o index.html

Testing

  • Run ESLint code validation
    npm run lint
  • Start the Karma Test Runner with the UI5 Plugin and execute the tests automatically after every change
    npm run watch
  • Run both ESLint and Karma in CI mode
    npm test

Building

Option 1: Standard preload build

  1. Execute the build
    ui5 build -a
  2. Run the result
    1. Run a local HTTP server on the build results (/dist directory)
      (Note: This script is using the local-web-server npm module, but you can use any HTTP server for that)
      npm run serve-dist
    2. Open the app at http://localhost:8000

Option 2: Self-contained build

  1. (Optional) Remove previous build results
    rm -rf ./dist
  2. Execute the self-contained build to create a bundle with all of your applications runtime dependencies
    ui5 build self-contained -a
  3. Run the result
    1. Run a local HTTP server on the build results (/dist directory)
      (Note: This script is using the local-web-server npm module, but you can use any HTTP server for that)
      npm run serve-dist
    2. Open the app at http://localhost:8000

Working with local dependencies

For local development of your applications' dependencies (like OpenUI5 libraries) you can link them by using Yarn. This will allow you to make changes to your applications dependencies locally and see the impact in your application immediately.

Note: Currently only Yarn understands the workspace package setting used in the OpenUI5 repository. If you do not plan to work with OpenUI5 you might as well use npm. But keep in mind that linking the same module with npm and Yarn might lead to issues. Also, Yarn can't work with links created by npm and vice versa. See FAQ: What's the thing with yarn? for details.

Prerequisites

Preparation

The following needs to be done just once per setup.

  1. Clone the OpenUI5 repository and navigate into it Note: The UI5 version must be 1.65.0 or higher, you can check that in the root package.json file
    git clone https://github.com/SAP/openui5.git
    cd openui5
  2. Install all dependencies (this also links all OpenUI5 libraries between each other)
    yarn
  3. Make all projects available as global links. Note: The OpenUI5 project uses wsrun to link all libraries with one command. See Linking Projects for general information about project linking.
    In the OpenUI5 root directory, execute:
    yarn run link-all
  4. The UI5 Tooling currently does not support linking of framework libraries defined in the ui5.yaml (see [RFC] 0006 Local Dependency Resolution). Therefore you need to first remove them from there. Instead, you need to add the dependencies via Yarn, so that they can be linked in the next step.
    In the application directory, execute:
    ui5 remove sap.f sap.m sap.ui.core sap.ui.unified themelib_sap_fiori_3
    yarn add @openui5/sap.f
    yarn add @openui5/sap.m
    yarn add @openui5/sap.ui.core
    yarn add @openui5/sap.ui.unified
    yarn add @openui5/themelib_sap_fiori_3

Linking

  1. In your application directory: Link the required OpenUI5 libraries
    yarn link @openui5/sap.f
    yarn link @openui5/sap.m
    yarn link @openui5/sap.ui.core
    yarn link @openui5/sap.ui.unified
    yarn link @openui5/themelib_sap_fiori_3

You can now make changes in your local OpenUI5 repository and see the impact directly when serving or building your application.

Unlinking

To return to using the OpenUI5 npm packages

  1. Remove the dependencies via Yarn
    yarn remove @openui5/sap.f
    yarn remove @openui5/sap.m
    yarn remove @openui5/sap.ui.core
    yarn remove @openui5/sap.ui.unified
    yarn remove @openui5/themelib_sap_fiori_3
  2. Re-add the libraries to the framework section of the ui5.yaml
    ui5 add sap.f sap.m sap.ui.core sap.ui.unified themelib_sap_fiori_3