Use a local HTTP server for Chrome screenshots instead of file:// URLs

After switching to Vue CLI, script/style URLs in generated HTML files are now absolute instead of relative. This is generally a good thing, but it causes issues when trying to view pages with file:// URLs. Starting up a local HTTP server just makes everything easier here.

package.json

@@ -23,6 +23,7 @@
     "cron": "^1.2.1",
     "delay": "^2.0.0",
     "dotenv": "^4.0.0",
+    "ecstatic": "^3.2.1",
     "he": "^1.1.1",
     "json-stable-stringify": "^1.0.1",
     "jsonpath": "^1.0.0",

src/app/screenshots/screenshots.js

@@ -1,19 +1,31 @@
 const path = require('path');
 const { URL } = require('url');
+const http = require('http');
+const ecstatic = require('ecstatic');
 const puppeteer = require('puppeteer');
 
-const htmlPath = path.resolve('./dist/screenshots.html');
-const htmlUrl = new URL('file://'+htmlPath);
 const viewport = {
     width: 1012, // Twitter's in-stream image width is 506px, 506*2 = 1012
     height: 600,
 };
 
+function startHttpServer() {
+    return new Promise((resolve, reject) => {
+        const handler = ecstatic({ root: './dist' });
+        const server = http.createServer(handler);
+        server.on('listening', () => resolve(server));
+        server.listen();
+    });
+}
+
 async function captureScreenshot(options) {
+    // Create an HTTP server
+    const server = await startHttpServer();
+    const { port } = server.address();
+
     // Launch a new Chrome instance
     const browser = await puppeteer.launch({
         args: [
-            '--disable-web-security', // This allows us to retrieve file:// URLs via JS
             '--no-sandbox', // Allow running as root inside the Docker container
         ],
         // headless: false, // For testing
@@ -25,60 +37,57 @@ async function captureScreenshot(options) {
     page.setViewport(thisViewport);
 
     // Navigate to the URL
-    await page.goto(options.url, {
+    let url = new URL(`http://localhost:${port}/screenshots.html`);
+    url.hash = options.hash;
+    await page.goto(url, {
         waitUntil: 'networkidle0', // Wait until the network is idle
     });
 
     // Take the screenshot
     let result = await page.screenshot();
 
-    // Close the browser
+    // Close the browser and HTTP server
     await browser.close();
+    server.close();
 
     return result;
 }
 
 function captureScheduleScreenshot(startTime) {
-    let url = new URL(htmlUrl);
-    url.hash = `/schedules/${startTime}`;
+    let hash = `/schedules/${startTime}`;
 
-    return captureScreenshot({ url });
+    return captureScreenshot({ hash });
 }
 
 function captureGearScreenshot(startTime, endTime) {
-    let url = new URL(htmlUrl);
-    url.hash = `/splatNetGear/${startTime}/${endTime}`;
+    let hash = `/splatNetGear/${startTime}/${endTime}`;
 
-    return captureScreenshot({ url, viewport: { height: 700 } });
+    return captureScreenshot({ hash, viewport: { height: 700 } });
 }
 
 function captureSalmonRunScreenshot(startTime) {
-    let url = new URL(htmlUrl);
-    url.hash = `/salmonRun/${startTime}`;
+    let hash = `/salmonRun/${startTime}`;
 
-    return captureScreenshot({ url });
+    return captureScreenshot({ hash });
 }
 
 function captureSalmonRunGearScreenshot(startTime) {
-    let url = new URL(htmlUrl);
-    url.hash = `/salmonRunGear/${startTime}`;
+    let hash = `/salmonRunGear/${startTime}`;
 
-    return captureScreenshot({ url });
+    return captureScreenshot({ hash });
 }
 
 function captureNewWeaponScreenshot(releaseTime) {
-    let url = new URL(htmlUrl);
-    url.hash = `/newWeapon/${releaseTime}`;
+    let hash = `/newWeapon/${releaseTime}`;
 
-    return captureScreenshot({ url });
+    return captureScreenshot({ hash });
 }
 
 function captureSplatfestScreenshot(region, startTime, regions) {
-    let url = new URL(htmlUrl);
     regions = regions.join(',');
-    url.hash = `/splatfest/${region}/${startTime}?regions=${regions}`;
+    let hash = `/splatfest/${region}/${startTime}?regions=${regions}`;
 
-    return captureScreenshot({ url });
+    return captureScreenshot({ hash });
 }
 
 module.exports = {

yarn.lock

@@ -2656,6 +2656,15 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+ecstatic@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-3.2.1.tgz#1196a74d63d71d28dea807ed2b6183062671a206"
+  dependencies:
+    he "^1.1.1"
+    mime "^1.6.0"
+    minimist "^1.1.0"
+    url-join "^2.0.5"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -5022,7 +5031,7 @@ mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
 
-mime@^1.3.4:
+mime@^1.3.4, mime@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
 
@@ -7854,6 +7863,10 @@ urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
 
+url-join@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+
 url-join@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.0.tgz#4d3340e807d3773bda9991f8305acdcc2a665d2a"