Changing server.js to server.jsx

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@aleleba/create-react-ssr",
-      "version": "2.0.4",
+      "version": "2.0.5",
       "license": "MIT",
       "dependencies": {
         "@babel/register": "^7.17.7",
@@ -52,6 +52,7 @@
         "@types/node": "^17.0.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
+        "@types/webpack": "^5.28.0",
         "@types/webpack-hot-middleware": "^2.25.6",
         "@types/webpack-node-externals": "^2.5.3",
         "@typescript-eslint/eslint-plugin": "^5.25.0",
@@ -3566,6 +3567,17 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "node_modules/@types/webpack": {
+      "version": "5.28.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.0.tgz",
+      "integrity": "sha512-8cP0CzcxUiFuA9xGJkfeVpqmWTk9nx6CWwamRGCj95ph1SmlRRk9KlCZ6avhCbZd4L68LvYT6l1kpdEnQXrF8w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "tapable": "^2.2.0",
+        "webpack": "^5"
+      }
+    },
     "node_modules/@types/webpack-hot-middleware": {
       "version": "2.25.6",
       "resolved": "https://registry.npmjs.org/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.25.6.tgz",
@@ -18165,6 +18177,17 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
+    "@types/webpack": {
+      "version": "5.28.0",
+      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.0.tgz",
+      "integrity": "sha512-8cP0CzcxUiFuA9xGJkfeVpqmWTk9nx6CWwamRGCj95ph1SmlRRk9KlCZ6avhCbZd4L68LvYT6l1kpdEnQXrF8w==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "tapable": "^2.2.0",
+        "webpack": "^5"
+      }
+    },
     "@types/webpack-hot-middleware": {
       "version": "2.25.6",
       "resolved": "https://registry.npmjs.org/@types/webpack-hot-middleware/-/webpack-hot-middleware-2.25.6.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Starter Kit of server side render of react",
   "bin": "./bin/cli.js",
   "main": "src/server/index",
@@ -68,6 +68,7 @@
     "@types/node": "^17.0.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
+    "@types/webpack": "^5.28.0",
     "@types/webpack-hot-middleware": "^2.25.6",
     "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^5.25.0",

src/@types/express/index.d.ts

@@ -0,0 +1,9 @@
+import * as express from "express"
+
+declare global {
+	namespace Express {
+	  interface Request {
+		hashManifest?: Record<string,any>
+	  }
+	}
+}

src/server/server.tsx

@@ -31,10 +31,11 @@ const routesUrls = routes.map( route => route.path);
 const app = express();
 
 if(env === 'development'){
+	// @ts-ignore:next-line
 	const compiler = webpack(webpackConfig);
 	const serverConfig = { 
 		serverSideRender: true,
-		publicPath: webpackConfig.output.publicPath,
+		publicPath: webpackConfig.output?.publicPath,
 	};
 
 	app
@@ -101,6 +102,7 @@ const renderApp = (req, res, next) => {
 		const store = setStore({ initialState });
 		const preloadedState = store.getState();
 		const html = renderToString(
+			// @ts-ignore:next-line
 			<Provider store={store}>
 				<StaticRouter location={req.url}>
 					<App />
@@ -116,7 +118,6 @@ app
 	.get('*', renderApp);
 
 
-app.listen(port, (err) => {
+app.listen(port, () => {
-	if(err) console.error(err);
+	console.log(`Server running on port ${port}`);
-	else console.log(`Server running on port ${port}`);
 });

tsconfig.json

@@ -19,6 +19,7 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "isolatedModules": false,
+    "typeRoots" : ["./src/@types", "./node_modules/@types"],
     "types": [
       "react/next", 
       "react-dom/next", 

webpack.config.dev.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import * as dotenv from 'dotenv';
-import webpack, {Configuration} from 'webpack';
+import webpack, { Configuration } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';