### Initial Project Setup

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/CONTRIBUTING.md

Basic steps to clone the repository and install dependencies using PNPM.

```bash
git clone <repository-url>
pnpm install
```

--------------------------------

### Install PNPM and Node.js

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/CONTRIBUTING.md

Ensures the necessary environment for development by requiring PNPM and a Long-Term Support version of Node.js.

```markdown
- [PNPM](https://pnpm.io/installation) >= 9.1.2
- A [Long-Term Support version](https://nodejs.org/en/about/releases/) of Node.js
```

--------------------------------

### Install pnpm globally

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Installs the pnpm package manager globally on your system. This is a prerequisite for managing the monorepo.

```bash
npm i -g pnpm
```

--------------------------------

### Install project dependencies with pnpm

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Installs all necessary node modules for the monorepo using pnpm. This command should be run once after cloning the repository.

```bash
pnpm install
```

--------------------------------

### Install dev-approuter

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/dev-approuter/README.md

Installs the dev-approuter package as a development dependency using npm.

```bash
npm install dev-approuter --save-dev
```

--------------------------------

### Install ui5-middleware-simpleproxy

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-simpleproxy/README.md

Installs the ui5-middleware-simpleproxy package as a development dependency using npm.

```bash
npm install ui5-middleware-simpleproxy --save-dev
```

--------------------------------

### Install ui5-middleware-cap

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-cap/README.md

Installs the `ui5-middleware-cap` package as a development dependency using npm.

```sh
npm add ui5-middleware-cap -D
```

--------------------------------

### Release Versioning and Publishing

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/CONTRIBUTING.md

Commands to manage the release versioning and trigger the automated release process in the monorepo.

```bash
# Ensure you are on the default branch and synced with origin.
pnpm release:version
# Follow the lerna CLI instructions.
# Track the newly pushed **commit** with the message ('chore(release): publish') which triggers the 'Release (automatic)' GitHub action until successful completion.
# Inspect the newly artifacts published on npmjs.com.
```

--------------------------------

### Install UI5 Middleware

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-ui5/README.md

Command to install the ui5-middleware-ui5 package as a development dependency using npm.

```bash
npm install ui5-middleware-ui5 --save-dev
```

--------------------------------

### Run UI5 app from distribution folder

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Starts the UI5 application using the files in the distribution folder. This command requires a manual build (via `pnpm build`) to be executed first.

```bash
pnpm start
```

--------------------------------

### Install ui5-middleware-onelogin

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-onelogin/README.md

Installs the ui5-middleware-onelogin package as a development dependency using npm.

```bash
npm install ui5-middleware-onelogin --save-dev

```

--------------------------------

### Install ui5-middleware-approuter

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-approuter/README.md

Command to install the ui5-middleware-approuter package as a development dependency.

```bash
npm install ui5-middleware-approuter --save-dev
```

--------------------------------

### Install ui5-task-copyright

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-copyright/README.md

Installs the ui5-task-copyright package as a development dependency using npm.

```bash
npm install ui5-task-copyright --save-dev
```

--------------------------------

### Install ui5-middleware-webjars

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-webjars/README.md

Installs the ui5-middleware-webjars package as a development dependency using npm.

```bash
npm install ui5-middleware-webjars --save-dev
```

--------------------------------

### Start Karma tests

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/karma-ui5-transpile/README.md

Command to initiate Karma tests with the configured preprocessors and reporters.

```sh
karma start
```

--------------------------------

### Install ui5-task-cachebuster

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-cachebuster/README.md

Installs the ui5-task-cachebuster package as a development dependency using npm.

```bash
npm install ui5-task-cachebuster --save-dev
```

--------------------------------

### Configure ui5-middleware-servestatic

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-onelogin/sample/example_embeddedflp/README.md

This snippet shows the configuration for ui5-middleware-servestatic, setting its mount path and root directory, and placing it after the ui5-middleware-onelogin.

```yaml
- name: ui5-middleware-servestatic
  afterMiddleware: ui5-middleware-onelogin
  mountPath: /sap/bc/ui5_ui5/sap/<Name_of_your_app>
  configuration:
    rootPath: "./webapp"
```

--------------------------------

### Install UI5 Serve Static Middleware

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-servestatic/README.md

Installs the ui5-middleware-servestatic package as a development dependency using npm.

```bash
npm install ui5-middleware-servestatic --save-dev
```

--------------------------------

### Run TypeScript UI5 app from distribution folder

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Starts the TypeScript UI5 application using the files in the distribution folder. This command requires a manual build (via `pnpm build:ts`) to be executed first.

```bash
pnpm start:ts
```

--------------------------------

### Install ui5-middleware-index using npm

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-index/README.md

This command installs the ui5-middleware-index package as a development dependency for your UI5 project using npm.

```bash
npm install ui5-middleware-index --save-dev
```

--------------------------------

### Install ui5-task-zipper with npm

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-zipper/README.md

Installs the ui5-task-zipper package as a development dependency using npm.

```bash
npm install ui5-task-zipper --save-dev
```

