React does not have hot/live reload, how to set it up? - reactjs

Question

I recently joined a company that works with react (classes) and typescript, I was flabbergasted when I knew that the react they are using does not hot/live reload on changes (CSS, state, or any change), what happens on changes is webpack recompiles (takes around 25 seconds) and to see changes I should reload the page which is slowing down the development experience greatly.
Talking to the manager it was decided that we do a migration to a new create react app gradually as there is lots of code and redundancy and we want to use functional react hooks (which will take years maybe as the app is big) but until then I want to resolve the hot reload issue.
I believe the react app a long time ago was not started with creat-react-app or something.
Just to mention I have 1.5 yrs experience in the industry so config stuff is still new to me and am just doing this for my learning benefits and to improve the team experience, it's not really an assigned task to do.
Below are our package.json, webpack file, and index file. Please let me know if you need to see anything else.
Package.json:
{
"name": "web-front-end",
"version": "1.22.19",
"description": "HTML5 implementation of the <our company name>. Written in Typescript, compiled to JavaScript, bundled with Webpack, executing on NodeJS, using React, adopting FLUX patterns.",
"private": true,
"scripts": {
"babel": "babel built/client/js/client.js -o built/client/js/client.js",
"clean": "rm -rf node_modules && rm -rf built && rm -rf coverage && echo 'clean complete'",
"reset": "yarn clean && yarn cache clean && yarn install --frozen-lockfile",
"compile": "yarn compile-client && yarn compile-server && yarn babel",
"debug-client": "NODE_ENV=debug webpack --config webpack.dev.js && echo 'client compile complete'",
"compile-client": "NODE_ENV=production webpack --config webpack.prod.js && echo 'production client compile complete'",
"compile-client-dev": "NODE_ENV=development webpack --config webpack.dev.js && echo 'development client compile complete'",
"compile-client-dev-watch": "NODE_ENV=development webpack --config webpack.dev-watch.js",
"compile-server": "tsc -p src/server && echo 'server compile complete'",
"compile-client-watch": "NODE_ENV=development webpack --config webpack.dev-watch.js",
"compile-server-watch": "tsc -p src/server --watch",
"validate": "yarn --ignore-engines && tslint './src/**/*.{ts,tsx}' './test/**/*.{ts,tsx}' && echo 'validate complete'",
"start-server": "node ./built/server/ServerApp.js",
"test": "tslint --project test && tslint --project src/app && tsc -p test --jsx react && node ./node_modules/jest/bin/jest.js --config=jest.test.config.json --coverage --verbose",
"lint-fix": "tslint --fix --project src && tslint --fix --project test",
"prepare": "patch-package"
},
"dependencies": {
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.8.4",
"#mui/styles": "^5.8.4",
"#stripe/stripe-js": "1.11.0",
"assert": "^2.0.0",
"axios": "^0.27.2",
"blob-stream": "0.1.3",
"buffer": "^6.0.3",
"compression": "1.7.3",
"compression-webpack-plugin": "^10.0.0",
"connected-react-router": "^6.9.2",
"cors": "2.8.4",
"device-uuid": "1.0.4",
"dotenv": "6.0.0",
"express": "4.16.3",
"file-saver": "^2.0.5",
"html-to-image": "^1.10.8",
"https-browserify": "^1.0.0",
"js-cookie": "2.2.0",
"node-zip": "1.1.1",
"path-to-regexp": "2.4.0",
"pug": "2.0.3",
"query-string": "6.1.0",
"react": "17.0.0",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "^17.0.2",
"react-form-validator-core": "0.4.4",
"react-hook-form": "^7.36.0",
"react-inlinesvg": "2.3.0",
"react-jss": "8.5.1",
"react-lazy-load": "3.0.13",
"react-markdown": "4.0.4",
"react-material-ui-form-validator": "^3.0.1",
"react-player": "1.14.2",
"react-redux": "^7.2.6",
"react-router": "5.2.1",
"react-router-dom": "5.3.0",
"react-share": "2.4.0",
"react-speech-recognition": "^3.10.0",
"react-stripe-elements": "2.0.1",
"react-svgmt": "^1.2.0",
"react-virtualized": "9.22.3",
"react-youtube": "7.9.0",
"recompose": "0.27.1",
"rect": "1.2.1",
"redux": "4.0.0",
"redux-thunk": "2.3.0",
"regenerator-runtime": "^0.13.9",
"shortid": "2.2.15",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"svg-to-pdfkit": "0.1.7",
"url": "^0.11.0",
"utf8": "3.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.8",
"#babel/types": "^7.17.0",
"#types/blob-stream": "0.1.29",
"#types/code": "4.0.4",
"#types/detect-browser": "3.0.0",
"#types/jest": "25.2.3",
"#types/js-cookie": "2.2.1",
"#types/lab": "11.1.0",
"#types/react": "17.0.14",
"#types/react-dom": "17.0.14",
"#types/react-inlinesvg": "1.0.0",
"#types/react-redux": "^7.1.20",
"#types/react-router": "4.4.5",
"#types/react-virtualized": "9.21.18",
"#types/shortid": "0.0.29",
"#types/utf8": "2.1.6",
"awesome-typescript-loader": "3.4.1",
"copy-webpack-plugin": "4.5.1",
"detect-browser": "3.0.1",
"fork-ts-checker-webpack-plugin": "^7.2.13",
"jest": "^27.5.1",
"patch-package": "6.1.2",
"postinstall-postinstall": "2.0.0",
"process": "^0.11.10",
"source-map-loader": "0.2.3",
"source-map-support": "0.4.18",
"ts-jest": "27.1.2",
"ts-loader": "^9.3.1",
"ts-mockito": "2.3.0",
"ts-node": "^10.8.1",
"tslint": "^6.0.1",
"tslint-eslint-rules": "5.4.0",
"tslint-react": "^5.0.0",
"typescript": "4.1.5",
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^4.10.0",
"webpack-merge": "^5.8.0"
},
"resolutions": {
"#types/prop-types": "15.7.5",
"#types/unist": "2.0.0",
"#types/react-transition-group": "2.0.8",
"#types/react": "17.0.14",
"#types/react-dom": "17.0.14"
},
"repository": {
"type": "git",
"url": "our repo link"
},
"author": "our company name",
"license": "MIT",
}
Webpack.common.js:
const path = require("path");
const webpack = require('webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
module.exports = {
entry: "./src/app/Main.ts",
cache: false,
optimization: {
providedExports: true,
usedExports: true,
removeAvailableModules: true,
removeEmptyChunks: true,
mergeDuplicateChunks: true,
chunkIds: 'named',
},
plugins: [
new webpack.ProvidePlugin({process: "process/browser"}),
new ForkTsCheckerWebpackPlugin(
{
typescript: {
configFile: './src/app/tsconfig.json'
}
}),
],
module: {
rules: [
{
test: /\.tsx?$/i,
loader: "ts-loader",
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: 'assets/[hash][ext]',
},
},
],
},
resolve: {
alias: {
core: path.join(__dirname, "src", "core"),
client: path.join(__dirname, "src", "client"),
server: path.join(__dirname, "src", "server"),
'<our company name>-typescript-common': path.resolve(__dirname, 'node_modules/<our company name>-typescript-common/'),
},
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".jsx"],
fallback: {
"util": require.resolve('util'),
"os": false,
"fs": false,
"path": false,
"zlib": false,
"buffer": require.resolve('buffer'),
"http": require.resolve('stream-http'),
"https": require.resolve('https-browserify'),
"url": require.resolve('url'),
"stream": require.resolve('stream-browserify'),
},
},
output: {
path: path.resolve(__dirname, "built"),
filename: "client/js/client.js",
clean: true,
},
};
index.js (called Main.ts on our codebase)
import { render } from 'react-dom';
import { AppWrapper } from './view/App/AppWrapper';
declare var window: any;
class CompanyName {
constructor() {
window.dataLayer = window.dataLayer || [];
window._hsq = window._hsq || [];
const rootHtmlElement = document.body.appendChild(document.createElement('div'));
render(new AppWrapper({
lang: window.appConfig.LANGUAGE,
appConfig: window.appConfig,
startupTimestamp: window.sts}).render(), rootHtmlElement);
}
}
// tslint:disable-next-line:no-unused-expression
new CompanyName();
webpack.dev-watch.js:
const { merge } = require("webpack-merge");
const common = require("./webpack.dev.js");
const path = require('path');
module.exports = merge(common, {
watch: true,
optimization: {
minimize: false,
mangleExports: false,
mangleWasmImports: false
},
watchOptions: {
ignored: [
path.posix.resolve(__dirname, './node_modules'),
path.posix.resolve(__dirname, './rfg'),
path.posix.resolve(__dirname, './patches'),
path.posix.resolve(__dirname, './built'),
],
poll: 1500,
aggregateTimeout: 1000,
},
});
I would be grateful if you provide any explanations, explanatory links or videos in your answers so I can learn more.
Thanks.