Hot-client-plugin NPM

Hot Client Plugin

A webpack 4 plugin (websocket server/client) to complete Hot Module Replacement. At the moment it is designed to work with WebpackKoaServer and FrontServePlugin setup. See live example here.

Helps to improve productivity by dynamically applying webpack updates and:

showing compiler and app errors across all browsers and consoles (DevTools etc) in which app is opened;
opening specific line and column of the file with error when clicked on the error message in a browser;
hands-free refreshing or re-applying after error has been fixed, just save the file.

The plugin actually utilises react-error-overlay to display errors. Therefore, picture above is copied from create-react-app.

Hot Client Plugin works on macOS and should work on Windows, and Linux (has not been tested). If something doesn't work, please file an issue.

Browser Support

The only browsers with support of native WebSocket will work with this plugin.

Requirements

This plugin requires a minimum of Node.js v6.9.0, Webpack v4.0.0.

Installation

To install plugin, you may choose one of the following methods:

npm

npm i hot-client-plugin --save-dev

Yarn

yarn add hot-client-plugin --dev

Configuration

Webpack Configuration

Entry

The Hot Client Plugin will add hot-client entry to webpack configuration automatically.

Plugins

You have to add HotClientPlugin to plugins section. Not to be confused with resolve.plugins.

The HotClientPlugin do not depends on the order in the plugins array. It is possible to add it in any preferable order.

Note: Don't forget to require or import HotClientPlugin module.

//...
const HotClientPlugin = require('hot-client-plugin');
//...

module.exports = {
  //...
  plugins: [
    //...
    new HotClientPlugin(),
    //...
  ]
};

Also, it is possible to pass optional options object to the plugin constructor like this:

//...
plugins: [
  //...
  new HotClientPlugin({
    host: '127.0.0.2',
    port: 8081,
    editor = {
      allowedIPs: 'any'
    }
  }),
  //...
]
//...

There is no need to include webpack.HotModuleReplacementPlugin. It will be added by HotClientPlugin automatically.

List of available Hot Client Plugin constructor options

The options object is optional.

host

Type: String Default: 0.0.0.0

The ip address of the WebSocket server.

port

Type: Number Default: 8081

The port of the WebSocket server.

hotClient

Type: String Default: require.resolve('hot-client-plugin/lib/HotClient')

hmr

Type: Object|undefined Default: undefined

The optional settings object for webpack.HotModuleReplacementPlugin plugin. Will be passed to constructor.

errors

Type: Boolean Default: true

Set to false to stop sending compiler errors to your browser, but will keep displaying run-time errors.

warnings

Type: Boolean Default: true

Set to false to stop sending compiler warnings to your browser, but will keep displaying run-time warnings.

editor

Type: Object Default: { allowedIPs: '127.0.0.1' }

The editor launching options. At the moment supports only allowedIPs option.

editor.allowedIPs

Type: String|Array|Object Default: 127.0.0.1

The ip address(es) allowed to launch the editor on the host machine. Supports both IPv4 and IPv6. Also, supports CIDR.

Examples:

{
  editor: {
    allowedIPs: [
      '127.0.0.1',
      '192.168.101.1/24',
      {
        first: '172.0.0.1',
        last: '172.0.0.55'
      },
      '::ffff:c0a8:f23',
      '::ffff:c0a8:f23/96',
      {
        first: '::ffff:c0a8:0001',
        last: '::ffff:c0a8:ffff'
      },
      [ '127.0.0.2', '127.0.0.3' ]
    ]
  }
}

staticContent

Type: Boolean|String Default: false

An absolute path to a static content folder (assets like index.html, favicon, images etc.). This option will enable monitoring of the static assets. If any of the assets will change HotClientPlugin will reload a page.

Contributing

We'd love to have your helping hand on hot-client-plugin! See CONTRIBUTING.md for more information on what we're looking for and how to get started.