--------------------------------

### Install ui5-middleware-websocket

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-websocket/README.md

Command to install the ui5-middleware-websocket package as a development dependency using npm.

```bash
npm install ui5-middleware-websocket --save-dev
```

--------------------------------

### Install UI5 Minify XML Task

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-minify-xml/README.md

Installs the ui5-task-minify-xml package as a development dependency using npm.

```bash
npm install ui5-task-minify-xml --save-dev
```

--------------------------------

### Configure ui5-middleware-simpleproxy

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-onelogin/sample/example_embeddedflp/README.md

This snippet details the configuration for ui5-middleware-simpleproxy, specifying its mount path, base URI, and patterns to exclude, ensuring it runs after ui5-middleware-onelogin.

```yaml
- name: ui5-middleware-simpleproxy
  afterMiddleware: ui5-middleware-onelogin
  mountPath: /sap
  configuration:
    baseUri: "https://sapes5.sapdevcenter.com/sap"
    excludePatterns:
    - "/bc/ui5_ui5/sap/<Name_of_your_app>/**"
```

--------------------------------

### Utilize CI for End-to-End Tests

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Runs end-to-end tests in a Continuous Integration (CI) environment using Chrome headless. This command starts the UI5 server in the background, executes wdi5 tests, and then shuts down the server.

```bash
pnpm test:ci
```

--------------------------------

### Install ui5-middleware-iasync

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-iasync/README.md

Install the UI5 middleware for syncing browser interactions using npm. This command adds the package as a development dependency to your project.

```bash
npm install ui5-middleware-iasync --save-dev
```

--------------------------------

### Install ui5-task-pwa-enabler

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-pwa-enabler/README.md

Installs the ui5-task-pwa-enabler package as a development dependency using npm.

```bash
npm install ui5-task-pwa-enabler --save-dev
```

--------------------------------

### Install UI5 Tooling Transpile

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-transpile/README.md

Installs the ui5-tooling-transpile package as a development dependency for your UI5 project.

```bash
npm install ui5-tooling-transpile --save-dev
```

--------------------------------

### Install UI5 Live Reload Middleware

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-livereload/README.md

Installs the ui5-middleware-livereload package as a development dependency using npm.

```bash
npm install ui5-middleware-livereload --save-dev
```

--------------------------------

### Configure ui5-middleware-index in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-index/README.md

This YAML configuration shows how to integrate the ui5-middleware-index into your UI5 project's server setup, specifying a custom welcome file.

```yaml
server:
  customMiddleware:
  - name: ui5-middleware-index
    afterMiddleware: compression
    configuration:
      welcomeFile: "index_peter.html"
```

--------------------------------

### Install and Register UI5 Tooling Transpile

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-transpile/README.md

Installs the ui5-tooling-transpile package and registers its configuration within the ui5.yaml file using a command-line argument.

```bash
npm install ui5-tooling-transpile --save-dev -rte
```

--------------------------------

### Install UI5 Middleware Serve Framework (Bash)

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-serveframework/README.md

Installs the ui5-middleware-serveframework package as a development dependency using npm.

```bash
npm install ui5-middleware-serveframework --save-dev
```

--------------------------------

### Run UI5 app in development mode

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Starts the UI5 application in development mode with live reload, on-the-fly transpilation (including source maps), proxy functionality, and the ability to execute UI actions across multiple browsers.

```bash
pnpm dev
```

--------------------------------

### Configure dev script in package.json

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/dev-approuter/README.md

Adds a 'dev' script to the approuter's package.json to start the dev-approuter.

```json
{
    "scripts": {
        "dev": "node node_modules/dev-approuter"
    }
}
```

--------------------------------

### Verify GitHub Actions Locally

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/CONTRIBUTING.md

Uses the 'act' tool to simulate GitHub Actions workflows locally, requiring Docker. This command demonstrates how to test the 'tests.yml' workflow.

```bash
act pull_request -W .github/workflows/tests.yml -e .github/workflows/.local-env.json
```

--------------------------------

### Install karma-ui5-transpile and dependencies

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/karma-ui5-transpile/README.md

Installs the necessary npm packages for UI5 testing with karma, including ui5-tooling-transpile and karma-ui5-transpile.

```sh
npm install --save-dev karma karma-coverage ui5-tooling-transpile karma-ui5 karma-ui5-transpile
```

--------------------------------

### Run End-to-End Tests with wdi5

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Executes end-to-end tests using wdi5. This involves starting the local UI5 server tooling in one terminal and running the tests in another. It utilizes Chrome for test execution.

```bash
pnpm dev
# in another terminal:
pnpm test:wdi5
```

--------------------------------

### Install cds-plugin-ui5

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/cds-plugin-ui5/README.md

Adds the cds-plugin-ui5 as a development dependency to your CDS server project using npm.

```sh
npm add cds-plugin-ui5 -D
```

--------------------------------

### Install dependencies for code coverage

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/karma-ui5-transpile/README.md

Installs npm packages required for Karma testing with code coverage, including karma-chrome-launcher.

