Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
dispatch base to index-server render
Browse files Browse the repository at this point in the history
willybrauner committed Feb 21, 2024
1 parent 15984c7 commit 8358859
Showing 4 changed files with 44 additions and 39 deletions.
4 changes: 2 additions & 2 deletions apps/front/prerender/prerender.ts
Original file line number Diff line number Diff line change
@@ -26,7 +26,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 +36,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() {
13 changes: 8 additions & 5 deletions apps/front/server.js
Original file line number Diff line number Diff line change
@@ -12,10 +12,12 @@ const log = debug("server:server")

const loadEnvVars = loadEnv(process.env.NODE_ENV, process.cwd(), "")
const IS_PROD = process.env.NODE_ENV === "production"
const PORT = process.env.DOCKER_NODE_PORT ?? portFinderSync.getPort(5173)
const BASE = process.env.VITE_APP_BASE || "/"
const BASE = loadEnvVars.VITE_APP_BASE || process.env.VITE_APP_BASE || "/"
const PROTOCOL = loadEnvVars.PROTOCOL ?? "http"
const IS_SSL = PROTOCOL === "https"
const PORT =
(loadEnvVars.DOCKER_NODE_PORT || process.env.DOCKER_NODE_PORT) ??
portFinderSync.getPort(5173)

;(async () => {
/**
@@ -49,11 +51,12 @@ const IS_SSL = PROTOCOL === "https"
logLevel: "info",
server: {
middlewareMode: true,
// @ts-ignore
https: (IS_SSL && { key: KEY, cert: CERT }) || false,
cors: false
},
appType: "custom",
BASE
base: BASE
})
// use vite's connect instance as middleware
app.use(vite.middlewares)
@@ -66,7 +69,7 @@ const IS_SSL = PROTOCOL === "https"
js: [{ tag: "script", attr: { type: "module", src: "/src/index.tsx" } }]
}
// Get react-dom from the render method
const dom = await render(req.originalUrl, devScripts, false)
const dom = await render(req.originalUrl, devScripts, false, BASE)
// Create stream with renderToPipeableStream to support Suspense API
const stream = renderToPipeableStream(dom, {
onShellReady() {
@@ -117,7 +120,7 @@ const IS_SSL = PROTOCOL === "https"
const scriptTags = ManifestParser.getScriptTagFromManifest(manifest, BASE)
// Prepare & stream the DOM
const { render } = await import(`${config.outDirServer}/index-server.js`)
const dom = await render(req.originalUrl, scriptTags, false)
const dom = await render(req.originalUrl, scriptTags, false, BASE)
const stream = renderToPipeableStream(dom, {
onShellReady() {
res.setHeader("Content-type", "text/html")
65 changes: 33 additions & 32 deletions apps/front/src/server/index-server.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ import App from "../components/app/App"
import { languages, showDefaultLangInUrl } from "~/languages"
import { LangService, requestStaticPropsFromRoute, Router } from "@cher-ami/router"
import { GlobalDataContext } from "~/store/GlobalDataContext"
import { loadEnv } from "vite"
import { TScriptsObj } from "../../prerender/helpers/ManifestParser"
import { CherScripts } from "~/server/helpers/CherScripts"
import { RawScript } from "~/server/helpers/RawScript"
@@ -20,15 +19,17 @@ import { preventSlashes } from "~/server/helpers/preventSlashes"
* @param url
* @param isPrerender
* @param scripts
* @param base
*/
// prettier-ignore
export async function render(
url: string,
scripts: TScriptsObj,
isPrerender = false
isPrerender = false,
base: string
): Promise<ReactElement> {

// prepare base & URL
const base = process.env.VITE_APP_BASE || loadEnv("", process.cwd(), "").VITE_APP_BASE
url = preventSlashes(`${isPrerender ? base : ""}${url}`)

// Init lang service
@@ -46,37 +47,37 @@ export async function render(

return (
<html lang={langService.currentLang.key}>
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>{meta?.title || "app"}</title>
<meta name="description" content={meta?.description} />
<link rel="canonical" href={meta?.url || url} />
<ViteDevScripts />
<CherScripts scripts={scripts.css} />
<CherScripts scripts={scripts.woff2} />
</head>
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>{meta?.title || "app"}</title>
<meta name="description" content={meta?.description} />
<link rel="canonical" href={meta?.url || url} />
<ViteDevScripts />
<CherScripts scripts={scripts.css} />
<CherScripts scripts={scripts.woff2} />
</head>

<body>
<div id="root">
<Router
base={base}
routes={routes}
langService={langService}
staticLocation={url}
initialStaticProps={ssrStaticProps}
>
<GlobalDataContext.Provider value={globalData}>
<App />
</GlobalDataContext.Provider>
</Router>
</div>
<body>
<div id="root">
<Router
base={base}
routes={routes}
langService={langService}
staticLocation={url}
initialStaticProps={ssrStaticProps}
>
<GlobalDataContext.Provider value={globalData}>
<App />
</GlobalDataContext.Provider>
</Router>
</div>

<CherScripts scripts={scripts.js} />
<RawScript name={"__SSR_STATIC_PROPS__"} data={ssrStaticProps} />
<RawScript name={"__GLOBAL_DATA__"} data={globalData} />
</body>
<CherScripts scripts={scripts.js} />
<RawScript name={"__SSR_STATIC_PROPS__"} data={ssrStaticProps} />
<RawScript name={"__GLOBAL_DATA__"} data={globalData} />
</body>
</html>
)
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@
"scripts": {
"front:dev": "cd apps/front && npm run dev",
"front:build": "cd apps/front && npm run build",
"front:start": "cd apps/front && npm run start",
"front:test": "cd apps/front && npm run test",
"front:scaffold": "node cli/tasks/scaffold-component/scaffold-component.js",
"back:scaffold-wp": "node cli/tasks/scaffold-wp/scaffold-wp.js",

0 comments on commit 8358859

Please sign in to comment.