[WIP] Prerender user pages with Vercel prerender functions

Author: VasylMarchuk

.gitignore

@@ -8,6 +8,10 @@
 # dependencies
 /node_modules/
 
+# dependencies & dist inside vercel-functions
+/vercel-functions/**/node_modules/
+/vercel-functions/**/dist/
+
 # misc
 /.env
 /.pnp*

app/config/environment.d.ts

@@ -14,6 +14,7 @@ declare const config: {
     helpscoutBeaconId: string;
     isCI: boolean;
     metaTagImagesBaseURL: string;
+    metaTagUserProfilePictureBaseURL: string;
     stripePublishableKey: string;
     version: string;
   };

app/routes/user.ts

@@ -3,8 +3,10 @@ import type RouterService from '@ember/routing/router-service';
 import { inject as service } from '@ember/service';
 import type UserModel from 'codecrafters-frontend/models/user';
 import type AuthenticatorService from 'codecrafters-frontend/services/authenticator';
+import type MetaDataService from 'codecrafters-frontend/services/meta-data';
 import BaseRoute from 'codecrafters-frontend/utils/base-route';
 import RouteInfoMetadata, { HelpscoutBeaconVisibility } from 'codecrafters-frontend/utils/route-info-metadata';
+import config from 'codecrafters-frontend/config/environment';
 
 export type ModelType = UserModel | undefined;
 
@@ -13,23 +15,65 @@ export default class UserRoute extends BaseRoute {
   @service declare authenticator: AuthenticatorService;
   @service declare router: RouterService;
   @service declare store: Store;
+  @service declare metaData: MetaDataService;
+
+  previousMetaImageUrl: string | undefined;
+  previousMetaTitle: string | undefined;
+  previousMetaDescription: string | undefined;
 
   afterModel(model: ModelType): void {
     if (!model) {
       this.router.transitionTo('not-found');
+
+      return;
     }
+
+    this.previousMetaImageUrl = this.metaData.imageUrl;
+    this.previousMetaTitle = this.metaData.title;
+    this.previousMetaDescription = this.metaData.description;
+
+    this.metaData.imageUrl = `${config.x.metaTagUserProfilePictureBaseURL}${model.username}`;
+    this.metaData.title = `${model.username}'s CodeCrafters Profile`;
+    this.metaData.description = `View ${model.username}'s profile on CodeCrafters`;
   }
 
   buildRouteInfoMetadata() {
     return new RouteInfoMetadata({ beaconVisibility: HelpscoutBeaconVisibility.Hidden });
   }
 
-  async model(params: { username: string }): Promise<ModelType> {
-    const users = (await this.store.query('user', {
-      username: params.username,
-      include: 'course-participations.language,course-participations.course.stages,course-participations.current-stage,profile-events',
-    })) as unknown as UserModel[];
+  deactivate() {
+    this.metaData.imageUrl = this.previousMetaImageUrl;
+    this.metaData.title = this.previousMetaTitle;
+    this.metaData.description = this.previousMetaDescription;
+  }
+
+  async #fetchUserRecord(username: string) {
+    return (
+      (await this.store.query('user', {
+        username,
+        include: 'course-participations.language,course-participations.course.stages,course-participations.current-stage,profile-events',
+      })) as unknown as UserModel[]
+    )[0];
+  }
+
+  #findCachedUserRecord(username: string) {
+    return this.store.peekAll('user').find((u) => u.username === username);
+  }
+
+  async model({ username }: { username: string }): Promise<ModelType> {
+    // Look up the record in the store, in case it's already there,
+    // for example, inserted via FastBoot Shoebox
+    const existingRecord = this.#findCachedUserRecord(username);
+
+    if (existingRecord) {
+      // Trigger a fetch anyway to refresh the data
+      this.#fetchUserRecord(username);
+
+      // Return existing record, otherwise the page will blink after loading
+      return existingRecord;
+    }
 
-    return users[0];
+    // If the record doesn't exist - fetch it and return
+    return this.#fetchUserRecord(username);
   }
 }

app/templates/user.hbs