```sh
npm install --save-dev karma karma-ui5 karma-ui5-transpile karma-coverage karma-chrome-launcher
```

--------------------------------

### Install UI5 Tooling LESS Extension

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-less/README.md

This command installs the 'ui5-tooling-less' package as a development dependency for your UI5 project.

```bash
npm install ui5-tooling-less --save-dev
```

--------------------------------

### Example ui5.yaml configuration for approuter middleware

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-approuter/README.md

Configuration snippet for ui5.yaml to enable the approuter middleware. It includes options for debugging, port, xsapp.json path, and destination management.

```yaml
server:
  customMiddleware:
    - name: ui5-middleware-approuter
      afterMiddleware: compression
      configuration:
        debug: true
        port: 5000
        xsappJson: "./xs-app.json"
        destinations: ["destination-name"]
        allowServices: true
        authenticationMethod: "route"
        allowLocalDir: false
        rewriteContent: true
        rewriteContentTypes: ["text/html", "application/json"]
        extensions:
          - module: "./my-local-extension.js"
            parameters: {"param1": "value1"}
        disableWelcomeFile: false
        appendAuthRoute: true
        enableWebSocket: true
```

--------------------------------

### Run TypeScript UI5 app in development mode

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Starts the TypeScript UI5 application in development mode, enabling live transpilation of TypeScript code and utilizing NPM packages as dependencies.

```bash
pnpm dev:ts
```

--------------------------------

### Install ui5-task-flatten-library

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-flatten-library/README.md

Instructions for installing the ui5-task-flatten-library using npm, pnpm, or yarn. This task is essential for preparing UI5 build results.

```bash
npm install ui5-task-flatten-library --save-dev

pnpm add --save-dev ui5-task-flatten-library

yarn add --dev ui5-task-flatten-library
```

--------------------------------

### Install UI5 Tooling String Replace (npm, pnpm, yarn)

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-stringreplace/README.md

Installs the `ui5-tooling-stringreplace` package as a development dependency using npm, pnpm, or yarn.

```bash
# Using npm
npm install ui5-tooling-stringreplace --save-dev

# Using pnpm
pnpm add --save-dev ui5-tooling-stringreplace

# Using yarn
yarn add --dev ui5-tooling-stringreplace
```

--------------------------------

### Perform Monorepo Dependency Upgrade

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/CONTRIBUTING.md

Upgrades dependencies across all packages in the monorepo using PNPM's recursive and filter-less options.

```bash
pnpm -r -L -i update
```

--------------------------------

### Configure UI5 Server Middleware Options via ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-ui5/README.md

Example of configuring UI5 server middleware specific options like configFile, workspaceConfigFile, workspaceName, and versionOverride for a module.

```yaml
specVersion: "3.0"
metadata:
  name: ui5.bookshop
type: application
server:
  customMiddleware:
    - name: ui5-middleware-ui5
      afterMiddleware: compression
      configuration:
        modules:
          %moduleId%:
            configFile: "ui5.yaml"
            workspaceConfigFile: "ui5-workspace.yaml"
            workspaceName: "default"
            versionOverride: "1.117.0"
```

--------------------------------

### Define Build Scripts for Multiple Environments

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-stringreplace/README.md

Provides example npm scripts to build the UI5 application with different environment configurations (dev, staging, prod) by setting the `UI5_ENV` environment variable.

```json
{
 "scripts": {
    "build:dev": "UI5_ENV=dev ui5 build",
    "build:staging": "UI5_ENV=staging ui5 build",
    "build:prod": "UI5_ENV=prod ui5 build"
 }
}
```

--------------------------------

### Install UI5 Tooling Modules Extension

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-modules/README.md

Installs the `ui5-tooling-modules` package as a development dependency, which provides the necessary extensions for consuming NPM packages.

```bash
npm install ui5-tooling-modules --save-dev
```

--------------------------------

### Add ui5-middleware-onelogin to package.json

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-onelogin/sample/example_embeddedflp/README.md

This snippet shows how to declare the ui5-middleware-onelogin as a devDependency and a UI5 tooling dependency in the package.json file.

```json
{
    "devDependencies": {
        "ui5-middleware-onelogin": "*"
    },
    "ui5": {
        "dependencies": [
            "ui5-middleware-onelogin"
        ]
    }
}
```

--------------------------------

### Extend dev-approuter with Custom Middleware

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/dev-approuter/README.md

This JavaScript code snippet demonstrates how to extend the dev-approuter by passing custom middleware using the `start()` method. It defines a middleware that handles requests to '/my-ext'.

```javascript
const devApprouter = require("dev-approuter/lib/devApprouter");
devApprouter.start([
    {
        insertMiddleware: {
            first: [
                {
                    path: "/my-ext",
                    handler: (req, res, next) => {
                        res.end("Request handled by my extension!")
                    }
                }
            ]
        }
    }
]);
```

--------------------------------

### Install ui5-tooling-transpile in package.json

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-transpile/README.md

This snippet shows how to add the ui5-tooling-transpile as a dev dependency in your project's `package.json` file.

