UI5 Middleware LiveReload

3.3.0 verified Sat Apr 25 auth: no javascript

Middleware for the UI5 server that triggers a live reload in the browser when files inside the webapp directory change (e.g., on save). Version 3.3.0 requires @ui5/cli >= 3.0.0 with specVersion '3.0'. Community-maintained by the UI5 ecosystem showcase. Key differentiators: customisable watch paths, polling for WSL2, and inclusion of framework/application dependencies.

Common errors

error Error: listen EADDRINUSE :::35729 ↓

cause Another process is already using port 35729 (default livereload port).

fix

Change the port in ui5.yaml configuration (e.g., port: 35730).

error The spec version "2.0" is not supported by "ui5-middleware-livereload" v3.x ↓

cause The package requires specVersion '3.0' in ui5.yaml.

fix

Update ui5.yaml to include 'specVersion: "3.0"' at the top level.

error Cannot find module 'ui5-middleware-livereload' ↓

cause The package is not installed or not in devDependencies.

fix

Run 'npm install ui5-middleware-livereload --save-dev' in your project.

error TypeError: Cannot set properties of undefined (setting 'debug') ↓

cause The configuration object is malformed or missing the 'configuration' key.

fix

Ensure the YAML has a 'configuration' block under the middleware definition.

Warnings

gotcha The middleware uses port 35729 by default; ensure it is not already used by another livereload service. ↓

fix Configure a custom 'port' in the configuration section of ui5.yaml.

gotcha Watch path 'path' alias was deprecated in v3 in favor of 'watchPath'. Both still work but 'path' may be removed in a future release. ↓

fix Use 'watchPath' instead of 'path' in the configuration.

gotcha Browser must manually be refreshed if the middleware fails to detect changes (e.g., due to file exclusion patterns or missing extensions in 'extraExts'). ↓

fix Check the console logs for errors; increase debug level by setting 'debug: true'.

breaking Major version 3 requires @ui5/cli >= 3.0.0 and specVersion '3.0' in ui5.yaml. Older versions of UI5 CLI are incompatible. ↓

fix Update @ui5/cli to version 3.0.0 or later and set specVersion: '3.0' in ui5.yaml.

gotcha The 'usePolling' option may cause high CPU usage on some systems; only enable if necessary (e.g., WSL2). ↓

fix Add configuration: { usePolling: true } only when needed.

Install

npm install ui5-middleware-livereload

yarn add ui5-middleware-livereload

pnpm add ui5-middleware-livereload

Imports

ui5-middleware-livereload
wrong
```
npm install ui5-middleware-livereload --save
```
correct
```
npm install ui5-middleware-livereload --save-dev
```
Install as devDependency; no direct import - configured in ui5.yaml

Quickstart

Shows installation and configuration of the live reload middleware in ui5.yaml.

# Install the middleware as a devDependency
npm install ui5-middleware-livereload --save-dev

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

# Start the UI5 server as usual (e.g., ui5 serve)