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' }
    ]
  }
}

Reactjs hot reloading with electron

2 Answers