Merge pull request #113 from aleleba/PR-119605

PR-119605: updating packages.

.github/workflows/main-workflow.yml

@@ -22,7 +22,7 @@ jobs:
         node-version: 'lts/*'
         cache: 'npm'
         registry-url: https://registry.npmjs.org/
-    - run: npm ci
+    - run: npm ci --legacy-peer-deps
     - run: npm test
 
   # Job to run Cypress component tests
@@ -34,7 +34,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
       - name: Cypress run
         uses: cypress-io/github-action@v6 # use the explicit version number
         with:
@@ -53,7 +53,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
       - name: Cypress run
         uses: cypress-io/github-action@v6 # use the explicit version number
         with:
@@ -72,7 +72,7 @@ jobs:
         with:
           node-version: 'lts/*'
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
       - run: npm run build
 
   # Job to publish the package to NPM
@@ -86,7 +86,7 @@ jobs:
         with:
           node-version: 'lts/*'
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
       - run: npm publish --access=public
         env:
           NPM_PERSONAL_TOKEN: ${{secrets.npm_token}}

README.md

@@ -6,12 +6,12 @@ It is not a project like create-react-app, create-react-app is used as a starter
 
 Tech(Library or Framework) | Version |
 --- | --- |
-React (Render Library) | 18.3.1
+React (Render Library) | 19.1.0
 Redux (Global State Management) | 5.0.1
-React Router DOM (Routing) | 6.26.2
+React Router DOM (Routing) | 7.6.2
 Jest (Testing) | 29.7.0
-Cypress (E2E Testing) | 13.14.2
-Typescript | 5.6.2
+Cypress (E2E Testing) | 14.4.1
+Typescript | 5.8.3
 
 ## Setup
 To create a new project run in the terminal:

bin/cli.js

@@ -67,7 +67,7 @@ if(!checkedOut) process.exit(-1);
 
 const actualVersion = runCommandWithOutput(`cd ${repoName} && node -p "require('./package.json').version"`).toString().trim();
 
-const installDepsCommand = `cd ${repoName} && npm i`;
+const installDepsCommand = `cd ${repoName} && npm i --legacy-peer-deps`;
 const cleanGitHistoryCommand = `cd ${repoName} && rm -rf .git && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`;
 const cleanGitHistoryCommandWindows = `cd ${repoName} && rmdir .git /s /q && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`;
 const deleteFoldersCommand = `cd ${repoName} && rm -rf .github && rm -rf bin`;

package.json