```json
{
    "devDependencies": {
        // ...
        "ui5-tooling-transpile": "*"
        // ...
    }
}
```

--------------------------------

### Example xs-app.json destination configuration

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-approuter/README.md

Demonstrates how to configure a destination within the xs-app.json file for the UI5 approuter middleware. The regex pattern for destination routes is crucial for matching incoming requests.

```json
{
  "source": "^/backend/(.*)$",
  "destination": "destination-name"
}
```

--------------------------------

### Configure Mount Path in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-ui5/README.md

Example of overriding the default mount path for the ui5-middleware-ui5 in the ui5.yaml file.

```yaml
specVersion: "3.0"
metadata:
  name: ui5.bookshop
type: application
customConfiguration:
  ui5-middleware-ui5:
    mountPath: /bookshop
```

--------------------------------

### Configure ui5-middleware-onelogin in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-onelogin/sample/example_embeddedflp/README.md

This snippet illustrates the configuration of the ui5-middleware-onelogin within the ui5.yaml file, including middleware ordering and custom parameters like login URL, username, password, and debug mode.

```yaml
server:
  customMiddleware:
    - name: ui5-middleware-onelogin
      afterMiddleware: compression
      configuration:
        path: <Login URL>
        username: <Login User>
        password: <Login Password>
        debug: true / false
```

--------------------------------

### Set custom port via environment variable

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/dev-approuter/README.md

Starts the dev-approuter on a specific port (e.g., 5001) by setting the PORT environment variable.

```bash
PORT=5001 npm run dev
```

--------------------------------

### Configure ui5-middleware-websocket in package.json

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-websocket/README.md

Example of how to define the ui5-middleware-websocket-echo dependency in the devDependencies section of a UI5 application's package.json file.

```json
{
  "devDependencies": {
    "ui5-middleware-websocket-echo": "*"
  }
}
```

--------------------------------

### Consolidated ui5.yaml Configuration with YAML Anchors

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-modules/README.md

This example illustrates using YAML anchors to define a common configuration for both the ui5-tooling-modules task and middleware, promoting consistency and reducing redundancy in the ui5.yaml file.

```yaml
customConfiguration:
  ui5-tooling-modules: &cfgModules
    debug: true
    keepDynamicImports:
      - "@luigi-project/container"
[...] # Other configurations
server:
  customMiddleware:
    - name: ui5-tooling-modules-middleware
      afterMiddleware: compression
      configuration:
        <<: *cfgModules
[...] # Other configurations
builder:
  customTasks:
    - name: ui5-tooling-modules-task
      afterTask: replaceVersion
      configuration:
        <<: *cfgModules
        addToNamespace: true
```

--------------------------------

### Example extension module for UI5 approuter middleware

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-approuter/README.md

Illustrates a local JavaScript module that can be used as an extension for the UI5 approuter middleware. The extension function receives request, response, next, and optional parameters.

```javascript
module.exports = function (req, res, next, params) {
  console.log('Extension called with parameters:', params);
  next(); // Continue to the next middleware or route
};
```

--------------------------------

### Run Unit and Integration Tests (QUnit/OPA5)

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Executes unit (QUnit) and integration (OPA5) tests against the 'as-is' sources in the /webapp directory without transpiling or bundling. This command is intended for use with Chrome.

```bash
pnpm test:opa5
```

--------------------------------

### Build and transpile UI5 app for production

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Performs the component-preload build and transpilation steps for the UI5 application. It transpiles all webapp files to the dist folder and enables live reload for the dist directory.

```bash
pnpm watch
```

--------------------------------

### Initialize UI5 Core and UShell Container

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/showcases/approuter/webapp/index.html

Initializes the SAP UI5 core and attaches an event listener for the 'init' event. Upon initialization, it calls a boot-task from sandbox.js and then creates and places the UShell container into the 'content' element.

```javascript
sap.ui.getCore().attachInit(function () {
  // call the boot-task of the sandbox.js manually
  window["sap-ui-config"]["xx-bootTask"](function () {
    // initialize the ushell sandbox component
    sap.ushell.Container.createRenderer().placeAt("content");
  });
});
```

--------------------------------

### Configure UI5 PWA Enabler in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-pwa-enabler/README.md

Example configuration for the ui5-task-pwa-enabler in ui5.yaml. This snippet demonstrates setting up advanced service worker caching strategies and custom manifest properties for a PWA.

```yaml
specVersion: "3.0"
metadata:
  name: openui5-sample-app
type: application
resources:
  configuration:
    propertiesFileSourceEncoding: "UTF-8"
builder:
  customTasks:
    - name: ui5-task-pwa-enabler
      afterTask: generateVersionInfo
      configuration:
        serviceWorker:
          strategy: Advanced-Caching
          offlinePage: offline.html
          preCache:
            - "controller/*"
            - "*.html"
            - "view/*"
            - "images/*"
          networkFirst:
            - "/api/.*"
          avoidCaching:
            - "/realtime-api/.*"
        manifest:
          short_name: To-Do App
          name: To-Do App
          description: Sample to-do-app for testing pwaEnabler
          icons:
            - src: images/SAP_R_192.png
              type: image/png
              sizes: 192x192
            - src: images/SAP_R_512.png
              type: image/png
              sizes: 512x512
          start_url: /index.html
          scope: /
          background_color: "#EFF4F9"
          theme_color: "#3F5161"
          display: standalone
```

