feat(build): split build and ssr in two

mdn · Apr 25, 2024 · d6e8dd6 · d6e8dd6
1 parent 81ec2a7
commit d6e8dd6
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 77 deletions.
diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
@@ -159,6 +159,9 @@ jobs:
           # Generate sitemap index file
           yarn build --sitemap-index
 
+          # SSR all pages
+          yarn ssr
+
           # Generate whatsdeployed files.
           yarn tool whatsdeployed --output client/build/_whatsdeployed/code.json
           yarn tool whatsdeployed $CONTENT_ROOT --output client/build/_whatsdeployed/content.json

diff --git a/.github/workflows/stage-build.yml b/.github/workflows/stage-build.yml
@@ -306,6 +306,9 @@ jobs:
           # Build the curriculum
           yarn build:curriculum
 
+          # SSR all pages
+          yarn ssr
+
           # Generate whatsdeployed files.
           yarn tool whatsdeployed --output client/build/_whatsdeployed/code.json
           yarn tool whatsdeployed $CONTENT_ROOT --output client/build/_whatsdeployed/content.json

diff --git a/.github/workflows/xyz-build.yml b/.github/workflows/xyz-build.yml
@@ -190,6 +190,9 @@ jobs:
           # Build the curriculum
           yarn build:curriculum
 
+          # SSR all pages
+          yarn ssr
+
           # Generate whatsdeployed files.
           yarn tool whatsdeployed --output client/build/_whatsdeployed/code.json
           yarn tool whatsdeployed $CONTENT_ROOT --output client/build/_whatsdeployed/content.json

