docs

Step 1: Hello World! (TypeScript)

As you know OpenUI5 is all about HTML5. Let’s get started with building a first “Hello World” with HTML. This tutorial version has been set up in a way that allows the use of UI5 Tooling in combination with it.

Preview

The browser shows the text “Hello World”

The browser shows the text "Hello World"

Setup

Open a terminal and install UI5 Tooling globally on your machine by executing the following command:

npm install --global @ui5/cli

Coding

You can view all files at OpenUI5 TypeScript Walkthrough - Step 1: Hello World! and download the solution as a zip file.

Create a folder on your local machine which will contain all the sources of the app we’re going to build. We refer to this folder as the “app root directory”.

webapp/index.html (New)

In the app root directory, we create a new folder named webapp. This folder exists to store all the sources that become available in the browser later. We refer to this folder as the “webapp folder”.

In our webapp folder, we create a new HTML file named index.html and enter the following content:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 TypeScript Walkthrough</title>
</head>
<body>
	<div>Hello World</div>
</body>
</html>

Note:

An HTML document consists basically of two sections: head and body. The head part will be used by the browser to process the document.

Using meta tags, we can influence the behavior of the browser. In this case, we tell the browser to use UTF-8 as the document character set.

We also give our app a title that will be displayed in the browser. Our hard-coded title can be overruled by the app, for example to show a title in the language of the user. The body part describes the layout of the page. In our case, we simply display “Hello World” by using a div tag.

webapp/manifest.json (New)

The manifest file, also known as the “descriptor” or “app descriptor,” serves as a crucial configuration file for applications, components, and libraries. Stored in the webapp folder, this file is read by OpenUI5 to instantiate a component. Although we haven’t created a component yet (which is part of Step 9: Component Configuration (TypeScript)), we need to create the app descriptor now because the UI5 Tooling we intend to use for development also requires it.

Hence, we create a new file named manifest.json in the webapp folder and define its essential attributes:

{
  "_version": "1.65.0",
  "sap.app": {
    "id": "ui5.walkthrough",
    "type": "application",
    "title": "UI5 TypeScript Walkthrough",
    "applicationVersion": {
      "version": "1.0.0"
    }
  }
}

Note:

In this tutorial step, we focus on adding the absolute minimum configuration to the app descriptor file. In certain development environments you might encounter validation errors due to missing settings. However, for the purposes of this tutorial you can safely ignore these errors. In Step 10: Descriptor for Applications we’ll examine the purpose of the file in detail and configure some further options.

UI5 Tooling

The following steps are tailored for using this project with UI5 Tooling.

package.json (New)

We create a new file called package.json in the app root directory. It allows us to execute commands and consume packages from the npm registry via the npm command line interface.

Enter the following content:

{
  "name": "ui5.walkthrough",
  "version": "1.0.0",
  "description": "UI5 TypeScript Walkthrough",
  "scripts": {
      "start": "ui5 serve -o index.html"
  }
}

Next, we install the UI5 CLI and add it as development dependency to our project. For this, we open a terminal in the app root folder and execute the following command:

npm install --save-dev @ui5/cli

Finally, we initialize the UI5 Tooling configuration for our project by executing the following command on the app root folder:

ui5 init

This generates a ui5.yaml file in our app root directory, which is essential for using UI5 Tooling with our project.

To start the web server, execute the following command:

npm start

This opens a new browser window hosting your newly created index.html.

Parent topic:Walkthrough Tutorial (TypeScript)

Previous:Step 2: Bootstrap (TypeScript)

Related Information

Manifest (Descriptor for Applications, Components, and Libraries)

Development Environment

App Development

UI5 Tooling: Getting Started

This site is open source. Improve this page.