--------------------------------

### UI5 Tooling Package Overview

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/README.md

Lists the various UI5 Tooling extensions available in the repository, categorized into packages (tooling extensions) and showcases (demo applications). This provides a high-level overview of the project's capabilities.

```text
packages
├── cds-plugin-ui5                  // cds-plugin: embed UI5 tooling based projects via express middleware into CDS server
├── dev-approuter                   // dev time wrapper for the SAP Application Router that can serve UI5 and CDS modules added as dependencies
├── karma-ui5-transpile             // karma preprocessor: transpile sources using ui5-tooling-transpile
├── ui5-middleware-cap              // middleware extension: use the CDS server middlewares inside the UI5 tooling
├── ui5-middleware-approuter        // middleware extension: use the approuter as proxy for SAP Cloud Foundry or SAP XS Advanced backend services
├── ui5-middleware-iasync           // middleware extension: sync UI interaction across browsers (alpha! careful!)
├── ui5-middleware-index            // middleware extension: serve an HTML file for / (root)
├── ui5-middleware-livereload       // middleware extension: usage of livereload for development
├── ui5-middleware-onelogin         // middleware extension: enable a generic login support
├── ui5-middleware-serveframework   // middleware extension: serve resources of a locally built framework
├── ui5-middleware-servestatic      // middleware extension: serve static resources
├── ui5-middleware-simpleproxy      // middleware extension: simple express proxy
├── ui5-middleware-ui5              // middleware extension: enable UI5 application dependencies for UI5 dev server
├── ui5-middleware-webjars          // middleware extension: deliver content from JAR files
├── ui5-middleware-websocket        // middleware extension: enable web sockets for the UI5 Tooling
├── ui5-task-cachebuster            // task extension: enables cachebusting for standalone applications
├── ui5-task-copyright              // task extension: append copyright for TypeScript, JavaScript or XML files
├── ui5-task-flatten-library        // task extension: prepares build result for deployment to SAP NetWeaver
├── ui5-task-i18ncheck              // task extension: checks for missing i18n texts
├── ui5-task-minify-xml             // task extension: minify xml resources
├── ui5-task-pwa-enabler            // task extension: enables ui5 app with pwa functionalities
├── ui5-task-zipper                 // task extension: bundle the entire webapp in a zip-archive
├── ui5-tooling-less                // tooling extension: serving and building less files
├── ui5-tooling-modules             // tooling extension: direct consumption of NPM packages in UI5 apps
├── ui5-tooling-stringreplace       // tooling extension: replaces placeholder strings
├── ui5-tooling-transpile           // tooling extension: transpile resources using Babel
└── ui5-utils-express               // utilities: helper stuff for express
```

--------------------------------

### Configure SAP UShell Launchpad for Bookshop

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/showcases/approuter/webapp/index.html

Sets up the SAP UShell configuration for the Bookshop application. This includes defining the default renderer, bootstrap plugins like RuntimeAuthoringPlugin, and configuring renderers. It also specifies the applications to be displayed in the launchpad.

```javascript
window["sap-ushell-config"] = {
  defaultRenderer: "fiori2",
  bootstrapPlugins: {
    RuntimeAuthoringPlugin: {
      component: "sap.ushell.plugins.rta",
      config: {
        validateAppVersion: false,
      },
    },
  },
  renderers: {
    fiori2: {
      componentData: {
        config: {
          //rootIntent: "fe-lrop-v4",
          search: "hidden",
        },
      },
    },
  },
  applications: {
    "fs-form": {
      title: "Bookshop",
      description: "Bookshop",
      additionalInformation: "SAPUI5.Component=ui5.bookshop",
      applicationType: "URL",
      url: "./ui5.bookshop",
      navigationMode: "embedded",
    },
    "fs-viewer": {
      title: "Viewer",
      description: "Viewer",
      additionalInformation: "SAPUI5.Component=ui5.bookshopviewer",
      applicationType: "URL",
      url: "./bookshop-viewer",
      navigationMode: "embedded",
    },
  },
};
```

--------------------------------

### Install ui5-task-i18ncheck

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-i18ncheck/README.md

Installs the ui5-task-i18ncheck package as a development dependency using npm.

```bash
npm install ui5-task-i18ncheck --save-dev
```

--------------------------------

### Install Chart.js NPM Package

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-modules/README.md

Installs the Chart.js library as a development dependency in your project, allowing it to be used with UI5 tooling extensions.

```bash
npm install chart.js
```

--------------------------------

### UI5 Loader Path Mapping Configuration (UI5)

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-modules/README.md

This section details configuration options relevant to the UI5 task, specifically for managing path mappings and namespaces for the UI5 loader. These settings help in running components with 3rd party modules, especially in Fiori launchpad environments.

