Fix local development 💚

now.json

@@ -13,7 +13,7 @@
         { "src": "/", "dest": "/public/index.html" },
         { "src": "/favicon.ico", "dest": "/public/favicon.ico" },
         { "src": "/style.css", "dest": "/public/style.css" },
-        { "src": "/browser.js", "dest": "/browser.js" },
+        { "src": "/dist/browser.js", "dest": "/browser.js" },
         { "src": "/(.+)", "dest": "/src/card.ts" }
     ]
 }

public/index.html

@@ -34,7 +34,7 @@
     </div>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dot-dom@0.3.0/dotdom.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/copee@1.0.6/dist/copee.umd.js"></script>
-    <script type="text/javascript" src="browser.js"></script>
+    <script type="text/javascript" src="../dist/browser.js"></script>
 </body>
 
-</html>
+</html>

src/browser.ts

@@ -187,7 +187,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
     } = state;
     const mdValue = md ? '1' : '0';
     const imageOptions = theme === 'light' ? imageLightOptions : imageDarkOptions;
-    const url = new URL(window.location.hostname === 'localhost' ? 'https://og-image.now.sh' : window.location.origin);
+    const url = new URL(window.location.hostname === 'localhost' ? 'http://localhost:13463' : window.location.origin);
     url.pathname = `${encodeURIComponent(text)}.${fileType}`;
     url.searchParams.append('theme', theme);
     url.searchParams.append('md', mdValue);

src/card.ts

@@ -10,17 +10,10 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
     try {
         const parsedReq = parseRequest(req);
         const html = getHtml(parsedReq);
-        
-        if (isDev) {
-            res.setHeader('Content-Type', 'text/html');
-            res.end(html);
-            return;
-        }
-
         const { text, fileType } = parsedReq;
         const filePath = await writeTempFile(text, html);
         const fileUrl = pathToFileURL(filePath);
-        const file = await getScreenshot(fileUrl, fileType);
+        const file = await getScreenshot(fileUrl, fileType, isDev);
         res.statusCode = 200;
         res.setHeader('Content-Type', `image/${fileType}`);
         res.setHeader('Cache-Control', `public, immutable, no-transform, max-age=31536000`);
@@ -38,4 +31,4 @@ if (isDev) {
     const PORT = process.env.PORT || 13463;
     const listen = () => console.log(`Listening on ${PORT}...`);
     createServer(handler).listen(PORT, listen);
-}
+}

src/chromium.ts

@@ -1,25 +1,21 @@
-import * as chromeAws from 'chrome-aws-lambda';
 import { launch, Page } from 'puppeteer-core';
+import { getOptions as getLaunchOptions } from './options';
 let _page: Page | null;
 
-async function getPage() {
+async function getPage(isDev: boolean) {
     if (_page) {
         return _page;
     }
-    const chrome = chromeAws as any;
-    const browser = await launch({
-        args: chrome.args,
-        executablePath: await chrome.executablePath,
-        headless: chrome.headless,
-    });
+    const options = await getLaunchOptions(isDev);
+    const browser = await launch(options);
     _page = await browser.newPage();
     return _page;
 }
 
-export async function getScreenshot(url: string, type: FileType) {
-    const page = await getPage();
+export async function getScreenshot(url: string, type: FileType, isDev: boolean) {
+    const page = await getPage(isDev);
     await page.setViewport({ width: 2048, height: 1170 });
     await page.goto(url);
     const file = await page.screenshot({ type });
     return file;
-}
+}

src/options.ts

@@ -0,0 +1,27 @@
+import * as chromeAws from 'chrome-aws-lambda';
+const chrome = chromeAws as any;
+const exePath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
+
+interface Options {
+    args: string[];
+    executablePath: string;
+    headless: boolean;
+}
+
+export async function getOptions(isDev: boolean) {
+    let options: Options;
+    if (isDev) {
+        options = {
+            args: [],
+            executablePath: exePath,
+            headless: true,
+        };
+    } else {
+        options = {
+            args: chrome.args,
+            executablePath: await chrome.executablePath,
+            headless: chrome.headless,
+        };
+    }
+    return options;
+}