Update docs regarding HMR support #1253

^{Originally posted by sanex3339 December 11, 2022}
Hi. I'm not sure, maybe the README is outdated, but it says that this gem does not support HMR when SSR is enabled.
I was able to make it work both for server and client bundles.

What i did:

• added process.env.WEBPACK_SERVE && 'react-refresh/babel' plugin to the babel.config.js file
• used bin/webpack-dev-server file to build bundles + run dev server
• in the webpack config we have the following option for the dev server:

devServer: {
      devMiddleware: {
        publicPath: '/some_project/assets',
        writeToDisk: filename => filename.includes('server_rendering.js')
      },
      host: 'localhost',
      port: appConfig.port,
      https: false,
      hot: true,
      liveReload: false,
      client: { overlay: false },
      allowedHosts: ['localhost'],
      headers: { 'Access-Control-Allow-Origin': '*' }
    }

The important thing is to use writeToDisk and in my case i only save server_rendering.js file to the disk, so the server is able to always read the updated file.

• added the ReactRefreshWebpackPlugin to the webpack config as well

if (Env.isDevelopment) {
  config.plugins.push(
    new ReactRefreshWebpackPlugin({
      overlay: {
        sockPort: DEV_SERVER_PORT
      }
    })
  )
}

• as output.publicPath value for dev environment we use http://localhost:${DEV_SERVER_PORT}/some_project/assets, so all client assets are served by the dev server as well
• we don't use shakepaker config in the babel or webpack configs at all
• in webpacker.yml for dev environment we have:

  # we don't use shakapacker to control webpack-dev-server
  # but react-rails needs this to find server_rendering.js for dev-server build
  dev_server:
    https: false
    host: localhost
    port: SET YOUR DEV SERVER PORT HERE
    hmr: true,
    allowed_hosts: [ 'localhost' ]
    headers:
      'Access-Control-Allow-Origin': '*'
    static:
      watch:
        ignored: '**/node_modules/**'

And this is all, the HMR works, the server renders updated HTML every time when react code is changed.