Hot module reload notes for electron

HMR-notes.md

Notes on HMR

• Build electron using it's own babel config (using env)

{
  "electron-main": {
    "presets": [
      ["es2015"],
      "react"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
  }

• Build webpack-dev-sever using it's own babel config (using env)
  • Note: Disable modules on this build, let webpack handle it"

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-object-rest-spread"
  ]
}

• Utilize Webpacks module system to handle hot-swaps

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

import Root from './containers/Root';

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root'),
  );
};

render(Root);

if (module.hot) {
  module.hot.accept('./containers/Root', () => { render(Root); });
}