@@ -1,19 +1,19 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "3.9.33",
+  "version": "3.10.1",
   "description": "Starter Kit of server side render of react",
   "bin": "./bin/cli.js",
   "main": "src/server/index",
   "scripts": {
     "start": "node build/server/app-server.js",
-    "start:dev": "rm -rf build && webpack --mode=development --config webpack.config.dev.server.ts",
-    "start:dev-win": "(if exist build rmdir /s /Q build) && webpack --mode=development --config webpack.config.dev.server.ts",
+    "start:dev": "rm -rf build && webpack --watch --mode=development --config webpack.config.dev.server.ts",
+    "start:dev-win": "(if exist build rmdir /s /Q build) && webpack --watch --mode=development --config webpack.config.dev.server.ts",
     "build": "webpack-cli --config webpack.config.ts",
     "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
     "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
     "test": "jest",
     "test:watch": "jest --watch",
-    "check-updates": "npx npm-check-updates -u && npm i",
+    "check-updates": "npx npm-check-updates -u && npm i --legacy-peer-deps",
     "cy:open": "npx cypress open",
     "cy:run": "cypress run",
     "cy:run-component": "cypress run --headless --component"
@@ -36,7 +36,7 @@
   },
   "homepage": "https://github.com/aleleba/create-react-ssr#readme",
   "dependencies": {
-    "@babel/register": "^7.25.9",
+    "@babel/register": "^7.27.1",
     "dotenv": "^16.5.0",
     "express": "^5.1.0",
     "helmet": "^8.1.0",
@@ -45,11 +45,11 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^9.2.0",
-    "react-router-dom": "^7.5.0",
+    "react-router-dom": "^7.6.2",
     "react-router-hash-link": "^2.4.3",
     "redux": "^5.0.1",
-    "webpack": "^5.99.5",
-    "webpack-dev-server": "^5.2.1",
+    "webpack": "^5.99.9",
+    "webpack-dev-server": "^5.2.2",
     "webpack-manifest-plugin": "^5.0.1",
     "workbox-background-sync": "^7.3.0",
     "workbox-broadcast-update": "^7.3.0",
@@ -65,26 +65,27 @@
     "workbox-streams": "^7.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@cypress/react": "^9.0.1",
-    "@eslint/js": "^9.24.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.16",
+    "@eslint/js": "^9.28.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
     "@redux-devtools/extension": "^3.3.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.14.1",
-    "@types/react": "^19.1.1",
-    "@types/react-dom": "^19.1.2",
+    "@types/node": "^22.15.30",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
     "@types/webpack": "^5.28.5",
     "@types/webpack-hot-middleware": "^2.25.9",
     "@types/webpack-node-externals": "^3.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.29.1",
-    "@typescript-eslint/parser": "^8.29.1",
+    "@typescript-eslint/eslint-plugin": "^8.33.1",
+    "@typescript-eslint/parser": "^8.33.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -92,12 +93,12 @@
     "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
-    "cypress": "^14.3.0",
-    "eslint": "^9.24.0",
+    "cypress": "^14.4.1",
+    "eslint": "^9.28.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-webpack-plugin": "^5.0.0",
+    "eslint-webpack-plugin": "^5.0.1",
     "file-loader": "^6.2.0",
-    "globals": "^16.0.0",
+    "globals": "^16.2.0",
     "html-webpack-plugin": "^5.6.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -107,13 +108,13 @@
     "mini-css-extract-plugin": "^2.9.2",
     "react-refresh": "^0.17.0",
     "resolve-ts-aliases": "^1.0.1",
-    "sass": "^1.86.3",
+    "sass": "^1.89.1",
     "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.14",
-    "ts-jest": "^29.3.1",
+    "ts-jest": "^29.3.4",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.1",
+    "typescript-eslint": "^8.33.1",
     "url-loader": "^4.1.1",
     "webpack-cli": "^6.0.1",
     "webpack-dev-middleware": "^7.4.2",

src/@types/index.d.ts

@@ -2,3 +2,10 @@ declare module '*.svg' {
     const content: any;
     export default content;
 }
+
+declare const module: {
+    hot?: {
+      accept(dep?: string, callback?: () => void): void;
+      dispose(callback: () => void): void;
+    };
+};

src/server/server.tsx

@@ -131,6 +131,19 @@ const renderApp = (req, res, next) => {
 app
 	.get('/{*splat}', renderApp);
 
-app.listen(PORT, () => {
+const server = app.listen(PORT, () => {
 	console.log(`Server running on port ${PORT}`);
 });
+
+// --- HMR Support ---
+if (module.hot) {
+	module.hot.accept();
+	module.hot.dispose(() => {
+		console.log('🔁 [HMR] Disposing backend module...');
+		if (server) {
+			server.close(() => {
+				console.log('🛑 Server closed due to HMR');
+			});
+		}
+	});
+}

webpack.config.dev.server.ts

@@ -3,7 +3,7 @@ import webpackNodeExternals from 'webpack-node-externals';
 import WebpackShellPluginNext from 'webpack-shell-plugin-next';
 import { resolveTsAliases } from 'resolve-ts-aliases';
 import path from 'path';
-import { Configuration } from 'webpack';
+import webpack, { Configuration } from 'webpack';
 const ROOT_DIR = path.resolve(__dirname);
 const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args);
 const BUILD_DIR = resolvePath('build');
@@ -18,7 +18,18 @@ const config: Configuration = {
 	mode: 'development',
 	name: 'server',
 	entry: {
-		server: `${ROOT_DIR}/src/server/index.ts`,
+		server: [
+            'webpack/hot/poll?1000',
+            `${ROOT_DIR}/src/server/index.ts`
+        ],
+	},
+	watchOptions: {
+		ignored: [
+		  '**/src/frontend/**',
+		  '**/public/**',
+		  '**/build/**',
+		  '**/node_modules/**'
+		]
 	},
 	resolve: {
 		extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
@@ -88,8 +99,11 @@ const config: Configuration = {
 		libraryTarget: 'commonjs2',
 	},
 	node: false,
-	externals: [webpackNodeExternals()],
+	externals: [webpackNodeExternals({
+		allowlist: ['webpack/hot/poll?1000']
+	})],
 	plugins: [
+		new webpack.HotModuleReplacementPlugin(),
 		new MiniCssExtractPlugin({
 			filename: 'assets/app.css',
 		}),