{"id":18886,"library":"ui5-middleware-livereload","title":"UI5 Middleware LiveReload","description":"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.","status":"active","version":"3.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/ui5-community/ui5-ecosystem-showcase","tags":["javascript"],"install":[{"cmd":"npm install ui5-middleware-livereload","lang":"bash","label":"npm"},{"cmd":"yarn add ui5-middleware-livereload","lang":"bash","label":"yarn"},{"cmd":"pnpm add ui5-middleware-livereload","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - requires the UI5 server middleware interface","package":"@ui5/server","optional":false}],"imports":[{"note":"Install as devDependency; no direct import - configured in ui5.yaml","wrong":"npm install ui5-middleware-livereload --save","symbol":"ui5-middleware-livereload","correct":"npm install ui5-middleware-livereload --save-dev"}],"quickstart":{"code":"# Install the middleware as a devDependency\nnpm install ui5-middleware-livereload --save-dev\n\n# In ui5.yaml, add the middleware configuration:\n# server:\n#   customMiddleware:\n#     - name: ui5-middleware-livereload\n#       afterMiddleware: compression\n#       configuration:\n#         debug: true\n#         port: 35729\n#         extraExts: \"xml,json,properties\"\n#         watchPath: \"webapp\"\n\n# Start the UI5 server as usual (e.g., ui5 serve)","lang":"yaml","description":"Shows installation and configuration of the live reload middleware in ui5.yaml."},"warnings":[{"fix":"Configure a custom 'port' in the configuration section of ui5.yaml.","message":"The middleware uses port 35729 by default; ensure it is not already used by another livereload service.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use 'watchPath' instead of 'path' in the configuration.","message":"Watch path 'path' alias was deprecated in v3 in favor of 'watchPath'. Both still work but 'path' may be removed in a future release.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Check the console logs for errors; increase debug level by setting 'debug: true'.","message":"Browser must manually be refreshed if the middleware fails to detect changes (e.g., due to file exclusion patterns or missing extensions in 'extraExts').","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update @ui5/cli to version 3.0.0 or later and set specVersion: '3.0' in ui5.yaml.","message":"Major version 3 requires @ui5/cli >= 3.0.0 and specVersion '3.0' in ui5.yaml. Older versions of UI5 CLI are incompatible.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Add configuration: { usePolling: true } only when needed.","message":"The 'usePolling' option may cause high CPU usage on some systems; only enable if necessary (e.g., WSL2).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change the port in ui5.yaml configuration (e.g., port: 35730).","cause":"Another process is already using port 35729 (default livereload port).","error":"Error: listen EADDRINUSE :::35729"},{"fix":"Update ui5.yaml to include 'specVersion: \"3.0\"' at the top level.","cause":"The package requires specVersion '3.0' in ui5.yaml.","error":"The spec version \"2.0\" is not supported by \"ui5-middleware-livereload\" v3.x"},{"fix":"Run 'npm install ui5-middleware-livereload --save-dev' in your project.","cause":"The package is not installed or not in devDependencies.","error":"Cannot find module 'ui5-middleware-livereload'"},{"fix":"Ensure the YAML has a 'configuration' block under the middleware definition.","cause":"The configuration object is malformed or missing the 'configuration' key.","error":"TypeError: Cannot set properties of undefined (setting 'debug')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}