cher-ami · willybrauner · Feb 22, 2024 · Feb 8, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <h1 align="center" style="text-align:center">🪜 chersite</h1>
 
 <p align="center">
-chersite is multi apps structure witch include front static-site generator for cher-ami projects
+chersite is multi apps structure witch include a SSG/SSR front framework for cher-ami projects
 
 <br/>
 <br/>

diff --git a/apps/front/README.md b/apps/front/README.md
@@ -11,14 +11,14 @@
 
 ## About
 
-This front app is a React static-site generator build in order to obtain a static server rendering for best performance. It run with [vite](https://vitejs.dev/), [react](https://reactjs.org/),[typescript](https://www.typescriptlang.org/), and [scss](https://sass-lang.com/). The build step prepare a server script, a prerender script and a SPA version to leave choice of use. This one embeds [@cher-ami/router](https://github.com/cher-ami/router) to manage server static props, routes transitions and languages.
+This front app is a React SSG/SSR framework. It run with [vite](https://vitejs.dev/), [react](https://reactjs.org/),[typescript](https://www.typescriptlang.org/), and [scss](https://sass-lang.com/). The build step prepare a server script, a prerender script and a SPA version to leave choice of use. This one embeds [@cher-ami/router](https://github.com/cher-ami/router) to manage server static props, routes transitions and languages.
 
 ## Entry points
 
 Two entry points are set:
 
-- server side [src/server/index-server.tsx](src/server/index-server.tsx)
-- client side [src/index.tsx](src/index.tsx)
+- server side [src/index-server.tsx](src/index-server.tsx)
+- client side [src/index-client.tsx](src/index-client.tsx)
 
 ## Configuration Files
 
@@ -28,10 +28,19 @@ Vite's configuration is managed by two main files:
 - [vite.scripts.config.ts](vite.scripts.config.ts): contains the whole vite scripts config. It built scripts files relative to the SSR and SSG part.
 - [config/config.js](config/config.js): is the internal paths and tasks config file.
 
-## Prerender
+## SSR
 
-The main goal of this app is to generate a static site. The prerender script is used to generate static html files from the server side.
+The app is SSR ready:
 
+```shell
+npm run build && npm run start
+```
+
+## SSG
+
+chersite front allows to generate a static site. The prerender script is used to generate static html files from the server side.
+
+The "prerender" fonction need to know the list of routes to generate as static html files.
 You have to list manually all routes you want to prerender in [prerender/urls.ts](prerender/urls.ts):
 
 ```ts
@@ -50,7 +59,7 @@ return new Promise((resolve) => {
 })
 ```
 
-⚠️ **The front application routing is not dependent to the generated html files, so you can add any route you want in
+⚠️ **The front application routing is not linked to the generated html files, so you can add any route you want in
 this list**. In case you use a backend, you will have to get all routes from a backend API call and add them in this list.
 
 By default, the generate command is executed on build step, but you can run it manually:
@@ -92,6 +101,14 @@ Generate static html files from the server side.
 npm run generate
 ```
 
+### start
+
+Start the production server for SSR
+
+```shell
+npm run start
+```
+
 ## Vite plugins
 
 By default, chersite implement:

diff --git a/apps/front/config/config.js b/apps/front/config/config.js
@@ -18,7 +18,7 @@ export default {
   // Set the relative paths, don't resolve them.
   // This config is used only if the index is not generated by vite
   input: [
-    // "src/index.tsx",
+    // "src/index-client.tsx",
   ],
 
   // Build dotenv outDir array

diff --git a/apps/front/index.html b/apps/front/index.html
@@ -11,6 +11,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="/src/index-client.tsx"></script>
   </body>
 </html>
diff --git a/apps/front/package-lock.json b/apps/front/package-lock.json
diff --git a/apps/front/package.json b/apps/front/package.json
@@ -1,17 +1,18 @@
 {
   "name": "chersite-front",
   "version": "0.1.0",
-  "main": "src/index.tsx",
+  "main": "src/index-client.tsx",
   "type": "module",
   "scripts": {
-    "dev": "node server.js",
-    "build:client": "vite build --outDir dist/client",
-    "build:server": "vite build --ssr src/server/index-server.tsx --outDir dist/server",
+    "dev": "node server.dev.js",
+    "build:client": "vite build --ssrManifest --outDir dist/client",
+    "build:server": "vite build --ssr src/index-server.tsx --outDir dist/server",
     "build:scripts": "vite build -c vite.scripts.config.ts",
-    "build:static": "vite build --outDir dist/static",
-    "build": "npm run build:server && npm run build:scripts && npm run build:static && npm run generate",
+    "build:static": "vite build --outDir dist/static --ssrManifest",
+    "build": "npm run build:server && npm run build:client && npm run build:scripts && npm run build:static",
     "generate": "node dist/_scripts/exe-prerender.js",
     "preview": "serve dist/static",
+    "start": "cross-env NODE_ENV=production node server.prod",
     "test:watch": "vitest",
     "test": "vitest run"
   },
@@ -36,17 +37,19 @@
     "autoprefixer": "^10.4.17",
     "chalk": "^5.3.0",
     "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
     "express": "^4.18.2",
     "husky": "^9.0.10",
     "ip": "^1.1.8",
     "portfinder-sync": "^0.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.70.0",
+    "sirv": "^2.0.4",
     "terser": "^5.27.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vite-plugin-checker": "^0.6.4",
-    "vitest": "^1.2.2",
-    "sass": "^1.70.0"
+    "vitest": "^1.2.2"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.6.1",

diff --git a/apps/front/prerender/prerender.ts b/apps/front/prerender/prerender.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
-import { render } from "~/server/index-server"
+import { render } from "~/index-server"
 import * as mfs from "@cher-ami/mfs"
 import path from "path"
 import chalk from "chalk"
@@ -9,7 +9,6 @@ import { isRouteIndex } from "./helpers/isRouteIndex"
 import { ManifestParser } from "./helpers/ManifestParser"
 import { renderToPipeableStream, renderToString } from "react-dom/server"
 import { JSXElementConstructor, ReactElement } from "react"
-import { htmlReplacement } from "~/server/helpers/htmlReplacement"
 
 /**
  * Prerender
@@ -26,7 +25,7 @@ export const prerender = async (urls: string[], outDirStatic = config.outDirStat
   }
 
   // get script tags to inject in render
-  const base = process.env.VITE_APP_BASE || loadEnv("", process.cwd(), "").VITE_APP_BASE
+  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 scriptTags = ManifestParser.getScriptTagFromManifest(manifest, base)
 
@@ -36,7 +35,7 @@ export const prerender = async (urls: string[], outDirStatic = config.outDirStat
 
     try {
       // Request DOM
-      const dom = await render(url, scriptTags, true)
+      const dom = await render(url, scriptTags, true, base)
       // create stream and generate current file when all DOM is ready
       renderToPipeableStream(dom, {
         onAllReady() {
@@ -73,3 +72,12 @@ const createHtmlFile = async (
   await mfs.createFile(htmlFilePath, htmlReplacement(renderToString(dom)))
   console.log(chalk.green(` → ${htmlFilePath.split("static")[1]}`))
 }
+
+/**
+ * Render string patch middleware
+ */
+const htmlReplacement = (render: string): string =>
+  render
+    .replace("<html", `<!DOCTYPE html><html`)
+    .replaceAll('<script nomodule=""', "<script nomodule")
+    .replaceAll('crossorigin="anonymous"', "crossorigin")