generate temp files

apps/front/config/config.js

@@ -14,6 +14,7 @@ export default {
   outDirSsrClient: resolve("dist/ssr/client"),
   outDirSpa: resolve("dist/spa"),
   outDirStaticClient: resolve("dist/static/client"),
+  outDirStaticClientTemp: resolve("dist/static/_temp"),
   outDirStaticScripts: resolve("dist/static/scripts"),
 
   // Input entry files array

apps/front/package.json

@@ -11,7 +11,7 @@
     "build:ssr-server": "vite build --ssr src/index-server.tsx --outDir dist/ssr/server",
     "build:ssr": "npm run build:ssr-scripts && npm run build:ssr-client && npm run build:ssr-server",
     "build:static-scripts": "vite build -c vite.static-scripts.config.ts",
-    "build:static-client": "vite build --outDir dist/static/client",
+    "build:static-client": "vite build --outDir dist/static/_temp",
     "build:static": "npm run build:static-scripts && npm run build:static-client && npm run generate",
     "generate": "node dist/static/scripts/exe-prerender.js",
     "build": "npm run build:spa && npm run build:ssr && npm run build:static",

apps/front/prerender/exe-prerender-server.ts

@@ -26,7 +26,7 @@ app.get("/generate", async (req, res) => {
 
   // second arg "./static" is matching cher-ami deploy conf
   // need to be edited if we want to start this server locally
-  await prerender(urlsArray, config.outDirStaticClient)
+  await prerender(urlsArray, config.outDirStaticClientTemp)
   res?.send("Generated static pages: " + urlsArray.join(", "))
 })
 

apps/front/prerender/prerender.ts

@@ -18,19 +18,23 @@ import { JSXElementConstructor, ReactElement } from "react"
  */
 export const prerender = async (
   urls: string[],
-  outDirStatic = config.outDirStaticClient
+  outDirStatic = config.outDirStaticClient,
+  outDirStaticTemp = config.outDirStaticClientTemp
 ) => {
-  const indexTemplateSrc = `${outDirStatic}/index-template.html`
+  const indexTemplateSrc = `${outDirStaticTemp}/index-template.html`
 
   // copy index as template to avoid the override with the generated static index.html bellow
   if (!(await mfs.fileExists(indexTemplateSrc))) {
-    await mfs.copyFile(`${outDirStatic}/index.html`, indexTemplateSrc)
+    await mfs.copyFile(`${outDirStaticTemp}/index.html`, indexTemplateSrc)
   }
 
   // get script tags to inject in render
   const base = loadEnv("", process.cwd(), "").VITE_APP_BASE || process.env.VITE_APP_BASE
-  const manifest = (await mfs.readFile(`${outDirStatic}/.vite/manifest.json`)) as string
+  const manifest = (await mfs.readFile(
+    `${outDirStaticTemp}/.vite/manifest.json`
+  )) as string
   const scriptTags = ManifestParser.getScriptTagFromManifest(manifest, base)
+  let errorOnRender = false
 
   // pre-render each route
   for (let url of urls) {
@@ -42,16 +46,25 @@ export const prerender = async (
       // create stream and generate current file when all DOM is ready
       renderToPipeableStream(dom, {
         onAllReady() {
-          createHtmlFile(urls, url, outDirStatic, dom)
+          createHtmlFile(urls, url, outDirStaticTemp, dom)
         },
         onError(x) {
+          errorOnRender = true
           console.error(x)
         }
       })
     } catch (e) {
       console.log(e)
     }
   }
+
+  if (errorOnRender) {
+    console.error(chalk.red("Error on render"))
+    process.exit(1)
+  } else {
+    await mfs.copyDir(outDirStaticTemp, outDirStatic, { force: true })
+    console.log(chalk.green("Copy _temp files to static folder"))
+  }
 }
 
 /**
@@ -71,6 +84,7 @@ const createHtmlFile = async (
   if (isRouteIndex(url, urls)) url = `${url}/index`
   const routePath = path.resolve(`${outDir}/${url}`)
   const htmlFilePath = `${routePath}.html`
+
   // Create file
   await mfs.createFile(htmlFilePath, htmlReplacement(renderToString(dom)))
   console.log(chalk.green(` → ${htmlFilePath.split("static")[1]}`))

apps/front/prerender/urls.ts

@@ -27,7 +27,7 @@ export const fetchAvailableUrls = async (): Promise<string[]> => {
     "/work",
     "/work/first",
     "/work/second",
-    "/404"
+    "/404",
   ])
   })
 }

apps/front/src/components/app/App.tsx

@@ -1,5 +1,5 @@
 import css from "./App.module.scss"
-import React from "react"
+import React, { useEffect } from "react"
 import { Link, Stack, TManageTransitions } from "@cher-ami/router"
 import debug from "@cher-ami/debug"
 import { EPages } from "~/routes"

apps/front/src/routes.ts

@@ -4,10 +4,12 @@ import { TMetaTags } from "~/libs/dom/MetaManager"
 import HomePage from "./pages/homePage/HomePage"
 import WorkPage from "./pages/workPage/WorkPage"
 import NotFoundPage from "./pages/notFoundPage/NotFoundPage"
+import AboutPage from "~/pages/aboutPage/AboutPage"
 
 export enum EPages {
   HOME = "home",
   WORK = "work",
+  ABOUT = "about",
   NOT_FOUND = "not-found"
 }