parched-hmr

parched-hmr

Adds support for hot module replacement to parched-tasks-webapp.

Getting Started

You will need to tell parched-tasks-webapp that your bundles have HMR support:

Parched.setup({
  gulp: gulp,

  webapp: {
    bundles: {
      app: {
        hasHMR: true,
      },
    },
  },

  plugins: {
    order: {
      before: [
        'parched-hmr',
      ],
    },
  },
})

Using with React

There are two parts to supporting hot loading with React:

1. Set up the front end

This is a hypothetical app/scripts/index.js:

// This needs to be first
import 'react-hot-loader/patch'
import { AppContainer } from 'react-hot-loader'

ReactDOM.render(
  <AppContainer>
    <App />
  </AppContainer>,
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept()
}

2. Install and configure needed dependencies

This will work with Babel, or TypeScript, or Babel + TypeScript.

npm install --save-dev parched-react-hot-loader

Parched.setup({
  gulp: gulp,

  plugins: {
    order: {
      before: [
        'parched-hmr',
      ],

      after: [
        'parched-react-hot-loader',
      ],
    },
  },
})

Note for Babel users:

I am not sure what this changes, but you can skip parched-react-hot-loader and add react-hot-loader/babel to your Babel plugins.

npm install --save-dev parched-babel babel-preset-react
mv .babelrc .babelrc~

cat <<-EOF > .babelrc
{
  "presets": [
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}
EOF