```text
- *prependPathMappings*: `boolean`
  Prepends the path mappings for the UI5 loader to the `Component.js` which allows to run the Component using 3rd party modules in e.g. Fiori launchpad environments (defaults to `false`)
  &nbsp;

- *addToNamespace*: `boolean|string`
  Puts 3rd party modules into the namespace of the Component to make them Component-local. All used 3rd party modules will be moved by default into the sub-namespace `thirdparty` of the Component namespace at build time. If you use a string as value of `addToNamespace` you can define a custom namespace, e.g. `my/namespace/for/libs` which will be nested in the Components' namespace. With that option you can run your application using 3rd party modules in a Fiori launchpad environment. In some cases (wrong dependency rewrite, wish to keep 3rd party modules in the `resources` path, ...) it might be necessary to disable this option. (defaults to `true`, disables *prependPathMappings* when set to `true`)
  &nbsp;
```

--------------------------------

### Configure proxy using .env file

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-simpleproxy/README.md

Demonstrates how to use a .env file to set environment variables for the middleware's configuration, overriding values in ui5.yaml.

```shell
UI5_MIDDLEWARE_SIMPLE_PROXY_BASEURI=https://host.tld:1234/sap
UI5_MIDDLEWARE_SIMPLE_PROXY_STRICT_SSL=false
UI5_MIDDLEWARE_SIMPLE_PROXY_USERNAME=myUsername
UI5_MIDDLEWARE_SIMPLE_PROXY_PASSWORD=myPassword
```

--------------------------------

### UI5 Ecosystem Showcase Configuration Options

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-transpile/README.md

This section details the various configuration options available for the UI5 Ecosystem Showcase project, primarily focusing on transpilation and TypeScript-related settings within the `ui5.yaml` file. Options cover debugging, Babel configuration, file inclusion/exclusion patterns, TypeScript transformation, interface generation, and more.

```yaml
debug: true | false
  enable detailed logging (can be even more verbose by using the `--verbose` argument)

babelConfig: String | Object
  path to the babel config file or object to use as configuration for babel instead of the babel configuration from the file system, or the default configuration defined in this middleware (just using the `@babel/preset-env`)

includes: String<Array> (old alias: includePatterns)
  array of paths your application to include in transpilation, e.g. `/modern-stuff/`

excludes: String<Array> (old alias: excludePatterns)
  array of paths your application to exclude from transpilation, e.g. 3-rd party libs in `/lib/`

filePattern: String
  source file pattern for the resources to transpile, defaults to `.js` and will be changed to `.ts` if a `tsconfig.json` file is located in the project or by explicitly setting the configuration option transformTypeScript to `true` (multiple file extensions can be handled by specifying mutliple extensions using the glob syntax, e.g.: `.+(js|jsx)` or `.+(ts|tsx)`)

transformTypeScript: boolean (old alias: transpileTypeScript)
  if enabled, the tooling extension transforms TypeScript sources; the default value is derived from the existence of a `tsconfig.json` in the root folder of the project - if the file exists the configuration option is `true` otherwise `false`; setting this configuration option overrules the automatic determination

altTsConfig: String
  specify the location of an alternate `tsconfig.json` to use for the TypeScript transpilation step. Also the detection whether the project uses TypeScript is then using the alternate `tsconfig.json` file

generateTsInterfaces: boolean | undefined (*experimental feature*)
  option requires a dependency to the `@ui5/ts-interface-generator` when either the value of the option is `true` or `undefined` and the project is a TypeScript-based project or the `transformTypeScript` option is set to `true` - can be forced to be inactive by setting the option to `false` (only relevant for the middleware)

generateTsInterfacesJsDoc: String(none|minimal|verbose) (*experimental feature*)
  configures the amount of JSDoc which should be generated by the `@ui5/ts-interface-generator`. For details please check: <https://github.com/SAP/ui5-typescript/tree/main/packages/ts-interface-generator#commandline-options>

generateDts: boolean
  if enabled, the tooling extension will generate type definitions (`.d.ts`) files; by default for projects of type `library` this option is considered as `true` and for other projects such as `application` this option is considered as `false` by default (is only relevant in case of transformTypeScript is `true`)

failOnDtsErrors: boolean
  if enabled, the tooling extension will fail during the generation of type definitions (`.d.ts`) files; this option is considered as `false` by default (is only relevant in case of generateDts is `true`)

omitTSFromBuildResult: boolean
  if enabled, the TypeScript sources will be omitted from the build result. This will disable the debugging support in the TypeScript sources (since the related source files aren't included anymore)

omitSourceMaps: boolean
  if enabled, the SourceMaps will not be generated for the JavaScript sources created from the TypeScript sources

transpileDependencies: boolean (*experimental feature*)
  if enabled, the middleware also transpile the sources from the dependencies which is needed for development scenarios when referring to other projects (this configuration option is ignored by the task)

transformAtStartup: boolean (*experimental feature*)
  if enabled, the resources will be transpiled at startup to avoid additional overhead for the first requests to the transpiled resources.

skipBabelPresetPluginResolve: boolean (*experimental feature*)
  if enabled, the babel presets and plugins will not be resolved by the tooling extension and babel itself will do it. This can cause babel presets or plugins not to be found in case of working in monorepos

generateBabelConfig: boolean | string (*experimental feature*)
  this option allows to generate the babel config file for the current project when the babel config file doesn't exist - this option is useful when you are using babel generation within a different tooling (like a native babel execution inside e.g. jest) to use the same configuration like when running the task or middleware; if the value is a string the tooling extension will assume to generate a file with the provided name
```

