sample-app - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #llm #machine-learning #rust #deep-learning #linux #docker #nodejs #macos #cli #mcp #ios #open-source

sample-app

(★ 304)

OpenUI5 Sample App

File Explorer

Download Latest Version (.zip)

- - deploy.yml
  - github-ci.yml
  - reuse-compliance.yml
- Apache-2.0.txt
- - App.controller.js
- - styles.css
- - i18n.properties
  - i18n_de.properties
  - i18n_en.properties
- - logo_ui5.png
- - todoitems.json
- - Test.qunit.html
  - testsuite.qunit.html
  - testsuite.qunit.js
- - Helper.js
- - App.view.xml
- Component.js
- index.html
- manifest.json
.editorconfig
.gitignore
.npmrc
CONTRIBUTING.md
eslint.config.mjs
LICENSE.txt
package-lock.json
package.json
README.md
renovate.json
REUSE.toml
ui5.yaml

# Installation Guide

1. Get the code

git clone https://github.com/UI5/sample-app

Downloads the entire project code from GitHub to your computer.

cd sample-app

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm run lint

Type this command into your terminal and run it.

npm run test-runner

Type this command into your terminal and run it.

npm test

Type this command into your terminal and run it.

npm run serve-dist

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![OpenUI5 logo](http://openui5.org/images/OpenUI5_new_big_side.png)

# sample-app
> [OpenUI5](https://github.com/UI5/openui5) sample app using the [UI5 CLI](https://github.com/UI5/cli).

[![REUSE status](https://api.reuse.software/badge/github.com/UI5/sample-app)](https://api.reuse.software/info/github.com/UI5/sample-app)

## Live Demo
A deployed version of the [sample-app](http://ui5.github.io/sample-app/index.html) is hosted on GitHub Pages.

## Prerequisites
- The [UI5 CLI](https://github.com/UI5/cli).
    - For installation instructions please see: [Installation](https://ui5.github.io/cli/stable/pages/CLI/#installation).

## Getting started
1. Clone this repository and navigate into it
    ```sh
    git clone https://github.com/UI5/sample-app.git
    cd sample-app
    ```
1. Install all dependencies
    ```sh
    npm install
    ```

1. Start a local server and run the application (http://localhost:8080/index.html)
    ```sh
    ui5 serve -o index.html
    ```

## Testing
* Run [ESLint](https://eslint.org/) code validation
    ```sh
    npm run lint
    ```
* Start the [UI5 Test Runner](https://www.npmjs.com/package/ui5-test-runner) and execute the tests
    ```sh
    npm run test-runner
    ```
* Run both ESLint and UI5 Test Runner
    ```sh
    npm test
    ```
## Building
### Option 1: Standard preload build
1. Execute the build
    ```sh
    ui5 build -a
    ```
1. Run the result
    1. Run a local HTTP server on the build results (`/dist` directory)  
	(**Note:** This script is using the [local-web-server](https://www.npmjs.com/package/local-web-server) npm module, but you can use any HTTP server for that)
        ```sh
        npm run serve-dist
        ```
    1. Open the app at http://localhost:8000

### Option 2: Self-contained build
1. (Optional) Remove previous build results
   ```sh
   rm -rf ./dist
   ```
1. Execute the `self-contained` build to create a bundle with all of your applications runtime dependencies
    ```sh
    ui5 build self-contained -a
    ```
1. Run the result
    1. Run a local HTTP server on the build results (`/dist` directory)  
	(**Note:** This script is using the [local-web-server](https://www.npmjs.com/package/local-web-server) npm module, but you can use any HTTP server for that)
        ```sh
        npm run serve-dist
        ```
    1. Open the app at http://localhost:8000

## Working with local dependencies

For local development of your applications' dependencies (like OpenUI5 libraries) you can use [UI5 Workspaces](https://ui5.github.io/cli/stable/pages/Workspace/). This will allow you to make changes to those dependencies locally and see the impact in your application immediately.

### Preparation
The following needs to be done just once per setup.

1. Clone the OpenUI5 repository and navigate into it
    **Note:** The UI5 version must be 1.65.0 or higher, you can check that in the root `package.json` file
    ```sh
    git clone https://github.com/UI5/openui5.git
    cd openui5
    ```
1. Install all dependencies (this also links all OpenUI5 libraries between each other)
    ```sh
    npm install
    ```

### Setup UI5 Workspace

Would you like to work on the application project and one or more of its UI5 framework dependencies at the same time? We got you covered!

1. Create a new file `ui5-workspace.yaml` in the root folder of the project, right next to the `ui5.yaml`
2. In `ui5-workspace.yaml`, add the paths to the local dependencies you'd like to use from your local machine:
    ```yaml
    specVersion: workspace/1.0
    metadata:
        name: default
    dependencyManagement:
        resolutions:
            # local path to OpenUI5. It will resolve all required libraries and transitive dependencies.
            - path: /local/path/to/openui5
    ```
3. Start the development server with default dependency resolution
    ```sh
    npm run start
    ```

You can now make changes in your local OpenUI5 repository and see the impact directly when serving or building your application.

If a dependency that is listed in `ui5.yaml` is omitted in the `resolutions` section of `ui5-workspace.yaml`, the library is resolved in the usual way by downloading it from the registry. For more information about dependency resolutions, check [here](https://ui5.github.io/cli/stable/pages/Workspace/#dependency-management).

#### Non-default workspace

The workspace feature always uses the `default` workspace and always attempts to resolve any dependencies from it. If you'd like to use the workspace for local development but want to resolve the libraries in the usual way by default, you can name the workspace and use that name later, for example like this:

```yaml
specVersion: workspace/1.0
metadata:
    name: local-dependencies # Not "default"
dependencyManagement:
    resolutions:
        - path: /local/path/to/openui5
```

```sh
# Starts a server with a named workspace
npm run start -- -w local-dependencies
```