UI5 Tooling

Appearance

Getting Started ​

Installing the UI5 CLI ​

Requirements ​

  • Node.js Versions v20.11.0, v22.0.0, or higher

Installation ​

sh
# Global installation to have the command available
npm install --global @ui5/cli

# Additional local install in your project
npm install --save-dev @ui5/cli

# Verify installation
ui5 --help

The globally installed UI5 CLI will always try to invoke a locally installed version of the UI5 CLI (if present). This way you can use different versions of the UI5 Tooling across your projects. Please see the UI5 CLI documentation for details.

⚡️ Quick Start: OpenUI5 Sample App ​

Check out the OpenUI5 Sample App featuring a full blown How-to to play around with UI5 Tooling!

Starting a New Project ​

The easiest way to start a new UI5 project is to use a template generator like generator-easy-ui5.

Choose a template that is designed for the type of project you want to create and the target environment where you want to deploy it to. Make sure that the template already uses UI5 Tooling. A good indicator for that is the presence of a ui5.yaml file in the generated project.

When working with SAP Business Application Studio, there are several templates available to you. Check out the tutorial on creating a basic SAPUI5 application and deploying it to Cloud Foundry from within SAP Business Application Studio: Create an SAP Fiori App Using SAP Business Application Studio

You can find many guides on UI5 development with SAP Business Application Studio in the Tutorial Navigator.

Enabling an Existing Project ​

You can easily check whether or not a project (application or library) can already be used with the UI5 Tooling by looking for a ui5.yaml file in the project's root directory.
This file (with some exceptions) is required for all projects and their dependencies (e.g. reuse libraries) to use them in the UI5 Tooling.

Setup ​

If your project is not set up for use with the UI5 Tooling yet, follow these steps:

  1. If your project does not have a package.json file, let npm generate it:

    sh
    npm init --yes

  2. Generate the ui5.yaml file:

    sh
    ui5 init

  3. Define the framework you want to use

sh
ui5 use openui5@latest
sh
ui5 use sapui5@latest

You can choose between the OpenUI5 and the SAPUI5 framework.

Don't know which one to choose? Check out our documentation on the differences between OpenUI5 and SAPUI5.

  1. Add required libraries

    sh
    ui5 add sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 # [...]

    You can find a documentation of all libraries, including samples and more, in the Demo Kit:

  2. Start the server and work on your project! 🎉

    sh
    ui5 serve

Tip

Use ui5 serve to start a local development server and ui5 build --all to produce an optimized, static version of your project, which you can then deploy to your production environment.

Find more information here:

  1. If you are using Git or similar version control, commit package.json and ui5.yaml to your repository.
    sh
    git add package.json ui5.yaml
git commit -m "Enable use with UI5 Tooling"

Hooray! You can now use UI5 Tooling in your project!