README.md

UI5 middleware for live reloading webapp sources on change

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

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, default: webapp
  path inside $yourapp the reload server monitors for changes

Usage

1. 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.

2. 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"

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.

Misc/FAQ

yep, cross-browser, cross-platform.

License

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.