Make site work with the Cloudflare OpenNext adapter

.gitignore

@@ -32,3 +32,11 @@ cache
 tsconfig.tsbuildinfo
 
 dist/
+
+# Ignore the blog-data json that we generate during dev and build
+apps/site/public/blog-data.json
+
+# Ignore worker artifacts
+apps/site/.open-next
+apps/site/.wrangler
+apps/site/.cloudflare/.asset-manifests

apps/site/.cloudflare/node/fs.mjs

@@ -0,0 +1,91 @@
+import fsPromises from 'fs/promises';
+
+import pagesManifest from '../.asset-manifests/pages.mjs';
+import snippetsManifest from '../.asset-manifests/snippets.mjs';
+
+export function readdir(path, options, cb) {
+  const withFileTypes = !!options.withFileTypes;
+
+  if (!withFileTypes) {
+    // TODO: also support withFileTypes false
+    throw new Error('fs#readdir please call readdir with withFileTypes true');
+  }
+
+  const result = findInDirentLikes(path);
+
+  const results =
+    !result || result.type !== 'directory'
+      ? []
+      : result.children.map(c => ({
+          name: c.name,
+          parentPath: c.parentPath,
+          path: c.path,
+          isFile: () => c.type === 'file',
+          isDirectory: () => c.type === 'directory',
+        }));
+
+  cb?.(null, results);
+}
+
+function findInDirentLikes(path) {
+  if (!path.startsWith('/pages') && !path.startsWith('/snippets')) {
+    return null;
+  }
+
+  // remove the leading `/`
+  path = path.slice(1);
+
+  const paths = path.split('/');
+
+  const manifestType = paths.shift();
+
+  const manifest = manifestType === 'pages' ? pagesManifest : snippetsManifest;
+
+  return recursivelyFindInDirentLikes(paths, manifest);
+  function recursivelyFindInDirentLikes(paths, direntLikes) {
+    const [current, ...restOfPaths] = paths;
+    const found = direntLikes.find(item => item.name === current);
+    if (!found) return null;
+    if (restOfPaths.length === 0) return found;
+    if (found.type !== 'directory') return null;
+    return recursivelyFindInDirentLikes(restOfPaths, found.children);
+  }
+}
+
+export function exists(path, cb) {
+  const result = existsImpl(path);
+  cb(result);
+}
+
+export function existsSync(path) {
+  const result = existsImpl(path);
+  return result;
+}
+
+function existsImpl(path) {
+  if (!path.startsWith('/pages') && !path.startsWith('/snippets')) {
+    return false;
+  }
+  return !!findInDirentLikes(path);
+}
+
+export function realpathSync() {
+  return true;
+}
+
+const cloudflareContextSymbol = Symbol.for('__cloudflare-context__');
+
+export function createReadStream(path) {
+  const { env } = global[cloudflareContextSymbol];
+  // Note: we only care about the url's path, the domain is not relevant here
+  const url = new URL(`/${path}`, 'http://0.0.0.0');
+  return env.ASSETS.fetch(url);
+}
+
+export default {
+  readdir,
+  exists,
+  existsSync,
+  realpathSync,
+  promises: fsPromises,
+};

apps/site/.cloudflare/node/fs/promises.mjs

@@ -0,0 +1,25 @@
+const cloudflareContextSymbol = Symbol.for('__cloudflare-context__');
+
+export async function readFile(path) {
+  const { env } = global[cloudflareContextSymbol];
+
+  // Note: we only care about the url's path, the domain is not relevant here
+  const url = new URL(`/${path}`, 'http://0.0.0.0');
+  const response = await env.ASSETS.fetch(url);
+  const text = await response.text();
+  return text;
+}
+
+export async function readdir() {
+  return [];
+}
+
+export async function exists() {
+  return false;
+}
+
+export default {
+  readdir,
+  exists,
+  readFile,
+};

apps/site/.cloudflare/node/readline.ts

@@ -0,0 +1,72 @@
+export function createInterface({ input }: { input: Promise<Response> }) {
+  const resp = input.then(resp => resp.body!.getReader());
+  let closed = false;
+  let closeCallback: (...args: Array<unknown>) => void;
+
+  return {
+    on: (
+      event: 'line' | 'close' | string,
+      callback: (...args: Array<unknown>) => void
+    ) => {
+      if (event !== 'line' && event !== 'close') {
+        throw new Error(
+          `readline interface \`on\`, wrong event provided: ${event}`
+        );
+      }
+
+      if (event === 'line') {
+        const textDecoder = new TextDecoder();
+        let text = '';
+        const lineCallback = (...args: Array<unknown>) => {
+          if (!closed) {
+            callback?.(...args);
+          }
+        };
+
+        const emitLines = (done = false) => {
+          const newLineIdx = text.indexOf('\n');
+          if (newLineIdx === -1) {
+            if (done) {
+              lineCallback(text);
+            }
+            return;
+          }
+          const toEmit = text.slice(0, newLineIdx);
+          lineCallback(toEmit);
+          text = text.slice(newLineIdx + 1);
+          emitLines();
+        };
+
+        const read = () => {
+          resp.then(s => {
+            s.read().then(({ done, value }) => {
+              text += textDecoder.decode(value);
+              emitLines();
+
+              if (!done) {
+                read();
+              } else {
+                closeCallback?.();
+              }
+            });
+          });
+        };
+
+        return read();
+      }
+
+      if (event === 'close') {
+        closeCallback = callback;
+        return;
+      }
+    },
+    close: () => {
+      closed = true;
+      closeCallback?.();
+    },
+  };
+}
+
+export default {
+  createInterface,
+};

