Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lemaiwo/ui5-webc-space-demoapp
https://github.com/lemaiwo/ui5-webc-space-demoapp
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/lemaiwo/ui5-webc-space-demoapp
- Owner: lemaiwo
- License: apache-2.0
- Created: 2024-04-30T22:07:58.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-19T21:45:28.000Z (4 months ago)
- Last Synced: 2024-07-20T02:29:43.837Z (4 months ago)
- Language: TypeScript
- Size: 214 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI5 Application be.wl.space.demoapp
Insert the purpose of this project and some interesting info here...
## Description
This app demonstrates a TypeScript setup for developing UI5 applications. The central entry point for all information about using TypeScript with UI5 is at [https://sap.github.io/ui5-typescript](https://sap.github.io/ui5-typescript).
**The template is inspired by the [`SAP-samples/ui5-typescript-helloworld`](https://github.com/SAP-samples/ui5-typescript-helloworld) project which also contains [a detailed step-by-step guide](https://github.com/SAP-samples/ui5-typescript-helloworld/blob/main/step-by-step.md). It explains how this setup is created and how all the bits and pieces fit together.**
## Requirements
Either [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) for dependency management.
## Preparation
Use `npm` (or `yarn`) to install the dependencies:
```sh
npm install
```(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):
```sh
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:
```sh
npm run build
```The result is placed into the `dist` folder. To start the generated package, just run
```sh
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](https://sdk.openui5.org/#/topic/2d3eb2f322ea4a82983c1c62a33ec4ae) 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:
```sh
npm run build:opt
```To start the generated package, again just run:
```sh
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:
```sh
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:
```sh
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](LICENSE) file.