{"id":37226782,"url":"https://github.com/SAP-samples/ui5-typescript-helloworld","last_synced_at":"2026-01-22T07:00:38.963Z","repository":{"id":37351759,"uuid":"373610201","full_name":"SAP-samples/ui5-typescript-helloworld","owner":"SAP-samples","description":"Showcase of a TypeScript setup for developing UI5 applications.","archived":false,"fork":false,"pushed_at":"2025-05-13T07:44:04.000Z","size":134,"stargazers_count":71,"open_issues_count":2,"forks_count":16,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-19T21:03:52.119Z","etag":null,"topics":["babel","openui5","sample","sample-code","sapui5","typescript","ui5"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SAP-samples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-03T18:50:17.000Z","updated_at":"2025-05-14T14:51:45.000Z","dependencies_parsed_at":"2024-10-28T11:43:35.937Z","dependency_job_id":"5a43afae-f02b-453f-9b93-4aad8964ef08","html_url":"https://github.com/SAP-samples/ui5-typescript-helloworld","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SAP-samples/ui5-typescript-helloworld","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-helloworld","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-helloworld/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-helloworld/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-helloworld/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAP-samples","download_url":"https://codeload.github.com/SAP-samples/ui5-typescript-helloworld/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP-samples%2Fui5-typescript-helloworld/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28657540,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","openui5","sample","sample-code","sapui5","typescript","ui5"],"created_at":"2026-01-15T03:00:21.405Z","updated_at":"2026-01-22T07:00:38.947Z","avatar_url":"https://github.com/SAP-samples.png","language":"TypeScript","funding_links":[],"categories":["Description"],"sub_categories":[],"readme":"# A Small TypeScript UI5 Example App\n\n[![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/ui5-typescript-helloworld)](https://api.reuse.software/info/github.com/SAP-samples/ui5-typescript-helloworld)\n\n**The main resource in this repository is [the detailed step-by-step guide](step-by-step.md), which explains how the TypeScript setup is created from scratch and how all the bits and pieces fit together.**\n\n## Description\n\nThis app demonstrates the TypeScript setup for developing UI5 applications, including testing. The focus is on *understanding the setup* [step by step](step-by-step.md).\n\nIf you are *not* here for understanding the setup, then:\n- The *fastest* way to get started with an app is using the yeoman-based [Easy-UI5 template \"ts-app\"](https://github.com/ui5-community/generator-ui5-ts-app).\n- In the *[custom-controls](https://github.com/SAP-samples/ui5-typescript-helloworld/tree/custom-controls)* branch, there is an example how custom controls can be developed in TypeScript within applications.\n- In the [ui5-2.0](https://github.com/SAP-samples/ui5-typescript-helloworld/tree/ui5-2.0) branch, this repository demonstrates how an application can be tested against the type definitions (and runtime) of the upcoming *UI5 2.x version*.\n- A more complete *real-life-like* application is in the [TypeScript branch of the \"UI5 CAP Event App\"](https://github.com/SAP-samples/ui5-cap-event-app/tree/typescript). It comes with an [explanation](https://github.com/SAP-samples/ui5-cap-event-app/blob/typescript/docs/typescript.md) of what UI5 TypeScript code usually looks like and what to consider.\n- All *general information* about UI5 application development in TypeScript and links to tutorials, videos etc. can be found at https://sap.github.io/ui5-typescript.\n\n\n## Overview of TypeScript-related Entities\n\n- The UI5 type definitions (`*.d.ts` files) are loaded as dev dependency from [npm](https://www.npmjs.com/package/@types/openui5).\n- The file [tsconfig.json](tsconfig.json) contains the configuration for the TypeScript compilation, including a reference to the UI5 `*.d.ts` files.\n-  The TypeScript-to-JavaScript transpilation is done by [`ui5-tooling-transpile`](https://www.npmjs.com/package/ui5-tooling-transpile), which acts as both a build plugin (build results are stored in the `dist` folder) and middleware (the UI5 dev server transpiles the TypeScript files from `webapp` before sending it to the browser). Under the hood it uses the [Babel](https://babeljs.io/) transpiler.\n- In addition to the TypeScript compilation, there is also a conversion from the ES6 module and class syntax used in the source files to the classic UI5 module loading and class definition syntax (`sap.ui.require(...)`/`sap.ui.define(...)` and `SuperClass.extend(...)`). This conversion is also done by `ui5-tooling-transpile`, using the [babel-plugin-transform-modules-ui5](https://github.com/ui5-community/babel-plugin-transform-modules-ui5) project from the UI5 Community (initially developed by Ryan Murphy).\n\n## A Note on Testing\n\nThe main differences to tests written in JavaScript relate to a) writing OPA tests and b) configuring code coverage instrumentation:\n\nThe *structural* code differences to writing tests in *JavaScript* are:\n1. The **OPA Pages are simply classes extending `Opa5`, having the actions and assertions as class methods**.\n2. The **OPA Journeys do not use the `Given`/`When`/`Then` objects, but call actions and assertions directly on the Page objects**. \n\nThis simplifies the test code a lot and at the same time avoids type complications in TypeScript caused by OPA APIs not fitting a typed language. \nAll other testing code is converted from JavaScript in the same way as regular application code is (i.e. using real ECMAScript classes and modules).\n\nThe *setup* difference is in the configuration to instrument code for coverage reporting: the `istanbul` library needs to be added to the Babel config of `ui5-tooling-transpile-middleware` in `ui5.yaml`.\n\nDetails can be found in the later sections of [step-by-step.md](step-by-step.md).\n\n\u003e Note: the test setup is now using the [`ui5-test-runner`](https://github.com/ArnaudBuchholz/ui5-test-runner) instead of deprecated `karma`.\n\n\n## Requirements\n\nEither [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/), or [pnpm](https://pnpm.io/) for dependency management.\n\n## Setup\n\n1. Clone the project:\n\n```sh\ngit clone https://github.com/SAP-samples/ui5-typescript-helloworld.git\ncd ui5-typescript-helloworld\n```\n\n(or download from https://github.com/SAP-samples/ui5-typescript-helloworld/archive/main.zip)\n\n2. Use npm (or any other package manager) to install the dependencies:\n\n```sh\nnpm install\n```\n\n## Run the App\n\nExecute 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):\n\n```sh\nnpm start\n```\n\nAs 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.\n\n## Debug the App\n\nIn 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.\n\n## Run the Tests\n\nThe tests can be executed either manually or in an automated way using [`ui5-test-runner`](https://github.com/ArnaudBuchholz/ui5-test-runner):\n\n1. *Manual execution*: use `npm start` and then execute the tests by opening the [testsuite](http://localhost:8080/test/testsuite.qunit.html) at [http://localhost:8080/test/testsuite.qunit.html](http://localhost:8080/test/testsuite.qunit.html) in your browser. You can also directly launch the [QUnit tests](http://localhost:8080/test/Test.qunit.html?testsuite=test-resources/ui5/typescript/helloworld/testsuite.qunit\u0026test=unit/unitTests) or the [Integration tests](http://localhost:8080/test/Test.qunit.html?testsuite=test-resources/ui5/typescript/helloworld/testsuite.qunit\u0026test=integration/opaTests) individually.\n\u003c!-- 2. *Test-driven* development by running Karma in watch mode using `npm run karma` (which triggers the test each time a source file changes) --\u003e\n2. *Headless testing*: launch test-runner either *without* coverage reporting using `npm run test-runner` or *with* coverage using `npm run test-runner-coverage`.\nWhile the tests are running, their status can be monitored at http://localhost:8081/_/progress.html\n\n\u003e Note: when the application to test is passed using the `--url` argument (as we do it in this sample), then there is [no \"watch\" mode of the ui5-test-runner so far](https://github.com/ArnaudBuchholz/ui5-test-runner/issues/119), which automatically re-runs the tests when a resource changes. \n\n## Build the App\n\n### Unoptimized (but quick)\n\nExecute the following command to build the project and get an app that can be deployed:\n\n```sh\nnpm run build\n```\n\nThe result is placed into the `dist` folder. To start the generated package, just run\n\n```sh\nnpm run start:dist\n```\n\nNote 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](https://sdk.openui5.org/#/topic/2d3eb2f322ea4a82983c1c62a33ec4ae) or your local deployment of UI5.\n\n### Optimized\n\nFor an optimized self-contained build (takes longer because the UI5 resources are built, too), do:\n\n```sh\nnpm run build:opt\n```\n\nTo start the generated package, again just run\n\n```sh\nnpm run start:dist\n```\n\nIn 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.\u003cbr\u003e\nWith 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.)\n\n## Check the Code\n\nDo the following to run a TypeScript check:\n\n```sh\nnpm run ts-typecheck\n```\n\nThis checks the application code for any type errors (but will also complain in case of fundamental syntax issues which break the parsing).\u003cbr\u003e\n\nTo lint the TypeScript code, do:\n\n```sh\nnpm run lint\n```\n\n## Limitations\n\n- At this time, the used eslint rules are not verified to be optimal or to be in sync with UI5 recommendations.\n- In the future there might be further improvements to how tests are written and configured.\n\n## Known Issues\n\nNone.\n\n## How to Obtain Support\n\nThe sample code is provided **as-is**. No support is provided.\n\n[Create an issue](https://github.com/SAP-samples/ui5-typescript-helloworld/issues) in this repository if you find a bug in the sample app code or documentation.\n\nFor issues in the UI5 type definitions which are caused by the dts-generator please open [issues in the dts-generator's repository](https://github.com/SAP/ui5-typescript/issues).\u003cbr\u003e\n\nIssues in the UI5 type definitions which are also present in the [API documentation](https://ui5.sap.com/#/api) originate from the JSDoc comments in the original OpenUI5/SAPUI5 code, so please directly open an [OpenUI5](https://github.com/SAP/openui5/issues)/SAPUI5 ticket for those.\n\nQuestions can be [asked in SAP Community](https://answers.sap.com/questions/ask.html).\n\n## License\n\nCopyright (c) 2023-2025 SAP SE or an SAP affiliate company. All rights reserved.\nThis project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSAP-samples%2Fui5-typescript-helloworld","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSAP-samples%2Fui5-typescript-helloworld","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSAP-samples%2Fui5-typescript-helloworld/lists"}