UI5 middleware for live reloading `webapp` sources on change
npm install ui5-middleware-livereloadwebapp sources on change> :wave: This is an open‑source, community‑driven project, developed and actively monitored by members of the UI5 community. You are welcome to use it, report issues, contribute enhancements, and support others in the community.
Middleware for ui5-server, doing a live reload when files inside $yourapp change, e.g. on save.
- Requires at least @ui5/cli@3.0.0 (to support specVersion: "3.0")
> :warning: UI5 CLI Compatibility
> All releases of this UI5 CLI extension using the major version 3 require UI5 CLI V3. Any previous releases below major version 3 (if available) also support older versions of the UI5 CLI. But the usage of the latest UI5 CLI is strongly recommended!
``bash`
npm install ui5-middleware-livereload --save-dev
)- debug: true|false
verbose logging
- extraExts: string, default: jsx,ts,tsx,xml,json,properties js
file extensions other than , html and css to monitor for changesinteger
- port: , default: an free port choosen from 35729 onwardsstring
port the live reload server is started on
- watchPath|path: , default: all paths from app and non framework dependencies$yourapp
path inside the reload server monitors for changesregex
- exclusions: one or many . By default, this includes .git/, .svn/, and .hg/
- usePolling: true|false, default:
Enables chokidar polling to support virtualised filesystems(eg. WSL2.0).
- includeFwkDeps: true|false, default:
Includes the framework dependencies into the
- includeAppDeps: true|false, default:
Includes the application dependencies into the
1. Define the dependency in $yourapp/package.json:
`json`
"devDependencies": {
// ...
"ui5-middleware-livereload": "*"
// ...
}
2. configure it in $yourapp/ui5.yaml:
`yaml`
server:
customMiddleware:
- name: ui5-middleware-livereload
afterMiddleware: compression
Using the configuration properties:
`yaml`
server:
customMiddleware:
- name: ui5-middleware-livereload
afterMiddleware: compression
configuration:
debug: true
extraExts: "xml,json,properties"
port: 35729
watchPath: "webapp"
or with path instead of watchPath:
`yaml`
server:
customMiddleware:
- name: ui5-middleware-livereload
afterMiddleware: compression
configuration:
debug: true
extraExts: "xml,json,properties"
port: 35729
path: "webapp"
Reload from multiple paths:
`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"
Use polling to watch files:
`yaml`
server:
customMiddleware:
- name: ui5-middleware-livereload
afterMiddleware: compression
configuration:
debug: true
extraExts: "xml,json,properties"
port: 35729
usePolling: true
Exclude single subpath from paths/ watchPaths:
`yaml`
server:
customMiddleware:
- name: ui5-middleware-livereload
afterMiddleware: compression
configuration:
debug: true
extraExts: "xml,json,properties"
port: 35729
watchPath: "webapp"
exclusions:
- "wdi5/"
Exclude multiple subpaths from paths/ watchPaths:
`yaml`
server:
customMiddleware:
- name: ui5-middleware-livereload
afterMiddleware: compression
configuration:
debug: true
extraExts: "xml,json,properties"
port: 35729
watchPath: "webapp"
exclusions:
- "wdi5/"
- "integration/"
The middleware launches a livereload-server on the specified port, listening to changes in the app and any of the non framework dependencies or alternativly the specified path or watchPath inside your application directory.
When changes are detected, a reload is triggered to all connected clients - so all browsers having $yourapp will reload the application. The reload is #`-aware, meaning the current displayed route in your single-page UI5 app is kept steady.
The middleware supports HTTP/2 automatically, when the UI5 server is started with the --h2 option. It uses the same SSL key and certificate, either set using the --key and --cert options, or using the default ~/.ui5/server/server.key and ~/.ui5/server/server.crt.
yep, cross-browser, cross-platform.
This work is dual-licensed under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0 but finally you can choose between one of them if you use this work.
When you like this stuff, buy @vobu a beer or buy @pmuessig a coke when you see them.