@@ -1,3 +1,5 @@
+{{page-title (concat this.model.username "'s Profile")}}
+
 {{! Looks like a tailwind 3.3.0 bug, from-0% and to-100% are required to make the gradient work }}
 <div class="bg-gradient-to-b from-0% to-100% from-gray-600 to-gray-800 h-56 w-full">
 </div>

config/environment.js

@@ -44,6 +44,7 @@ module.exports = function (environment) {
       helpscoutBeaconId: process.env.HELPSCOUT_BEACON_ID || 'bb089ae9-a4ae-4114-8f7a-b660f6310158',
       isCI: false, // Overridden in test environment
       metaTagImagesBaseURL: 'https://codecrafters.io/images/app_og/',
+      metaTagUserProfilePictureBaseURL: 'https://og.codecrafters.io/api/user_profile/',
       stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
       vercelAnalyticsId: process.env.VERCEL_ANALYTICS_ID,
 

middleware.js

@@ -21,7 +21,7 @@ import { replaceAllMetaTags } from './app/utils/replace-meta-tag';
 export const config = {
   // Limit the middleware to run only for user profile and concept routes
   // RegExp syntax uses rules from pillarjs/path-to-regexp
-  matcher: ['/users/:path*', '/concepts/:path*', '/contests/:path*'],
+  matcher: ['/concepts/:path*', '/contests/:path*'],
 };
 
 const contestDetailsMap = {
@@ -57,12 +57,11 @@ function getContestDetails(slug) {
 
 export default async function middleware(request) {
   // Parse the users or concepts path match result from the request URL
-  const usersPathMatchResult = request.url.match(/\/users\/([^/?]+)/);
   const conceptsPathMatchResult = request.url.match(/\/concepts\/([^/?]+)/);
   const contestsPathMatchResult = request.url.match(/\/contests\/([^/?]+)/);
 
   // Skip the request if username or concept slug is missing
-  if (!usersPathMatchResult && !conceptsPathMatchResult && !contestsPathMatchResult) {
+  if (!conceptsPathMatchResult && !contestsPathMatchResult) {
     // Log an error to the console
     console.error('Unable to parse username or concept slug from the URL:', request.url);
 
@@ -74,14 +73,7 @@ export default async function middleware(request) {
   let pageTitle;
   let pageDescription;
 
-  if (usersPathMatchResult) {
-    const username = usersPathMatchResult[1];
-
-    // Generate a proper OG Image URL for the username's Profile
-    pageImageUrl = `https://og.codecrafters.io/api/user_profile/${username}`;
-    pageTitle = `${username}'s CodeCrafters Profile`;
-    pageDescription = `View ${username}'s profile on CodeCrafters`;
-  } else if (conceptsPathMatchResult) {
+  if (conceptsPathMatchResult) {
     const conceptSlug = conceptsPathMatchResult[1];
 
     // Convert the slug('network-protocols') to title('Network Protocols')

package.json

@@ -13,7 +13,11 @@
   "scripts": {
     "tailwind:build": "npx tailwindcss -i ./app/tailwind-input.css -o ./app/styles/tailwind-compiled.css",
     "tailwind:watch": "npx tailwindcss -i ./app/tailwind-input.css -o ./app/styles/tailwind-compiled.css --watch",
-    "build": "npm --version && npm run tailwind:build && ember build --environment=production",
+    "build": "npm run build:versions && npm run tailwind:build && npm run build:ember",
+    "build:versions": "echo \"npm: $(npm --version)\" && ember --version",
+    "build:ember": "ember build --environment=production",
+    "build:vercel:dist": "./scripts/build-vercel-dist.sh",
+    "build:vercel:functions": "./scripts/build-vercel-functions.sh",
     "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
     "lint:css": "stylelint \"**/*.css\"",
     "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",

scripts/build-vercel-dist.sh

@@ -0,0 +1,21 @@
+#! /bin/bash
+
+LOG_FILENAME="build-output.log"
+ERROR_STRING="error"
+
+# Run `npm run build` and capture the output into `build-output.log`
+npm run build > >(tee -a "${LOG_FILENAME}") 2> >(tee -a "${LOG_FILENAME}" >&2)
+if [ $? -ne 0 ]; then
+  echo "Running npm run build failed"
+  exit 1
+fi
+
+# If there are errors in build output log - exit with error status code
+if cat "${LOG_FILENAME}" | grep -qi "${ERROR_STRING}"; then
+  echo "Errors found in the build output"
+  exit 1
+fi
+
+# Exit with success status code
+echo "No errors found in the build output"
+exit 0

scripts/build-vercel-functions.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+VERCEL_FUNCTIONS_SOURCE="vercel-functions"
+VERCEL_FUNCTIONS_DESTINATION="/vercel/output/functions"
+VERCEL_FUNCTION_GLOB="*.func"
+
+DIST_FOLDER_SOURCE="dist"
+DIST_FOLDER_DESTINATION="dist"
+
+REPLACE_META_TAG_UTIL_PATH="app/utils/replace-meta-tag.js"
+
+# Copy vercel functions to output directory
+echo "Copying vercel functions to ${VERCEL_FUNCTIONS_DESTINATION}"
+cp -a "${VERCEL_FUNCTIONS_SOURCE}/" "${VERCEL_FUNCTIONS_DESTINATION}/" || exit 1
+
+# Run post-copying tasks for each function
+find "${VERCEL_FUNCTIONS_DESTINATION}" -type d -name "${VERCEL_FUNCTION_GLOB}" | while read -r FUNCTION_DIR; do
+  echo "Copying dist folder to ${FUNCTION_DIR}"
+  cp -a "${DIST_FOLDER_SOURCE}/" "${FUNCTION_DIR}/${DIST_FOLDER_DESTINATION}/" || exit 1
+
+  echo "Copying replace-meta-tag.js to ${FUNCTION_DIR}"
+  cp -a "${REPLACE_META_TAG_UTIL_PATH}" "${FUNCTION_DIR}/" || exit 1
+
+  echo "Running npm install in ${FUNCTION_DIR}"
+  (cd "${FUNCTION_DIR}" && npm install --no-fund --no-audit) || exit 1
+done
+
+# Exit with success status code
+exit 0

vercel-functions/synchrophasotron9000.func/.vc-config.json

@@ -0,0 +1,8 @@
+{
+  "handler": "index.js",
+  "runtime": "nodejs22.x",
+  "maxDuration": 30,
+  "launcherType": "Nodejs",
+  "shouldAddHelpers": true,
+  "shouldAddSourcemapSupport": true
+}

vercel-functions/synchrophasotron9000.func/index.js

@@ -0,0 +1,50 @@
+import FastBoot from 'fastboot';
+import { replaceAllMetaTags } from './replace-meta-tag.js';
+
+export default async function (request, response) {
+  const { userName } = request.query;
+
+  // Check if userName query parameter is provided
+  if (!userName) {
+    throw new Error('missing "userName" query parameter');
+  }
+
+  // Initialize a FastBoot instance
+  const app = new FastBoot({
+    distPath: 'dist',
+    resilient: false,
+
+    // Customize the sandbox globals
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        AbortController,
+      });
+    },
+
+    maxSandboxQueueSize: 1,
+  });
+
+  // Visit the user profile page
+  const result = await app.visit(`/users/${userName}`);
+
+  // Redirect to 404 page if the status code is not 200
+  if (result._fastbootInfo.response.statusCode !== 200) {
+    response.redirect('/404');
+
+    return;
+  }
+
+  // Get the HTML content of the FastBoot response
+  const html = await result['html'](); // Weird VSCode syntax highlighting issue if written as result.html()
+
+  // Define meta tag values
+  const pageTitle = `${userName}'s CodeCrafters Profile`;
+  const pageImageUrl = `https://og.codecrafters.io/api/user_profile/${userName}`; // TODO: Read `metaTagUserProfilePictureBaseURL` from page config
+  const pageDescription = `View ${userName}'s profile on CodeCrafters`;
+
+  // Replace meta tags in the HTML content
+  const responseText = replaceAllMetaTags(html, pageTitle, pageDescription, pageImageUrl);
+
+  // Send the modified HTML content as the response
+  response.send(responseText);
+}