@sap-ux/reload-middleware v0.1.5

@sap-ux/reload-middleware

The @sap-ux/reload-middleware is a Custom UI5 Server Middleware for reloading applications automatically during local development. Whenever a file relevant for the SAP Fiori applications is chaged the middleware will refresh the browser tab in which the application is running.

It can be used either with the ui5 serve or the fiori run commands.

When this middleware is used together with the preview-middleware, then the order in which the middlewares are loaded is important. The reload-middleware needs to be loaded before the preview-middleware. Hence the configuration in the ui5.yaml needs to look e.g. like this:

- name: reload-middleware
  afterMiddleware: compression
- name: preview-middleware
  afterMiddleware: reload-middleware

Configuration Options

Configuration Examples

Minimal configuration

In order to use the middleware this is the minimal configuration that you need to provide in the ui5.yaml of your application. By default all files under the webapp folder with the following extensions ['html', 'js', 'ts', 'json','xml', 'properties', 'change', 'variant', 'appdescr_variant', 'ctrl_variant', 'ctrl_variant_change', 'ctrl_variant_management_change'] will be watched. The livereload server is started on port 35729.

server:
  customMiddleware:
  - name: reload-middleware
    afterMiddleware: compression

Using configuration properties

The following configuration defines that port 33333 will be used and only files with extension xml and js under the webapp folder will be watched. Additionally a delay of 500ms is specified, which means that the reload will be triggered 500ms after a change has happen.

server:
  customMiddleware:
  - name: reload-middleware
    afterMiddleware: compression
    configuration:
      path: webapp
      port: 33333
      delay: 500
      exts:
       - xml
       - js

Watching multiple paths

You can also specify that multiple path should be watched. In this case it is also not a bad idea to activate the debug output.

server:
  customMiddleware:
  - name: reload-middleware
    afterMiddleware: compression
    configuration:
      port: 33333
      debug: true
      path:
       - webapp
       - "../my.reuse.library/src/my/reuse/library"

Using HTTP/2

This is how you can set your own HTTP/2 key and cert.

server:
  customMiddleware:
  - name: reload-middleware
    afterMiddleware: compression
    configuration:
      path: webapp
      port: 33333
      https:
       key: /home/path/to/my/key
       cert: /home/path/to/my/cert

Programmatic Usage

Alternatively you can only use the underlying middleware functions, e.g. for the case when you want to use the reload-middleware functionality in your express server.`

import { getLivereloadServer, getConnectLivereload } from '@sap-ux/reload-middleware';
const livereloadServer = await getLiveReloadServer(livereloadOptions);
livereloadServer.watch(watchPath);
const connectOptions = { port: livereloadServer.config.port }

return getConnectLivereload(connectOptions);

Keywords

• Reload Middleware
• Fiori tools
• Fiori elements
• SAP UI5