apps/site/.cloudflare/prepare-build.mjs

@@ -0,0 +1,57 @@
+//@ts-check
+
+import nodeFs from 'node:fs/promises';
+import nodePath from 'node:path';
+
+await collectAndCopyDirToAssets('./pages');
+await collectAndCopyDirToAssets('./snippets');
+
+/**
+ * @param {string} path
+ * @returns {Promise<void>}
+ */
+async function collectAndCopyDirToAssets(path) {
+  await nodeFs.cp(path, nodePath.join('./.open-next/assets', path), {
+    recursive: true,
+    force: true,
+  });
+
+  const pagesChildren = await collectDirChildren(path);
+  await nodeFs.mkdir('./.cloudflare/.asset-manifests/', { recursive: true });
+  await nodeFs.writeFile(
+    `./.cloudflare/.asset-manifests/${nodePath.basename(path)}.mjs`,
+    `export default ${JSON.stringify(pagesChildren)}`
+  );
+}
+
+/**
+ * @param {string} path
+ * @returns {Promise<DirentLike[]>}
+ */
+async function collectDirChildren(path) {
+  const dirContent = await nodeFs.readdir(path, { withFileTypes: true });
+
+  return Promise.all(
+    dirContent.map(async item => {
+      const base = {
+        name: item.name,
+        parentPath: item.parentPath,
+      };
+      if (item.isFile()) {
+        return { ...base, type: 'file' };
+      } else {
+        const dirInfo = await collectDirChildren(
+          `${item.parentPath}/${item.name}`
+        );
+        return { ...base, type: 'directory', children: dirInfo };
+      }
+    })
+  );
+}
+
+/**
+ * @typedef {{ name: string, parentPath: string } } DirentLikeBase
+ * @typedef {DirentLikeBase & { type: 'file' }} DirentLikeFile
+ * @typedef {DirentLikeBase & { type: 'directory', children: DirentLike[] }} DirentLikeDir
+ * @typedef {DirentLikeFile|DirentLikeDir} DirentLike
+ */

apps/site/layouts/Blog.tsx

@@ -11,15 +11,15 @@ import type { BlogCategory } from '@/types';
 
 import styles from './layouts.module.css';
 
-const getBlogCategory = async (pathname: string) => {
+const getBlogCategory = (pathname: string) => {
   // pathname format can either be: /en/blog/{category}
   // or /en/blog/{category}/page/{page}
   // hence we attempt to interpolate the full /en/blog/{category}/page/{page}
   // and in case of course no page argument is provided we define it to 1
   // note that malformed routes can't happen as they are all statically generated
   const [, , category = 'all', , page = 1] = pathname.split('/');
 
-  const { posts, pagination } = await getBlogData(
+  const { posts, pagination } = getBlogData(
     category as BlogCategory,
     Number(page)
   );
@@ -38,7 +38,7 @@ const BlogLayout: FC = async () => {
       link: `/blog/${category}`,
     }));
 
-  const blogData = await getBlogCategory(pathname);
+  const blogData = getBlogCategory(pathname);
 
   return (
     <>

apps/site/next-data/blogData.ts

@@ -1,38 +1,16 @@
-import {
-  ENABLE_STATIC_EXPORT,
-  IS_DEV_ENV,
-  NEXT_DATA_URL,
-  VERCEL_ENV,
-  VERCEL_REGION,
-} from '@/next.constants.mjs';
 import type { BlogCategory, BlogPostsRSC } from '@/types';
 
-const getBlogData = (
-  cat: BlogCategory,
-  page?: number
-): Promise<BlogPostsRSC> => {
-  const IS_NOT_VERCEL_RUNTIME_ENV =
-    (!IS_DEV_ENV && VERCEL_ENV && !VERCEL_REGION) ||
-    (!IS_DEV_ENV && !VERCEL_ENV);
-
-  // When we're using Static Exports the Next.js Server is not running (during build-time)
-  // hence the self-ingestion APIs will not be available. In this case we want to load
-  // the data directly within the current thread, which will anyways be loaded only once
-  // We use lazy-imports to prevent `provideBlogData` from executing on import
-  if (ENABLE_STATIC_EXPORT || IS_NOT_VERCEL_RUNTIME_ENV) {
-    return import('@/next-data/providers/blogData').then(
-      ({ provideBlogPosts, providePaginatedBlogPosts }) =>
-        page ? providePaginatedBlogPosts(cat, page) : provideBlogPosts(cat)
-    );
-  }
-
-  const fetchURL = `${NEXT_DATA_URL}blog-data/${cat}/${page ?? 0}`;
+import {
+  provideBlogPosts,
+  providePaginatedBlogPosts,
+} from './providers/blogData';
 
-  // This data cannot be cached because it is continuously updated. Caching it would lead to
-  // outdated information being shown to the user.
-  return fetch(fetchURL)
-    .then(response => response.text())
-    .then(JSON.parse);
+const getBlogData = (cat: BlogCategory, page?: number): BlogPostsRSC => {
+  return page && page >= 1
+    ? // This allows us to blindly get all blog posts from a given category
+      // if the page number is 0 or something smaller than 1
+      providePaginatedBlogPosts(cat, page)
+    : provideBlogPosts(cat);
 };
 
 export default getBlogData;