ui5-typescript-walkthrough

Step 1: Hello World!

As you know OpenUI5 is all about HTML5. Let’s get started with building a first “Hello World” with only HTML. In addition we’ll initialize the UI5 Tooling, so we can benefit from it from the beginning.

 

Preview

The browser shows the text "Hello World"

You can access the live preview by clicking on this link: 🔗 Live Preview of Step 1.

To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 1.

Coding

webapp (New)

We create a folder on our local machine which will contain all the sources of the app we’re going to build. We’ll 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 copy the following content to it:

<!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), 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 called manifest.json in the webapp folder and define its essential attributes:

{
    "_version": "1.60.0",
    "sap.app": {
        "id": "ui5.walkthrough",
        "type": "application",
        "title": "OpenUI5 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": "OpenUI5 TypeScript Walkthrough",
  "private": true,
  "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 will generate a ui5.yaml file in the 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 will open a new browser window hosting your newly created index.html.

Conventions

 

Next: Step 2: Bootstrap

Related Information

Descriptor for Applications, Components, and Libraries (manifest.json)

Development Environment

App Development

UI5 Tooling: Getting Started

This site is open source. Improve this page.