Hotfix for prod: change way of updating index.html

Author: urwithat

package-lock.json

@@ -36,7 +36,8 @@
     "webpack-dev-server": "^3.9.0",
     "webpack-merge": "^4.2.2",
     "axios": "^0.21.0",
-    "path": "^0.12.7"
+    "path": "^0.12.7",
+    "node-html-parser": "^2.0.0"
   },
   "dependencies": {
     "express": "^4.17.1",

package.json

@@ -5,6 +5,7 @@ const path = require("path");
 const axios = require('axios');
 const fs = require('fs');
 const fsPromises = require('fs').promises;
+const htmlParse = require('node-html-parser');
 const APP_CONST = require('./config/constants');
 
 let distPath = path.resolve(__dirname, "./dist");
@@ -54,25 +55,30 @@ app.get("*", async function (req, res) {
       res.send({'error': { message: "Check application environment", code: 500 }})
       break;
   }
-  if (mfeIndex.indexOf("<!-- Routes Start -->") > -1) {
-    let mfeRoutes
-    switch (process.env.APPENV.toLowerCase()) {
-      case APP_CONST.APP_ENV_DEV.toLowerCase() :
-      case APP_CONST.APP_ENV_PROD.toLowerCase() :
-        mfeRoutes = await axios.get(env_config.mfeRoutesPath)
-        mfeRoutes = mfeRoutes.data
-        break;
-      case APP_CONST.APP_ENV_LOCAL.toLowerCase() :
-      case APP_CONST.APP_ENV_LOCAL_MULTI.toLowerCase() :
-        mfeRoutes = await fsPromises.readFile(path.join(configPath + env_config.mfeRoutesPath))
-        break;
-      default :
-        res.send({'error': { message: "Check application environment", code: 500 }})
-        break;
-    }
-    const mfe = mfeIndex.toString().replace(/<!-- Routes Start -->([\s\S]*?)<!-- Routes End -->/, "<!-- Routes Start -->" + mfeRoutes + "<!-- Routes End -->");
-    await fsPromises.writeFile(path.join(distPath + "/index.html"), mfe);
+  let mfeRoutes
+  switch (process.env.APPENV.toLowerCase()) {
+    case APP_CONST.APP_ENV_DEV.toLowerCase() :
+    case APP_CONST.APP_ENV_PROD.toLowerCase() :
+      mfeRoutes = await axios.get(env_config.mfeRoutesPath)
+      mfeRoutes = mfeRoutes.data
+      break;
+    case APP_CONST.APP_ENV_LOCAL.toLowerCase() :
+    case APP_CONST.APP_ENV_LOCAL_MULTI.toLowerCase() :
+      mfeRoutes = await fsPromises.readFile(path.join(configPath + env_config.mfeRoutesPath))
+      break;
+    default :
+      res.send({'error': { message: "Check application environment", code: 500 }})
+      break;
   }
+  let mfeIndexHtml = htmlParse.parse(mfeIndex)
+  let singleSpaMain = mfeIndexHtml.querySelector('#single-spa-main')
+  singleSpaMain.remove()
+  let singleSpaRouter = mfeIndexHtml.querySelector('single-spa-router')
+  singleSpaRouter.insertAdjacentHTML('beforeend', '<div id="single-spa-main"></div>')
+  singleSpaMain = mfeIndexHtml.querySelector('#single-spa-main')
+  singleSpaMain.insertAdjacentHTML('beforeend', mfeRoutes)
+
+  await fsPromises.writeFile(path.join(distPath + "/index.html"), mfeIndexHtml.toString());
   res.sendFile(path.join(distPath + "/index.html"));
 });
 

server.js

@@ -72,10 +72,7 @@
       <nav>
         <application name="@topcoder/micro-frontends-navbar-app"></application>
       </nav>
-      <div id="single-spa-main">
-        <!-- Routes Start -->
-        <!-- Routes End -->
-      </div>
+      <div id="single-spa-main"></div>
     </single-spa-router>
   </template>
 </head>