--------------------------------

### Configure Middleware in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-ui5/README.md

Basic configuration of the ui5-middleware-ui5 in the ui5.yaml file to be used after the compression middleware.

```yaml
specVersion: "3.0"
metadata:
  name: ui5.bookshop
type: application
server:
  customMiddleware:
  - name: ui5-middleware-ui5
    afterMiddleware: compression
```

--------------------------------

### Configure UI5 Server Middlewares in package.json

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/cds-plugin-ui5/README.md

Shows how to define UI5 server middleware configurations within the package.json file. This includes specifying configuration file names, workspace settings, and version overrides for UI5 modules.

```json
{
  "name": "cds-bookshop",
  "...": "...",
  "cds": {
    "...": "...",
    "cds-plugin-ui5": {
      "modules": {
        "ui5-bookshop": {
          "configFile": "ui5.yaml",
          "workspaceConfigFile": "ui5-workspace.yaml",
          "workspaceName": "default",
          "versionOverride": "1.117.0"
        }
      }
    }
  }
}
```

--------------------------------

### Configure UI5 Live Reload Middleware for Multiple Paths

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-livereload/README.md

Demonstrates how to configure the middleware to watch for changes across multiple directories by providing an array to the 'path' option.

```yaml
server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      debug: true
      extraExts: "xml,json,properties"
      port: 35729
      path: 
            - "webapp"
            - "../my.reuse.library/src/my/reuse/library"
```

--------------------------------

### UI5 Simple Proxy Middleware Configuration

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-simpleproxy/README.md

This section details how to configure the ui5-middleware-simpleproxy in your ui5.yaml file, including available options and their descriptions.

```APIDOC
## UI5 Simple Proxy Middleware Configuration

### Description
Configuration options for the `ui5-middleware-simpleproxy` which can be set in `$yourapp/ui5.yaml`.

### Method
N/A (Configuration)

### Endpoint
N/A (Configuration)

### Parameters
#### Request Body (ui5.yaml configuration)
- **name** (string) - Required - The name of the middleware (`ui5-middleware-simpleproxy`).
- **afterMiddleware** (string) - Optional - Specifies middleware to run after.
- **mountPath** (string) - Optional - The path to mount the proxy.
- **configuration** (object) - Optional - Configuration options for the proxy:
  - **baseUri** (string) - Required - The base URI to proxy. Can also be set via `UI5_MIDDLEWARE_SIMPLE_PROXY_BASEURI` environment variable.
  - **strictSSL** (boolean) - Optional - Ignore strict SSL checks. Default: `true`. Can also be set via `UI5_MIDDLEWARE_SIMPLE_PROXY_STRICT_SSL` environment variable.
  - **removeETag** (boolean) - Optional - Removes the ETag header from the response.
  - **username** (string) - Optional - Username for Basic Authentication. Can also be set via `UI5_MIDDLEWARE_SIMPLE_PROXY_USERNAME` environment variable.
  - **password** (string) - Optional - Password for Basic Authentication. Can also be set via `UI5_MIDDLEWARE_SIMPLE_PROXY_PASSWORD` environment variable.
  - **httpHeaders** (map) - Optional - HTTP headers to set for the proxied request.
  - **query** (map) - Optional - Query parameters to set for the proxied request.
  - **excludePatterns** (string[]) - Optional - Array of exclude patterns using glob syntax.
  - **skipCache** (boolean) - Optional - Remove cache guid when serving from FLP if it matches an excludePattern.
  - **enableWebSocket** (boolean) - Optional - Enables support for proxying WebSockets. Default: `false`.

### Request Example
```yaml
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    afterMiddleware: compression
    mountPath: /odata
    configuration:
      baseUri: "https://services.odata.org"
      username: myUsername
      password: myPassword
      httpHeaders:
        Any-Header: AnyHeader
      query:
        sap-client: '206'
      excludePatterns:
      - "/local/**"
```

### Response
N/A (This is a configuration snippet)

### Response Example
N/A
```

--------------------------------

### Configure UI5 Serve Static Middleware in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-servestatic/README.md

Demonstrates how to configure the ui5-middleware-servestatic in the ui5.yaml file, specifying the middleware name, mounting path, and configuration options like rootPath.

```yaml
server:
  customMiddleware:
  - name: ui5-middleware-servestatic
    afterMiddleware: compression
    mountPath: /resources
    configuration:
      rootPath: "/Users/Me/upkg/sapui5-runtime-1.70/resources"
```

