Skip to content

UI5 CLI

Jump to bottom
Marco Beier edited this page Feb 6, 2021 · 23 revisions

Introduction

In order to work with UI5 like you'd normally work with most of the other JS-frameworks out there (e.g. React, Angular or Vue), SAP introduced the open source UI5 tooling which is capsulated in a CLI-based tool that helps in developing UI5 application locally. Though I say 'locally' here, the tooling is very open and extensible and can be used in any IDE for example: SAP Web IDE, SAP Business Application Studio or Visual Studio Code.

Module Overview of the UI5-CLI (tooling):

The Ecosystem

There is an entire ecosystem out there that can help you develop, test and deploy UI5 applications.

Tooling Architecture

Tooling Extensibility

Tooling Project Types

The project types are configured within the ui5.yaml file.

Tooling Configuration

The ui5.yaml is the configuration file for the UI5 tooling and is necessary in order to work with the CLI. In here there are several different options and settings which you can configure. Be it custom tasks, middlewares or (new with CLI 2.0) the UI5 dependencies.

You can even use the UI5 tooling in order to run the built application (usually build into a folder named dist) locally. Therefore you just copy the ui5.yaml file and rename it to ui5-dist.yaml and add the following configuration within the renamed yaml file.

resources:
  configuration:
    paths:
      webapp: dist

After having added the configuration within the ui5-dist.yaml file, you run the CLI with the --config flag to change the path to the newly created .yaml file. Without the --config flag, the UI5 tooling would always look for standard configuration file (ui5.yaml).

$> ui5 <command> --config /path/to/ui5-dist.yaml

UI5 CLI 2.0 Dependency Configuration

You no longer add OpenUI5 or SAPUI5 libraries via npm and the respective package.json file. Instead you add them via the UI5 CLI. This way the UI5 tooling takes care of downloading the correct dependencies in the background when using commands like ui5 serve or ui5 build. Custom libraries and other dependencies are still consumed using a node package manager like npm and defined in the projects package.json.

To make use of dependency declaration via the UI5 CLI and the corresponding ui5.yaml you have to specify it's specVersion to 2.0.

specVersion: '2.2'
metadata:
  name: <projectNameHere>
type: application

Before adding the library dependencies the tooling has to know what framework we're using. SAP added two new commands to the CLI to make it easier for us: ui5 use <framework><version> and ui5 add <library>.

Add framework with specific version 1.76.0:

$> ui5 use [email protected]

# alternatively get the latest version with:

$> ui5 use openui5@latest

Add a few dependencies:

$> ui5 add sap.ui.core sap.m sap.ui.layout themelib_sap_fiori_3 themelib_sap_belize

Result:

Some libraries might be for testing and development purposes only and can be flagged as development. This prevents them from being downloaded, unless the current project is the root project.

specVersion: '2.2'
# [...]
framework:
  name: OpenUI5
  version: "1.76.0"
  libraries:
    - name: sap.m
    - name: sap.ui.core
    - name: sap.ui.layout
    - name: themelib_sap_fiori_3
    - name: themelib_sap_belize
      development: true

More about the UI5 Tooling Configuration here.

UI5 Code Completion

Currently there is no 'real' code completion on UI5 for IDEs, but there is a nice workaround for that. You use the typescript npm package of UI5 to get code completion.

Typescript NPM Package: @openui5/ts-types

Configuration for the tsconfig.json file:

{
    "compilerOptions": {
        "module": "none",
        "noEmit": true,
        "checkJs": true,
        "allowJs": true,
        "types": ["@openui5/ts-types"]
    }
}

alternatively: jsconfig.json file:

{
    "typeAcquisition": {
        "include": [
            "@types/openui5"
        ]
    }
}

or:

{
    "include": [
        "**/*.js",
        "**/*.json",
        "node_modules/@openui5/ts-types/types"
    ]
}

Example:

Disclaimer

Although the SAPUI5 libraries are now generally available via NPM, due to the license they're distributed under, their usage remains limited/restricted to UI5 applications that will be deployed on SAP Systems only.

Credits

Disclaimer

I do not claim to have everything written completely by myself. For more information check the credits section underneath the respective wiki pages.

Clone this wiki locally