UI5 middleware for live reloading webapp sources on change

👋 This is a community project and there is no official support for this package! Feel free to use it, open issues, contribute, and help answering questions.

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

Prerequisites

• Requires at least @ui5/cli@3.0.0 (to support specVersion: "3.0")

⚠️ UI5 Tooling Compatibility All releases of this tooling extension using the major version 3 require UI5 Tooling V3. Any previous releases below major version 3 (if available) also support older versions of the UI5 Tooling. But the usage of the latest UI5 Tooling is strongly recommended!

Install

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

Configuration options (in $yourapp/ui5.yaml)

• debug: true|false
  verbose logging
• extraExts: string, default: jsx,ts,tsx,xml,json,properties file extensions other than js, html and css to monitor for changes
• port: integer, default: an free port choosen from 35729 onwards port the live reload server is started on
• watchPath|path: string, default: all paths from app and non framework dependencies path inside $yourapp the reload server monitors for changes
• exclusions: one or many regex. By default, this includes .git/, .svn/, and .hg/
• usePolling: true|false, default: false Enables chokidar polling to support virtualised filesystems(eg. WSL2.0).
• includeFwkDeps: true|false, default: false Includes the framework dependencies into the watchPath
• includeAppDeps: true|false, default: false Includes the application dependencies into the watchPath

Usage

1. Define the dependency in $yourapp/package.json:

"devDependencies": {
    // ...
    "ui5-middleware-livereload": "*"
    // ...
}

2. configure it in $yourapp/ui5.yaml:

server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression

Using the configuration properties:

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:

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

Reload from multiple paths:

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:

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:

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:

server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      debug: true
      extraExts: "xml,json,properties"
      port: 35729
      watchPath: "webapp"
      exclusions:
          - "wdi5/"
          - "integration/"

How it works

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.

HTTP/2 support

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.

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.