Reactjs hot reloading with electron

Question

I have cloned this repo for reactjs development with hot reloading enabled. Its working fine, Problem is that, I want to run this app inside electron with hot reloading. So in my main.js file I pointed reactsjs index.html file. Its showing blank page. Though i can see tag contents "Welcome to react" on electron window, that means its pointed properly, but no contents are getting displayed.

I found out that electron is throwing error

Failed to load resource: net::ERR_FILE_NOT_FOUND   app.js

I am pretty new to react development (started 3-4 days back only), so not sure how to I solve it. Below is my dir structure and webpack config

My app is running at http://localhost:8080/

Directory structure

project
---node_modules
---src
------index.js
------Components  
*babelrc
index.html (used by react)
main.js (used by electron)
package.json
webpack.config.js

Webpack config

const webpack = require('webpack')
const path = require('path')

module.exports = {
  devtool: 'source-map',
  entry: {
    'app': [
      'babel-polyfill',
      'react-hot-loader/patch',
      './src/index'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
    ]
  }
}

Answer 1

Ok finally I managed to solve it. Problem was with "webpack-dev-server", this command creates app.js bundle file but doesnt actually place it in your directory. It serves from memory, that's the reason it wasn't getting generated and my electron app wasn't able to find it. I am posting solution here in case any beginner faces the same.

Just go to package.json and replace webpack-dev-server with webpack with --watch param, they work almost the same. Difference is that webpack --watch will create a actual bundled file and will place it in directory you specified in config.

This doesnt work

  "scripts": {
    "build": "webpack-dev-server --hot --history-api-fallback --open",
    "app": " ./node_modules/electron/dist/Electron.app/Contents/MacOS/Electron ."
  },

Below works

  "scripts": {
    "build": "webpack --watch",
    "app": " ./node_modules/electron/dist/Electron.app/Contents/MacOS/Electron ."
  },