ui5-typescript-walkthrough

Step 2: Bootstrap

Before we can do something with OpenUI5, we need to load and initialize it. This process of loading and initializing OpenUI5 is called bootstrapping. Once this bootstrapping is finished, we simply display an alert.

 

Preview

An alert “UI5 is ready” is displayed

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

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

Tooling

First, let’s set up our UI5 Tooling to use the OpenUI5 framework for our project. We also need to add the necessary OpenUI5 libraries as dependencies to the project’s UI5 Tooling configuration.

We open a terminal in the root folder of our app and execute the following command:

ui5 use OpenUI5

This command tells the UI5 Tooling to use the OpenUI5 framework to build and run the application. Next, we configure some runtime dependencies by executing the following command:

ui5 add sap.ui.core themelib_sap_horizon

The ui5 add command adds specific libraries as dependency to the projects UI5 Tooling configuration. In this case, we’e adding the sap.ui.core library, which provides core functionality of the OpenUI5 framework. This library is essential for bootstrapping OpenUI5. Additionally, we’re adding the themelib_sap_horizon library which provides the visual styles for the Horizon theme. We’ll use this theme with our application.

package.json

To work with TypeScript, we must install it in our project. To do this, we execute the following command in the terminal:

npm install typescript --save-dev

By running this command, npm will download the TypeScript package from the npm registry and install it in our project’s “node_modules” directory. It will also add an entry for TypeScript in the “devDependencies” section of our package.json file, so that other developers working on the project can easily install the same version of TypeScript.

tsconfig.json (New)

As a next step, we need to create the file tsconfig.json in the app root directory to indicate that this folder is the root of a TypeScript project. This file specifies various compiler options and project settings that affect how TypeScript code is compiled into JavaScript.

We specify the compiler options as follow:

{
    "compilerOptions": {
      "target": "es2023",
      "module": "es2022",
      "moduleResolution": "node",
      "skipLibCheck": true,
      "allowJs": true,
      "strict": true,
      "strictPropertyInitialization": false,
      "rootDir": "webapp",
      "baseUrl": "./",
      "paths": {
        "ui5/walkthrough/*": ["webapp/*"]
      }
    },
    "include": ["webapp/**/*"]
  }

Let’s go through the compiler options specified in the file:

Coding

webapp/index.ts (New)

Now let’s move on to the UI work. We create a new index.ts script in the webapp folder. In this script, we add a native alert() method with the message “UI5 is ready”.

alert("UI5 is ready");

webapp/index.html

Next, we’ll integrate the script we just created into the index.html page to signal when the OpenUI5 framework has finished loading. This process involves first incorporating the OpenUI5 framework into our HTML page by adding a script tag specifically for loading OpenUI5.

We initialize the core modules with the following configuration options:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 TypeScript Walkthrough</title>
<script
		id="sap-ui-bootstrap"
		src="resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-compat-version="edge"
		data-sap-ui-async="true"
		data-sap-ui-on-init="module:ui5/walkthrough/index"
		data-sap-ui-resource-roots='{
			"ui5.walkthrough": "./"
		}'>
	</script>
</head>
<body>
	<div>Hello World</div>
</body>
</html>

📝 Note: The namespace is a unique identifier for your application file. It helps prevent naming conflicts with other modules or libraries.

Tooling

package.json

Let’s enhance our tooling setup once again by installing some custom middleware for the ui5-server. This will help us handle our development project more efficiently.

We open a terminal and navigate to the root folder of our app. Then, we execute the following command:

npm install ui5-middleware-livereload ui5-middleware-serveframework ui5-tooling-transpile --save-dev

When you run the command, npm will download the specified packages from the npm registry and store them in a folder called node_modules within your project directory. The --save-dev flag instructs npm to save these packages as development dependencies in the devDependencies section of the package.json file. Development dependencies are packages that are only needed during development and not in production. By separating them from production dependencies, we can keep our project clean and ensure that only the required packages are included when deploying the application.

Let’s break down what each package does:

ui5.yaml

Next, we have to configure the tooling extension we installed from npm to our UI5 Tooling setup, so we can use them in our project. To hook a custom task into a certain build phase of a project, it needs to reference another task that will get executed before or after it. The same applies for a custom middleware:

📌 Important:
Middleware configurations are applied in the order in which they are defined.

framework:
  name: OpenUI5
  version: "1.129.0"
  libraries:
    - name: sap.ui.core
    - name: themelib_sap_horizon
builder:
  customTasks:
  - name: ui5-tooling-transpile-task
    afterTask: replaceVersion
server:
  customMiddleware:
  - name: ui5-tooling-transpile-middleware
    afterMiddleware: compression
  - name: ui5-middleware-serveframework
    afterMiddleware: compression
  - name: ui5-middleware-livereload
    afterMiddleware: compression

Now you can benefit from live reload on changes, built framework resources at development time, and make use of TypeScript in OpenUI5.

📝 Note:
During its initial run, the ui5-middleware-serveframework middleware will build the framework, which can take a while. In all following steps, the build will not happen again and the framework is served from the built resources.

 

Next: Step 3: Controls

Previous: Step 1: Hello World!

Related Information

UI5 Tooling: Consuming OpenUI5 Libaries

SAP Fiori with Horizon

What is a tsconfig.json

Bootstrapping: Loading and Initializing

Content Security Policy

NPM Package: ui5-middleware-livereload

NPM Package: ui5-middleware-serveframework

NPM Package: ui5-tooling-transpile

UI5 Tooling: Custom Tasks

UI5 Tooling: Custom Server Middleware

This site is open source. Improve this page.