spaceapp

Description

This app demonstrates a TypeScript setup for developing UI5 applications.

The template is inspired by the SAP-samples/ui5-typescript-helloworld project which also contains a detailed step-by-step guide. It explains how this setup is created and how all the bits and pieces fit together.

☝️ Overview of TypeScript-related Entities
The UI5 type definitions (*.d.ts files) are loaded as dev dependency from npm. They are a work in progress, so while they should be working well already, we are still improving them, which might also lead to breaking changes.
The file tsconfig.json contains the configuration for the TypeScript compilation, including a reference to the UI5 *.d.ts files.
The project is using the ui5-tooling-transpile extensions to compile TypeScript and to convert from the ES6 module and class syntax used in the source files to the classic UI5 module loading and class definition syntax (sap.ui.define(...) and superClass.extend(...)).
Both, the TypeScript compilation and the ES6 syntax transformation, are executed by Babel, as configured in the file .babelrc.json

Requirements

Either npm or yarn for dependency management.

Preparation

Use npm (or yarn) to install the dependencies:

npm i

(To use yarn, just do yarn instead.)

Run the App

Execute the following command to run the app locally for development in watch mode (the browser reloads the app automatically when there are changes in the source code):

npm start

As shown in the terminal after executing this command, the app is then running on http://localhost:8080/index.html. A browser window with this URL should automatically open.

(When using yarn, do yarn start instead.)

Debug the App

In the browser, you can directly debug the original TypeScript code, which is supplied via sourcemaps (need to be enabled in the browser's developer console if it does not work straight away). If the browser doesn't automatically jump to the TypeScript code when setting breakpoints, use e.g. Ctrl/Cmd + P in Chrome to open the *.ts file you want to debug.

Build the App

Unoptimized (but quick)

Execute the following command to build the project and get an app that can be deployed:

npm run build

The result is placed into the dist folder. To start the generated package, just run

npm run start:dist

Note that index.html still loads the UI5 framework from the relative URL resources/..., which does not physically exist, but is only provided dynamically by the UI5 tooling. So for an actual deployment you should change this URL to either the CDN or your local deployment of UI5.

(When using yarn, do yarn build and yarn start:dist instead.)

Optimized

For an optimized self-contained build (takes longer because the UI5 resources are built, too), do:

npm run build:opt

To start the generated package, again just run:

npm run start:dist

In this case, all UI5 framework resources are also available within the dist folder, so the folder can be deployed as-is to any static web server, without changing the bootstrap URL.

With the self-contained build, the bootstrap URL in index.html has already been modified to load the newly created sap-ui-custom.js for bootstrapping, which contains all app resources as well as all needed UI5 JavaScript resources. Most UI5 resources inside the dist folder are for this reason actually not needed to run the app. Only the non-JS-files, like translation texts and CSS files, are used and must also be deployed. (Only when for some reason JS files are missing from the optimized self-contained bundle, they are also loaded separately.)

(When using yarn, do yarn build:opt and yarn start:dist instead.)

Check the Code

Do the following to run a TypeScript check:

npm run ts-typecheck

This checks the application code for any type errors (but will also complain in case of fundamental syntax issues which break the parsing).

To lint the TypeScript code, do:

npm run lint

(Again, when using yarn, do yarn ts-typecheck and yarn lint instead.)

References

Once you have understood the setup and want to inspect the code of a slightly more comprehensive UI5 app written in TypeScript, you can check out the TypeScript version of the UI5 CAP Event App Sample.

License

This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.