Getting Started¶
Installing the UI5 CLI¶
Requirements¶
- Node.js Version 10 or later
Installation¶
# 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:
-
If your project does not have a
package.json
file, let npm generate it:npm init --yes
-
Generate the
ui5.yaml
file:ui5 init
-
Define the framework you want to use
ui5 use openui5@latest
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.
-
Add required libraries
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:
-
Start the server and work on your project! 🎉
ui5 serve
-
If you are using Git or similar version control, commit
package.json
andui5.yaml
to your repository.git add package.json ui5.yaml git commit -m "Enable use with UI5 Tooling"