Package Exports

node-hot-loader
node-hot-loader/lib/HmrClient
node-hot-loader/lib/HmrServer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (node-hot-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Node Hot Loader

Node Hot Loader is a small tool written on ES2015+ for Hot Module Replacement support for Node.js application development with webpack.

Its inspired by kotatsu and webpack-dev-middleware.

Typical use cases for Node Hot Loader are hot-reloaded express application with APIs and frontend serving, i.e. React.

Node Hot Loader support webpack config files with ES2015+ (through babel). For using ES2015+ in webpack configuration you must provide .babelrc configuration file in project root directory.

Installation

npm install --save-dev node-hot-loader

Usage

Usage: node-hot {options}

Options:
  -c, --config       Webpack config file. If not set then search webpack.config.js in root directory.

Example

node-hot --config webpack.config.server.babel.js

You can use all configurations for webpack compile which webpack supports.

The minimum required configuration:

{
  // It's required!
  // Also if you use multiconfigurations node-hot choose configuration with target 'node'.
  target: 'node',
  
  // For now you must provide entry with 'server' name which will be the main entry point of node application.
  // It will be fixed in the feature.
  entry: {
    server: [
      './server/index',
    ],
  },
  
  plugins: [
      // It's required!
    // Enable HMR globally.
    new webpack.HotModuleReplacementPlugin(),
    // It's not necessary.
    // Prints more readable module names in the console on HMR updates.
    new webpack.NamedModulesPlugin(),
    // It's not necessary.
    // In order for don't emit files if errors occurred.
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

Express example

import app from './app'; // configuring express app, i.e. routes and logic
import DB from './services/DB'; // DB service


function startServer() {
  const httpServer = app.listen(app.get('port'), (error) => {
    if (error) {
      console.error(error);
    } else {
      const address = httpServer.address();
      console.info(`==> 🌎 Listening on ${address.port}. Open up http://localhost:${address.port}/ in your browser.`);
    }
  });

  // Hot Module Replacement API
  if (module.hot) {
    let currentApp = app;
    module.hot.accept('./app', () => {
      httpServer.removeListener('request', currentApp);
      import('./app').then(m => {
        httpServer.on('request', m.default);
        currentApp = m.default;
        console.log('Server reloaded!');
      })
      .catch(console.error);
    });
  }
}

// After DB initialized start server
DB.connect()
    .then(() => {
      console.log('Successfully connected to MongoDB. Starting http server.');
      startServer();
    })
    .catch((err) => {
      console.error('Error in server start script.', err);
    });

Known limitations

In your webpack config you must provide main entry with 'server' name. It will be fixed in the feature.

License

MIT (https://opensource.org/licenses/mit-license.php)