Ui5-tooling-livereload NPM

UI5 middleware for live reloading `any` sources on change

Middleware for ui5-server, doing a live reload when files inside $yourapp change, e.g. on save.

Origin

This is a modified copy of the original, which is stored as monorepo here

whats the difference? You can use all available parameter from the livereload package

Install

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

Configuration options (in `$yourapp/ui5.yaml`)

debug: true|false
verbose logging
ext: string, default: "xml,json,properties"
file extensions other than js, html and css to monitor for changes
port: integer, default: 35729
port the live reload server is started on
path: string or array, default: webapp
path inside $yourapp the reload server monitors for changes

Usage

Define the dependency in $yourapp/package.json:

"devDependencies": {
    // ...
    "ui5-middleware-livereload": "*"
    // ...
},
"ui5": {
  "dependencies": [
    // ...
    "ui5-middleware-livereload",
    // ...
  ]
}

As the devDependencies are not recognized by the UI5 tooling, they need to be listed in the ui5 > dependencies array. In addition, once using the ui5 > dependencies array you need to list all UI5 tooling relevant dependencies.

configure it in $yourapp/ui5.yaml:

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

server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      debug: true
      ext: "xml,json,properties"
      port: 35729
      delay: 1000
      path: 
        - "webapp"
        - "server"

How it works

The middleware launches a livereload-server on the specified port, listening to changes in the specified path 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.