UI5 Library be.wl.space

Insert the purpose of this project and some interesting info here...

Description

This app demonstrates a TypeScript setup for developing UI5 libraries. The central entry point for all information about using TypeScript with UI5 is at https://sap.github.io/ui5-typescript.

The template is inspired by the SAP-samples/ui5-typescript-control-library project. It explains how this setup is created and how all the bits and pieces fit together.

Requirements

Either npm or yarn for dependency management.

Preparation

Use npm (or yarn) to install the dependencies:

npm install

(To use yarn, just do yarn instead.)

Run the Library

Execute the following command to run the library 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/. A browser window with the URL pointing to your controls' test page should automatically open.

(When using yarn, do yarn start instead.)

Debug the Library

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 Library

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 HTML page 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.)

Check the Code

Do the following to run a TypeScript check:

npm run ts-typecheck

This checks the libraries 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.)

License

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

lemaiwo / ui5-control-space-library