CODEWITHSUNDEEP
reactjswebpackelectronwebpack-dev-server
Amit Patil
Amit Patil

Reputation: 3067

Reactjs hot reloading with electron

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

Upvotes: 5

Views: 8424

Answers (2)

Amit Patil
Amit Patil

Reputation: 3067

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 ."
  },

Upvotes: 6

Asmaa Almadhoun
Asmaa Almadhoun

Reputation: 299

to run react-hot-loader you should add it in a module in webpack.config.js as the following 

module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ['react-hot-loader/webpack','babel-loader']
      }
    ]
  },

also you shouldh add it in .babelrc as the following :

{
    "presets": [
        "es2015",
        "react"
    ],
    "plugins": [ "react-hot-loader/babel" ]
}

Upvotes: 0

Related Questions