React Fast Refresh

packages/pwa-kit-build/package.json

@@ -112,9 +112,11 @@
   },
   "devDependencies": {
     "@loadable/component": "^5.15.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "internal-lib-build": "^2.0.0-dev",
     "nock": "^13.1.1",
     "pwa-kit-runtime": "^2.0.0-dev",
+    "react-refresh": "^0.11.0",
     "superagent": "^6.1.0",
     "supertest": "^4.0.2"
   },

packages/pwa-kit-build/src/configs/babel/babel-config.js

@@ -37,7 +37,8 @@ const config = {
                 idInterpolationPattern: '[sha512:contenthash:base64:6]',
                 ast: true
             }
-        ]
+        ],
+        require('react-refresh/babel')
     ],
     env: {
         test: {

packages/pwa-kit-build/src/configs/webpack/config.js

@@ -18,6 +18,7 @@ import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'
 import LoadablePlugin from '@loadable/webpack-plugin'
 import SpeedMeasurePlugin from 'speed-measure-webpack-plugin'
 import {createModuleReplacementPlugin, PwaKitConfigPlugin} from './plugins'
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
 
 const projectDir = process.cwd()
 const sdkDir = path.resolve(path.join(__dirname, '..', '..', '..'))
@@ -86,7 +87,7 @@ const baseConfig = (target) => {
                 // Perf/quality trade-off - see https://webpack.js.org/configuration/devtool/#devtool
                 devtool: mode === production ? 'source-map' : 'eval',
                 output: {
-                    publicPath: '',
+                    publicPath: '/mobify/bundle/development/',
                     path: buildDir
                 },
                 resolve: {
@@ -103,7 +104,8 @@ const baseConfig = (target) => {
                         'react-router-dom': findInProjectThenSDK('react-router-dom'),
                         'react-dom': findInProjectThenSDK('react-dom'),
                         'react-helmet': findInProjectThenSDK('react-helmet'),
-                        bluebird: findInProjectThenSDK('bluebird')
+                        bluebird: findInProjectThenSDK('bluebird'),
+                        'webpack-hot-middleware': findInProjectThenSDK('webpack-hot-middleware'),
                     },
                     ...(target === 'web' ? {fallback: {crypto: false}} : {})
                 },
@@ -123,6 +125,8 @@ const baseConfig = (target) => {
                             generateStatsFile: true
                         }),
                     mode === development && new webpack.NoEmitOnErrorsPlugin(),
+                    mode === development && new webpack.HotModuleReplacementPlugin(),
+                    mode === development && new ReactRefreshWebpackPlugin(),
 
                     createModuleReplacementPlugin(projectDir),
 
@@ -215,9 +219,7 @@ const client =
                 ...config,
                 // Must be named "client". See - https://www.npmjs.com/package/webpack-hot-server-middleware#usage
                 name: 'client',
-                entry: {
-                    main: './app/main'
-                },
+                entry: ['./app/main', 'webpack-hot-middleware/client?path=/__mrt/hmr'],
                 plugins: [
                     ...config.plugins,
                     new LoadablePlugin({writeToDisk: true}),

packages/pwa-kit-build/src/ssr/server/build-dev-server.js

@@ -15,6 +15,7 @@ import mimeTypes from 'mime-types'
 import webpack from 'webpack'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotServerMiddleware from 'webpack-hot-server-middleware'
+import webpackHotClientMiddleware from 'webpack-hot-middleware'
 import open from 'open'
 import requireFromString from 'require-from-string'
 import config from '../../configs/webpack/config'
@@ -82,7 +83,15 @@ export const DevServerMixin = {
         // routes must not have our SSR middleware applied to them.
         // But the SSR render function must!
         app.__compiler = webpack(config)
-        app.__devMiddleware = webpackDevMiddleware(app.__compiler, {serverSideRender: true})
+        app.__devMiddleware = webpackDevMiddleware(app.__compiler, {
+            serverSideRender: true
+        })
+        app.__clientHotReloadMiddleware = webpackHotClientMiddleware(
+            app.__compiler.compilers.find((compiler) => compiler.name === 'client'),
+            {
+                path: '/'
+            }
+        )
         app.__webpackReady = () => Boolean(app.__devMiddleware.context.state)
         app.__waitForWebpackReady = () => {
             return new Promise((resolve) => {
@@ -98,6 +107,7 @@ export const DevServerMixin = {
         }
 
         app.use('/mobify/bundle/development', app.__devMiddleware)
+        app.use('/__mrt/hmr', app.__clientHotReloadMiddleware)
 
         app.use('/__mrt/status', (req, res) => {
             return res.json({ready: app.__webpackReady()})