PR-536602: updating packages and fixing vendors.css error.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "3.0.51",
+  "version": "3.1.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@aleleba/create-react-ssr",
-      "version": "3.0.51",
+      "version": "3.1.2",
       "license": "MIT",
       "dependencies": {
         "@babel/register": "^7.18.9",
@@ -49,7 +49,7 @@
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^14.4.3",
         "@types/jest": "^28.1.6",
-        "@types/node": "^18.6.5",
+        "@types/node": "^18.7.0",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
         "@types/webpack": "^5.28.0",
@@ -3516,9 +3516,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.6.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.5.tgz",
-      "integrity": "sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw=="
+      "version": "18.7.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.0.tgz",
+      "integrity": "sha512-MbHwEQaMKgcSQE3vFHUvxiN0+k3VpwCbnYCUigQWoKZzdIk2u7ecoCk5Vzb4lwBbKhLd2rCOUUDT35TaONs7Jw=="
     },
     "node_modules/@types/parse5": {
       "version": "6.0.3",
@@ -18081,9 +18081,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.6.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.6.5.tgz",
-      "integrity": "sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw=="
+      "version": "18.7.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.0.tgz",
+      "integrity": "sha512-MbHwEQaMKgcSQE3vFHUvxiN0+k3VpwCbnYCUigQWoKZzdIk2u7ecoCk5Vzb4lwBbKhLd2rCOUUDT35TaONs7Jw=="
     },
     "@types/parse5": {
       "version": "6.0.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleleba/create-react-ssr",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Starter Kit of server side render of react",
   "bin": "./bin/cli.js",  
   "main": "src/server/index",
@@ -68,7 +68,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^28.1.6",
-    "@types/node": "^18.6.5",
+    "@types/node": "^18.7.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/webpack": "^5.28.0",

src/frontend/components/OtherComponent.tsx

@@ -8,7 +8,7 @@ const OtherComponent = () => (
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-            Edit src/frontend/OtherComponent.jsx and save to reload.
+            Edit <code>src/frontend/OtherComponent.jsx</code> and save to reload.
         </p>
         <Link className="App-link" to="/">Initial Component</Link>
       </header>

src/server/getHashManifest.ts

@@ -1,13 +0,0 @@
-import fs from 'fs';
-
-const getHashManifest = () => {
-	try {
-		const baseUrl = __dirname.replace(/\/server(.*)/,'');
-		const fullURL = `${baseUrl}/assets/manifest-hash.json` ;
-		return JSON.parse(fs.readFileSync(fullURL).toString());
-	}catch(err){
-		console.error(err);
-	}
-};
-
-export default getHashManifest;

src/server/server.tsx

@@ -20,7 +20,7 @@ import { Provider } from 'react-redux';
 import setStore from '../frontend/setStore';
 import initialState from '../frontend/reducers/initialState';
 //Get Hashes
-import getHashManifest from './getHashManifest';
+import { getHashManifest, haveVendorsCss } from './utilsServer';
 //App
 import App from '../frontend/components/App';
 
@@ -67,8 +67,8 @@ if(env === 'development'){
 }
 
 const setResponse = (html, preloadedState, manifest) => {
-	const mainStyles = manifest ? manifest['frontend.css'] : 'assets/main/app.css';
-	const vendorStyles = manifest ? manifest['vendors.css'] : '/assets/vendors/app.css';
+	const mainStyles = manifest ? manifest['frontend.css'] : 'assets/main.css';
+	const vendorStyles = manifest ? manifest['vendors.css'] : 'assets/vendors.css';
 	const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js';
 	const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
 	const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : '';
@@ -84,7 +84,7 @@ const setResponse = (html, preloadedState, manifest) => {
 			<meta name="theme-color" content="#000000">
 			${manifestJson}
             <link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
-			<link href="${vendorStyles}" rel="stylesheet" type="text/css"></link>
+			${haveVendorsCss() ? `<link href="${vendorStyles}" rel="stylesheet" type="text/css"></link>` : ''}
             <title>App</title>
         </head>
         <body>

src/server/utilsServer.ts

@@ -0,0 +1,23 @@
+import fs from 'fs';
+
+export const getHashManifest = () => {
+	try {
+		const baseUrl = __dirname.replace(/\/server(.*)/,'');
+		const fullURL = `${baseUrl}/assets/manifest-hash.json` ;
+		return JSON.parse(fs.readFileSync(fullURL).toString());
+	}catch(err){
+		console.error(err);
+	}
+};
+
+export const haveVendorsCss = () => {
+	try {
+		const baseUrl = __dirname.replace(/\/server(.*)/,'');
+		const fullURL = `${baseUrl}/assets/vendors.css` ;
+		fs.readFileSync(fullURL).toString();
+		return true
+	}catch(err){
+		// console.error(err);
+		return false
+	}
+};

webpack.config.dev.ts

@@ -69,7 +69,7 @@ const config: Configuration = {
 		new webpack.HotModuleReplacementPlugin(),
 		new ReactRefreshWebpackPlugin(),
 		new MiniCssExtractPlugin({
-			filename: 'assets/[name]/app.css',
+			filename: 'assets/[name].css',
 		}),
 		new ESLintPlugin(),
 		new webpack.DefinePlugin({

webpack.config.ts

@@ -76,7 +76,7 @@ const frontendConfig = {
 			filename: '[path][base].gz',
 		}),
 		new MiniCssExtractPlugin({
-			filename: 'assets/[name]/app-[fullhash].css',
+			filename: 'assets/[name]-[fullhash].css',
 		}),
 		new WebpackManifestPlugin({
 			fileName: 'assets/manifest-hash.json',