React-hot-loader: Setting up with React & Electron

[Orbyt]

Description

Followed the walkthrough found here, but have yet to get hot reloading working.

My original webpack.config.js:

var path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "app/index.jsx"),
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: 'http://localhost:8080/build/',
    filename: 'app.js'
  },
  module: {
    loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel',
            exclude: /node_modules/
        },
        { 
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }
    ]
  }    
};

and my package.json scripts:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env ENVIRONMENT=DEV electron main.js",
    "watch": "webpack-dev-server --hot --inline",
    "build": "webpack"
  },

Previously, to run my project (with webpack-dev-server for at least css reloading), I run npm run watch followed by npm run start to start the application.

Following the walkthrough, i've added the following:

I created a server.js file (I've name it devServer.js)

var path = require('path');
var webpack = require('webpack');
var express = require('express');
var config = require('./webpack.config');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(8080, function(err) {
  if (err) {
    return console.error(err);
  }
  console.log('Listening at http://localhost:8080/');
})

I then changed my webpack.config.js to the following:

var path = require("path");

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080', // WebpackDevServer host and port
    'webpack/hot/only-dev-server',
    path.resolve(__dirname, "app/index.jsx")
  ],
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: 'http://localhost:8080/build/',
    filename: 'app.js'
  },
  module: {
    loaders: [
        {
            test: /\.jsx?$/,
            loaders: ['react-hot', 'babel'],
            exclude: /node_modules/
        },
        { 
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }
    ]
  }    
};

and then added the following script to package.json:

"go": "node devServer.js",

Running the above script seems to initiate webpack as normal and prints webpack: bundle is now VALID.. Just a note, something I noticed is this output is not colored as it usually is. Following that, running npm run start starts the application. The application errors out and prints the following to the console:

Uncaught SyntaxError: The URL's scheme must be either 'http:' or 'https:'. 'file:' is not allowed.

Several questions:

1. What is wrong with my configuration? Im simply trying to get hot reloading of .jsx file changes working.
2. What is the meaning of the SyntaxError that is thrown, and how can it be corrected?
3. Why is webpack's output uncolored?

Let me know if more info is needed.

[calesce]

It looks like you're using webpack-hot-middleware in your server.js, but WebpackDevServer in your Webpack config. Note that WebpackDevServer is server built on top of Express. Either one should be fine, but they have different APIs, so you'll probably just want to use one.

This doesn't look to be an issue with React Hot Loader, so I'm closing this out. Let me know if you're still having configuration problems.

[Orbyt]

@calesce Then the walkthrough is incorrect. It mentions the following for the entry array:

entry: [
  'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
  'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
  './scripts/index' // Your appʼs entry point
]

but uses the server.js from this boilerplate which itself uses webpack-hot-middleware.

I went ahead and changed my webpack.config.js to the following:

entry: [
    'webpack-hot-middleware/client',
    path.resolve(__dirname, "app/index.jsx")
  ],

Upon running npm run watch and then npm run start, the application loads, but prints the following to the console:

GET file:///__webpack_hmr net::ERR_FILE_NOT_FOUND

EDIT: After reading over this issue:, I've modified my entry array to the following:

entry: [
    'webpack-hot-middleware/client?path=http://localhost:8080/__webpack_hmr',
    path.resolve(__dirname, "app/index.jsx")
  ],

The app loads, no errors are printed, but React reloading is still not working.

[calesce]

Can you post a gist or project with your full config? I don't see Webpack plugins, for example.

[Orbyt]

As of now I am not using react-hot-loader. My project still has live reloading, but only works for a select few files. The issue is noted here: http://stackoverflow.com/questions/41368745/hot-reload-in-electron-react-application

[lingz]

I can confirm the same problem with:

The URL's scheme must be either 'http:' or 'https:'. 'file:' is not allowed.

when using webpack-dev-server --hot --inline with electron

[mkawalec]

I'm getting the same error in phonegap. It seems to stem from the fact that / urls are defaulted to a file:// protocol

[lingz]

The simple solution was to make sure when webpack-dev-server was running, that I opened the localhost URL instead of file:

  // and load the index.html of the app.
  if (process.env.NODE_ENV == "production") {
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }));
  } else {
    win.loadURL("http://localhost:3000");
  }