Enable hot reload in dev env.

RedHatInsights · Oct 2, 2024 · a9c8ef4 · a9c8ef4
1 parent e565443
commit a9c8ef4
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 6 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,9 +15,10 @@ module.exports = {
     {
       files: ['**/*.ts', '**/*.tsx', '**/*.js'],
       parser: '@typescript-eslint/parser',
-      plugins: ['@typescript-eslint'],
+      plugins: ['@typescript-eslint', 'react-refresh'],
       extends: ['plugin:@typescript-eslint/recommended'],
       rules: {
+        'react-refresh/only-export-components': 'error',
         'react/react-in-jsx-scope': 'off',
         'react/prop-types': 'off',
         '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true, args: 'after-used' }],

diff --git a/config/rspack.config.js b/config/rspack.config.js
@@ -136,6 +136,7 @@ const commonConfig = ({ dev }) => {
                   react: {
                     runtime: 'automatic',
                     development: !!dev,
+                    refresh: !!dev,
                   },
                 },
               },
@@ -183,7 +184,7 @@ const commonConfig = ({ dev }) => {
       historyApiFallback: {
         index: `${publicPath}index.html`,
       },
-      server: 'spdy',
+      server: 'https',
       port: 1337,
       liveReload: true,
     },

diff --git a/config/rspack.plugins.js b/config/rspack.plugins.js
@@ -3,6 +3,7 @@ const rspack = require('@rspack/core');
 const resolve = require('path').resolve;
 const path = require('path');
 const getDynamicModules = require('./get-dynamic-modules');
+const RefreshPlugin = require('@rspack/plugin-react-refresh');
 
 const deps = require('../package.json').dependencies;
 
@@ -39,6 +40,10 @@ const plugins = (dev = false, beta = false, restricted = false) => {
         { '@unleash/proxy-client-react': { singleton: true, requiredVersion: deps['@unleash/proxy-client-react'] } },
         getDynamicModules(process.cwd()),
       ],
+      ...(dev && {
+        // This is needed to enable hot reload, the runtime chunk of the federated modules must be linked to the main compilation runtime chunk
+        runtime: 'dependOn: "main"',
+      }),
     }),
     ChunkMapper,
     new rspack.HtmlRspackPlugin({
@@ -47,10 +52,6 @@ const plugins = (dev = false, beta = false, restricted = false) => {
       minify: false,
       filename: dev ? 'index.html' : '../index.html',
       base: '/',
-      templateParameters: {
-        dev,
-        pf5styles: `/${beta ? 'beta/' : ''}apps/chrome/js/pf/pf4-v5.css`,
-      },
     }),
     new rspack.HtmlRspackPlugin({
       title: 'Authenticating - Hybrid Cloud Console',
@@ -67,6 +68,7 @@ const plugins = (dev = false, beta = false, restricted = false) => {
     new rspack.DefinePlugin({
       __SENTRY_DEBUG__: false,
     }),
+    ...(dev ? [new RefreshPlugin()] : []),
   ];
 };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "@redhat-cloud-services/types": "^1.0.12",
     "@rspack/cli": "^1.0.8",
     "@rspack/core": "^1.0.8",
+    "@rspack/plugin-react-refresh": "^1.0.0",
     "@simonsmith/cypress-image-snapshot": "^8.1.2",
     "@swc/jest": "^0.2.36",
     "@testing-library/jest-dom": "^5.17.0",
@@ -82,6 +83,7 @@
     "cypress": "^13.12.0",
     "cypress-localstorage-commands": "^2.2.6",
     "eslint": "^8.57.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "glob": "^7.2.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -97,6 +99,7 @@
     "npm-run-all": "^4.1.5",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
+    "react-refresh": "^0.14.2",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.4",
     "resolve-url-loader": "^5.0.0",