--------------------------------

### Configure UI5 Live Reload Middleware with Options

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-livereload/README.md

Shows how to configure the ui5-middleware-livereload with various options like debug, extraExts, port, and watchPath.

```yaml
server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      debug: true
      extraExts: "xml,json,properties"
      port: 35729
      watchPath: "webapp"
```

--------------------------------

### UI5 YAML Configuration: Skip Transform Glob Patterns

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-modules/README.md

Example of configuring `skipTransform` using glob patterns within `ui5.yaml`. This allows specifying modules for which transformation should be skipped, useful for libraries providing custom configurations.

```yaml
specVersion: "3.0"
metadata:
  name: com.myorg.mylib
type: library
customConfiguration:
  ui5-tooling-modules: &cfgModules
    skipTransform:
      - "@luigi-project/container/dist/anypath/**"
builder:
  customTasks:
    - name: ui5-tooling-modules-task
      afterTask: replaceVersion
      configuration:
        <<: *cfgModules
```

--------------------------------

### Environment Variable Support

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-simpleproxy/README.md

Details how environment variables can be used to configure the proxy middleware, overriding `ui5.yaml` settings.

```APIDOC
## Environment Variable Support

### Description
Configuration values can be provided via environment variables, which take precedence over settings in `ui5.yaml` or `.env` files.

### Method
N/A (Environment Variables)

### Endpoint
N/A (Environment Variables)

### Parameters
#### Environment Variables
- **UI5_MIDDLEWARE_SIMPLE_PROXY_BASEURI** (string) - Sets the `baseUri`.
- **UI5_MIDDLEWARE_SIMPLE_PROXY_STRICT_SSL** (boolean) - Sets the `strictSSL` option.
- **UI5_MIDDLEWARE_SIMPLE_PROXY_USERNAME** (string) - Sets the `username` for Basic Authentication.
- **UI5_MIDDLEWARE_SIMPLE_PROXY_PASSWORD** (string) - Sets the `password` for Basic Authentication.

### Request Example
```shell
UI5_MIDDLEWARE_SIMPLE_PROXY_BASEURI=https://host.tld:1234/sap
UI5_MIDDLEWARE_SIMPLE_PROXY_STRICT_SSL=false
UI5_MIDDLEWARE_SIMPLE_PROXY_USERNAME=myUsername
UI5_MIDDLEWARE_SIMPLE_PROXY_PASSWORD=myPassword
```

### Response
N/A

### Response Example
N/A
```

--------------------------------

### Configure UI5 Minify XML Task in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-task-minify-xml/README.md

Configures the ui5-task-minify-xml within the ui5.yaml file, specifying it as a custom task with options for minification, file extensions, and exclusion patterns. This setup enables XML minification during the UI5 build process.

```yaml
builder:
  customTasks:
  - name: ui5-task-minify-xml
    afterTask: replaceVersion
    configuration:
      minifyOptions:
        removeComments: true
        collapseEmptyElements: true
        collapseWhitespaceInAttributeValues: true
        # ... further minify-xml attributes
      fileExtensions:
      - "xml"
      - "edmx"
      excludePatterns:
      - "lib/"
      - "another/dir/in/webapp"
      - "yet/another/dir"
```

--------------------------------

### Expose App Pages from Custom UI5 Middleware

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/cds-plugin-ui5/README.md

Illustrates how a custom UI5 middleware can expose an array of app pages to be listed on the CDS server's welcome page. This is achieved by assigning a `getAppPages` function to the middleware function.

```js
// the middleware factory function
module.exports = async ({ log, resources, options }) => {
  // create the middleware function
  const mwFn = (req, res, next) => {
    [...] 
  };

  /**
   * Returns an array of app pages to be added to the welcome
   * page of the <code>@sap/cds</code> server.
   * @returns {undefined|string[]} array of app pages
   */
  mwFn.getAppPages = function() {
    return ["/test.html"];
  };

  // finally return the middleware function
  return mwFn;
};
```

--------------------------------

### Configure UI5 Live Reload Middleware using 'path' Option

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-livereload/README.md

Illustrates configuring the ui5-middleware-livereload using the 'path' option instead of 'watchPath' to specify directories to monitor.

```yaml
server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      debug: true
      extraExts: "xml,json,properties"
      port: 35729
      path: "webapp"
```

--------------------------------

### Configure Middleware Mount Path via ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-ui5/README.md

Demonstrates how to configure a specific mount path for a UI5 application module within the ui5.yaml configuration.

```yaml
specVersion: "3.0"
metadata:
  name: ui5.bookshop
type: application
server:
  customMiddleware:
    - name: ui5-middleware-ui5
      afterMiddleware: compression
      configuration:
        modules:
          %moduleId%:
            mountPath: "/app"
```

--------------------------------

### Configure UI5 Live Reload Middleware in ui5.yaml

Source: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-middleware-livereload/README.md

Demonstrates the basic configuration of the ui5-middleware-livereload in the ui5.yaml file, specifying it as a custom middleware.

```yaml
server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
```