Nw.js: Is HMR (using webpack) or auto-reload possible for development?

[zhirzh]

I was wondering if it is possible to implement HMR or autoreload feature in NW apps to ease development phase.
I believe webpack-HMR might not work, since websocket connection can't be established without an actual server running. I might be wrong; It's just a hunch.

[Goopil]

yes you can by replacing the main property in your packages.json by the url of your local dev server.

(i use vue-cli webpack template, so for me it would be "main": "http://localhost:8081")

i have 2 packages.json in my app folder. 1 for dev and 1 for production.

if you find a better solution, let me know ;)

[Goopil]

well after some playing, the previous recommandation did not work has expected.
but there is another way to do this.

launch webpack with --watch params
and add this to your index.html

<script>
      var gulp = require('gulp');
      gulp.task('reload', function () {
          if (location) location.reload();
      });
      gulp.watch('**/*', ['reload']);
</script>

webpack will rebundle on each change and the gulp script will refresh the page on bundle change

[funwithtriangles]

Has anyone managed to get this working? I tried setting up webpack-dev-server, running nwjs with the bundle in a simple script tag, pointing to the server:

<script src='http://0.0.0.0:8080/static/bundle.js'></script>

Unfortunately I got stuck there because it was getting confused with the chrome-extension protocol that nwjs runs on.

[kailniris]

I am using vue cli webpack template. It has HMR and it works with nw.js. Create a package with main pointing to the HMR server. Add node remote to the package. If you want to use require in nw.js instead of require use nw.require.

[funwithtriangles]

@kailniris Awesome, sounds great! Can you share a link/gist with nwjs?

[funwithtriangles]

@kailniris Not to worry, I figured it out! :)

For anyone else who's struggling, here is my webpack config (:

const webpack = require('webpack')

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/only-dev-server',
    './src/main.js'
  ],
  output: {
    filename: 'bundle.js',
    path: '/dist/',
    publicPath: '/',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
    ]
  },
  target: 'node-webkit',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    historyApiFallback: true,
    hot: true
  }
}

As well as the usual package.json for any webpack project, I have one inside of a folder called launch, specifically for running Node Webkit.

{
  "name": "standalone",
  "main": "http://0.0.0.0:8080/",
  "node-remote": "http://*/*",
  "chromium-args": "--mixed-context",
  "webkit": {
    "plugin": true
  }
}

Then you'll need to run both webpack-dev-server and nw ./launch (here I'm using nw). It may sound stupid but don't forget to have an index.html at the root of your project.

[Silve2611]

@funwithtriangles Could you elaborate how this is done? I have a running nw.js application and i have no clue of how to get it running. How can i get webpack-dev-server running?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[noemission]

I know this is a closed issue, but I faced the same problem today with webpack-nwjs integration. I created a webpack plugin to handle these issues without using webpack-dev-server. Since I find using a server to handle files during NWjs development a bit problematic. Anyway here is the repo any feedback would be greatly appreciated!