try to fix puppeteer issues on serverless

apps/portfolio/next.config.js

@@ -9,6 +9,8 @@ module.exports = {
       })
     );
 
+    config.externals.push('chrome-aws-lambda');
+
     return config;
   }
 };

apps/portfolio/package.json

@@ -21,13 +21,15 @@
     "@react-three/rapier-addons": "^3.0.1",
     "@vercel/analytics": "^1.0.1",
     "@vercel/edge-config": "^0.2.1",
+    "chrome-aws-lambda": "^10.1.0",
     "classnames": "^2.3.2",
     "database": "workspace:*",
     "graphql": "^16.7.1",
     "graphql-request": "^6.1.0",
     "lodash.clamp": "^4.0.3",
     "next": "^13.4.9",
     "puppeteer": "^20.8.1",
+    "puppeteer-core": "20.8.1",
     "puppeteer-screen-recorder": "^2.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/portfolio/src/app/api/generate-3d-previews/route.ts

@@ -21,7 +21,7 @@ export async function GET(request: NextRequest) {
   } catch (e) {
     return NextResponse.json(
       {
-        body: `ERROR: ${(e as Error).message}`
+        body: `ERROR: ${(e as Error).message}`,
       },
       {
         status: 500,

apps/portfolio/src/browser-automation/generate-3d-previews.ts

@@ -1,13 +1,29 @@
-import puppeteer from 'puppeteer';
-import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
+import chrome from "chrome-aws-lambda";
+import puppeteer from "puppeteer";
+import { PuppeteerScreenRecorder } from "puppeteer-screen-recorder";
 
 // todo: add more pages
-const PAGE_NUMBERS = ['1'] as const;
+const PAGE_NUMBERS = ["1"] as const;
 
-const waitFor = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const waitFor = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
+
+async function getPuppeteerOptions() {
+  // Local development
+  // return {
+  //   headless: false
+  // }
+
+  return {
+    args: chrome.args,
+    executablePath: await chrome.executablePath,
+    headless: chrome.headless,
+  };
+}
 
 async function generate3DPreviews() {
-  const browser = await puppeteer.launch({ headless: true });
+  const options = await getPuppeteerOptions();
+  const browser = await puppeteer.launch(options);
   const page = await browser.newPage();
   const recorder = new PuppeteerScreenRecorder(page, {
     followNewTab: true,
@@ -17,20 +33,22 @@ async function generate3DPreviews() {
       height: 900,
     },
     videoCrf: 24,
-    videoCodec: 'libx264',
-    videoPreset: 'ultrafast',
+    videoCodec: "libx264",
+    videoPreset: "ultrafast",
     videoBitrate: 1000,
     autopad: {
-      color: 'black'
+      color: "black",
     },
-    aspectRatio: '16:9',
+    aspectRatio: "16:9",
   });
 
   // Set screen size
   await page.setViewport({ width: 1200, height: 700 });
 
   for (let pageNumber of PAGE_NUMBERS) {
-    await page.goto(`https://setsun.xyz/visualizers/${pageNumber}`, { waitUntil: 'networkidle0' });
+    await page.goto(`https://setsun.xyz/visualizers/${pageNumber}`, {
+      waitUntil: "networkidle0",
+    });
 
     // Start recording
     const path = `./public/visualizers/${pageNumber}.mp4`;
@@ -44,4 +62,4 @@ async function generate3DPreviews() {
   await browser.close();
 }
 
-export default generate3DPreviews;
+export default generate3DPreviews;