Skip to content

UI5 logo

UI5 Tooling

An open and modular toolchain to develop state-of-the-art applications based on the UI5 framework.

Get Started

Main Features

๐Ÿ’ป UI5 CLI

Also see the UI5 CLI Documentation

# Global
npm install --global @ui5/cli

# In your project
npm install --save-dev @ui5/cli

โš™๏ธ Project Setup

Configure your project for use with the UI5 Tooling.
Also see the Configuration Documentation

โฏ ui5 init
Wrote ui5.yaml:

specVersion: '2.4'
metadata:
  name: my-app
type: application

๐Ÿšš Dependency Management

UI5 framework dependencies are managed by the tooling. All other dependencies are managed by your favorite node package manager.

โฏ ui5 use SAPUI5@1.76.0
Updated configuration written to ui5.yaml
This project is now using SAPUI5 version 1.76.0

โฏ ui5 add sap.ui.core sap.m themelib_sap_fiori_3
Updated configuration written to ui5.yaml
Added framework libraries sap.ui.core sap.m themelib_sap_fiori_3 as dependencies

๐Ÿ„ Development Server

Start a local development server to work on your project.
Also see the Server Documentation

โฏ ui5 serve
Server started
URL: http://localhost:8080

๐Ÿ›  Build for Production

Build an optimized version of your project.
Also see the Builder Documentation

โฏ ui5 build
Building my-app...
๐Ÿ”จ (1/8) Running task escapeNonAsciiCharacters...
๐Ÿ”จ (2/8) Running task replaceCopyright...
๐Ÿ”จ (3/8) Running task replaceVersion...
๐Ÿ”จ (4/8) Running task generateFlexChangesBundle...
๐Ÿ”จ (5/8) Running task generateComponentPreload...
๐Ÿ”จ (6/8) Running task createDebugFiles...
๐Ÿ”จ (7/8) Running task uglify...
๐Ÿ”จ (8/8) Running task generateVersionInfo...
Build succeeded in 363 ms

๐Ÿงช Node.js API

Most UI5 Tooling modules provide JavaScript APIs for direct consumption in other Node.js projects. This allows you to rely on UI5 Tooling for UI5-specific build functionality and project handling, while creating your own tools to perfectly match the needs of your project.

All available APIs are documented in the UI5 Tooling API Reference.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const {normalizer} = require("@ui5/project");
const {builder} = require("@ui5/builder");

async function buildApp(projectPath, destinationPath) {
    const tree = await normalizer.generateProjectTree({
        cwd: projectPath
    });
    await builder.build({
        tree,
        destPath: destinationPath,
        selfContained: true,
        excludedTasks: ["transformBootstrapHtml"],
        buildDependencies: true
    });
}

[...]