diff --git a/build/blog.ts b/build/blog.ts
@@ -18,9 +18,6 @@ import {
   AuthorFrontmatter,
   AuthorMetadata,
 } from "../libs/types/blog.js";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { renderHTML } from "../ssr/dist/main.js";
 import {
   findPostFileBySlug,
   injectLoadingLazyAttributes,
@@ -242,21 +239,22 @@ export async function buildBlogIndex(options: { verbose?: boolean }) {
   const hyData = {
     posts: await allPostFrontmatter(),
   };
-  const context = { hyData, pageTitle: "MDN Blog" };
+  const context = {
+    hyData,
+    pageTitle: "MDN Blog",
+    url: `/${locale}/${prefix}/`,
+  };
 
-  const html = renderHTML(`/${locale}/${prefix}/`, context);
   const outPath = path.join(BUILD_OUT_ROOT, locale.toLowerCase(), `${prefix}`);
 
   await fs.mkdir(outPath, { recursive: true });
-  const filePath = path.join(outPath, "index.html");
   const jsonFilePath = path.join(outPath, "index.json");
 
   await fs.mkdir(outPath, { recursive: true });
-  await fs.writeFile(filePath, html);
   await fs.writeFile(jsonFilePath, JSON.stringify(context));
 
   if (options.verbose) {
-    console.log("Wrote", filePath);
+    console.log("Wrote", jsonFilePath);
   }
 }
 
@@ -279,8 +277,8 @@ export async function buildBlogPosts(options: {
       continue;
     }
 
-    const url = `/${locale}/blog/${blogMeta.slug}/`;
-    const renderUrl = `/${locale}/blog/${blogMeta.slug}`;
+    const url = `/${locale}/${prefix}/${blogMeta.slug}/`;
+    const renderUrl = `/${locale}/${prefix}/${blogMeta.slug}`;
     const renderDoc: BlogPostDoc = {
       url: renderUrl,
       rawBody: body,
@@ -302,6 +300,7 @@ export async function buildBlogPosts(options: {
       locale,
       noIndexing: options.noIndexing,
       image: blogMeta.image?.file && `${BASE_URL}${url}${blogMeta.image?.file}`,
+      url,
     };
 
     const outPath = path.join(
@@ -329,17 +328,13 @@ export async function buildBlogPosts(options: {
       await fs.copyFile(from, to);
     }
 
-    const html = renderHTML(`/${locale}/${prefix}/${blogMeta.slug}/`, context);
-
-    const filePath = path.join(outPath, "index.html");
     const jsonFilePath = path.join(outPath, "index.json");
 
     await fs.mkdir(outPath, { recursive: true });
-    await fs.writeFile(filePath, html);
     await fs.writeFile(jsonFilePath, JSON.stringify(context));
 
     if (options.verbose) {
-      console.log("Wrote", filePath);
+      console.log("Wrote", jsonFilePath);
     }
   }
 }

diff --git a/build/cli.ts b/build/cli.ts
@@ -19,7 +19,6 @@ import {
 import { DEFAULT_LOCALE, VALID_LOCALES } from "../libs/constants/index.js";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { renderHTML } from "../ssr/dist/main.js";
 import options from "./build-options.js";
 import {
   buildDocument,
@@ -32,6 +31,7 @@ import { makeSitemapXML, makeSitemapIndexXML } from "./sitemaps.js";
 import { humanFileSize } from "./utils.js";
 import { initSentry } from "./sentry.js";
 import { macroRenderTimes } from "../kumascript/src/render.js";
+import { ssrAllDocuments } from "./ssr.js";
 
 const { program } = caporal;
 const { prompt } = inquirer;
@@ -129,7 +129,6 @@ async function buildDocuments(
   files: string[] = null,
   quiet = false,
   interactive = false,
-  noHTML = false,
   locales: Map<string, string> = new Map()
 ): Promise<BuiltDocuments> {
   // If a list of files was set, it came from the CLI.
@@ -230,20 +229,16 @@ async function buildDocuments(
       updateBaselineBuildMetadata(builtDocument);
     }
 
-    if (!noHTML) {
-      fs.writeFileSync(
-        path.join(outPath, "index.html"),
-        renderHTML(document.url, { doc: builtDocument })
-      );
-    }
-
     if (plainHTML) {
       fs.writeFileSync(path.join(outPath, "plain.html"), plainHTML);
     }
 
     // This is exploiting the fact that renderHTML has the side-effect of
     // mutating the built document which makes this not great and refactor-worthy.
-    const docString = JSON.stringify({ doc: builtDocument });
+    const docString = JSON.stringify({
+      doc: builtDocument,
+      url: builtDocument.mdn_url,
+    });
     fs.writeFileSync(path.join(outPath, "index.json"), docString);
     fs.writeFileSync(
       path.join(outPath, "contributors.txt"),
@@ -446,7 +441,6 @@ interface BuildArgsAndOptions {
   options: {
     quiet?: boolean;
     interactive?: boolean;
-    nohtml?: boolean;
     locale?: string[];
     notLocale?: string[];
     sitemapIndex?: boolean;
@@ -459,12 +453,10 @@ if (SENTRY_DSN_BUILD) {
 
 program
   .name("build")
+  .command("build", "build content")
   .option("-i, --interactive", "Ask what to do when encountering flaws", {
     default: false,
   })
-  .option("-n, --nohtml", "Do not build index.html", {
-    default: false,
-  })
   .option("-l, --locale <locale...>", "Filtered specific locales", {
     default: [],
     validator: [...VALID_LOCALES.keys()],
@@ -567,7 +559,6 @@ program
         files,
         Boolean(options.quiet),
         Boolean(options.interactive),
-        Boolean(options.nohtml),
         locales
       );
       const t1 = new Date();
@@ -607,6 +598,10 @@ program
     }
   });
 
+program.command("render", "render all documents").action(async () => {
+  await ssrAllDocuments();
+});
+
 program.run();
 function compareBigInt(a: bigint, b: bigint): number {
   if (a < b) {

diff --git a/build/curriculum.ts b/build/curriculum.ts
@@ -37,7 +37,6 @@ import { HydrationData } from "../libs/types/hydration.js";
 import { memoize, slugToFolder } from "../content/utils.js";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { renderHTML } from "../ssr/dist/main.js";
 import { CheerioAPI } from "cheerio";
 
 export const allFiles = memoize(async () => {
@@ -367,6 +366,7 @@ export async function buildCurriculum(options: {
       pageTitle: meta.title,
       locale,
       noIndexing: options.noIndexing,
+      url: `/${locale}/${meta.slug}/`,
     };
 
     const outPath = path.join(
@@ -377,17 +377,13 @@ export async function buildCurriculum(options: {
 
     await fs.mkdir(outPath, { recursive: true });
 
-    const html: string = renderHTML(`/${locale}/${meta.slug}/`, context);
-
-    const filePath = path.join(outPath, "index.html");
     const jsonFilePath = path.join(outPath, "index.json");
 
     await fs.mkdir(outPath, { recursive: true });
-    await fs.writeFile(filePath, html);
     await fs.writeFile(jsonFilePath, JSON.stringify(context));
 
     if (options.verbose) {
-      console.log("Wrote", filePath);
+      console.log("Wrote", jsonFilePath);
     }
   }
 }

diff --git a/build/spas.ts b/build/spas.ts
@@ -22,9 +22,6 @@ import {
 } from "../libs/env/index.js";
 import { isValidLocale } from "../libs/locale-utils/index.js";
 import { DocFrontmatter, DocParent, NewsItem } from "../libs/types/document.js";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { renderHTML } from "../ssr/dist/main.js";
 import { getSlugByBlogPostUrl, splitSections } from "./utils.js";
 import { findByURL } from "../content/document.js";
 import { buildDocument } from "./index.js";
@@ -73,26 +70,23 @@ async function buildContributorSpotlight(
       usernames: frontMatter.attributes.usernames,
       quote: frontMatter.attributes.quote,
     };
-    const context = { hyData };
+    const context = { hyData, url: `/${locale}/${prefix}/${contributor}` };
 
-    const html = renderHTML(`/${locale}/${prefix}/${contributor}`, context);
     const outPath = path.join(
       BUILD_OUT_ROOT,
       locale.toLowerCase(),
       `${prefix}/${hyData.folderName}`
     );
-    const filePath = path.join(outPath, "index.html");
     const imgFilePath = `${contributorSpotlightRoot}/${contributor}/profile-image.jpg`;
     const imgFileDestPath = path.join(outPath, profileImg);
     const jsonFilePath = path.join(outPath, "index.json");
 
     fs.mkdirSync(outPath, { recursive: true });
-    fs.writeFileSync(filePath, html);
     fs.copyFileSync(imgFilePath, imgFileDestPath);
     fs.writeFileSync(jsonFilePath, JSON.stringify(context));
 
     if (options.verbose) {
-      console.log("Wrote", filePath);
+      console.log("Wrote", jsonFilePath);
     }
     if (frontMatter.attributes.is_featured) {
       return {
@@ -112,17 +106,21 @@ export async function buildSPAs(options: {
 
   // The URL isn't very important as long as it triggers the right route in the <App/>
   const url = `/${DEFAULT_LOCALE}/404.html`;
-  const html = renderHTML(url, { pageNotFound: true });
+  const context = { url, pageNotFound: true };
   const outPath = path.join(
     BUILD_OUT_ROOT,
     DEFAULT_LOCALE.toLowerCase(),
     "_spas"
   );
   fs.mkdirSync(outPath, { recursive: true });
-  fs.writeFileSync(path.join(outPath, path.basename(url)), html);
+  const jsonFilePath = path.join(
+    outPath,
+    path.basename(url).replace(/\.html$/, ".json")
+  );
+  fs.writeFileSync(jsonFilePath, JSON.stringify(context));
   buildCount++;
   if (options.verbose) {
-    console.log("Wrote", path.join(outPath, path.basename(url)));
+    console.log("Wrote", jsonFilePath);
   }
 
   // Basically, this builds one (for example) `search/index.html` for every
@@ -183,16 +181,16 @@ export async function buildSPAs(options: {
           pageTitle,
           locale,
           noIndexing,
+          url,
         };
 
-        const html = renderHTML(url, context);
         const outPath = path.join(BUILD_OUT_ROOT, pathLocale, prefix);
         fs.mkdirSync(outPath, { recursive: true });
-        const filePath = path.join(outPath, "index.html");
-        fs.writeFileSync(filePath, html);
+        const jsonFilePath = path.join(outPath, "index.json");
+        fs.writeFileSync(jsonFilePath, JSON.stringify(context));
         buildCount++;
         if (options.verbose) {
-          console.log("Wrote", filePath);
+          console.log("Wrote", jsonFilePath);
         }
       }
     }
@@ -240,24 +238,22 @@ export async function buildSPAs(options: {
       const context = {
         hyData,
         pageTitle: `${frontMatter.attributes.title || ""} | ${title}`,
+        url,
       };
 
-      const html = renderHTML(url, context);
       const outPath = path.join(
         BUILD_OUT_ROOT,
         locale,
         ...slug.split("/"),
         page
       );
       fs.mkdirSync(outPath, { recursive: true });
-      const filePath = path.join(outPath, "index.html");
-      fs.writeFileSync(filePath, html);
+      const jsonFilePath = path.join(outPath, "index.json");
+      fs.writeFileSync(jsonFilePath, JSON.stringify(context));
       buildCount++;
       if (options.verbose) {
-        console.log("Wrote", filePath);
+        console.log("Wrote", jsonFilePath);
       }
-      const filePathContext = path.join(outPath, "index.json");
-      fs.writeFileSync(filePathContext, JSON.stringify(context));
     }
   }
 
@@ -341,24 +337,15 @@ export async function buildSPAs(options: {
         latestNews,
         featuredArticles,
       };
-      const context = { hyData };
-      const html = renderHTML(url, context);
+      const context = { hyData, url };
       const outPath = path.join(BUILD_OUT_ROOT, localeLC);
       fs.mkdirSync(outPath, { recursive: true });
-      const filePath = path.join(outPath, "index.html");
-      fs.writeFileSync(filePath, html);
-      buildCount++;
-      if (options.verbose) {
-        console.log("Wrote", filePath);
-      }
 
-      // Also, dump the recent pull requests in a file so the data can be gotten
-      // in client-side rendering.
-      const filePathContext = path.join(outPath, "index.json");
-      fs.writeFileSync(filePathContext, JSON.stringify(context));
+      const jsonFilePath = path.join(outPath, "index.json");
+      fs.writeFileSync(jsonFilePath, JSON.stringify(context));
       buildCount++;
       if (options.verbose) {
-        console.log("Wrote", filePathContext);
+        console.log("Wrote", jsonFilePath);
       }
     }
   }