feat(collect): Make it easy to use with SPA

packages/cli/src/collect/collect.js

@@ -31,6 +31,10 @@ function buildCommand(yargs) {
     staticDistDir: {
       description: 'The build directory where your HTML files to run Lighthouse on are located.',
     },
+    isSinglePageApplication: {
+      description:
+        'If the application is created by Single Page Application, enable redirect to index.html.',
+    },
     chromePath: {
       description: 'The path to the Chrome or Chromium executable to use for collection.',
       default: process.env.CHROME_PATH || ChromeLauncher.getInstallations()[0],
@@ -125,7 +129,7 @@ async function startServerAndDetermineUrls(options) {
   }
 
   const pathToBuildDir = path.resolve(process.cwd(), options.staticDistDir);
-  const server = new FallbackServer(pathToBuildDir);
+  const server = new FallbackServer(pathToBuildDir, options.isSinglePageApplication);
   await server.listen();
   process.stdout.write(`Started a web server on port ${server.port}...\n`);
 

packages/cli/src/collect/fallback-server.js

@@ -13,12 +13,16 @@ const createHttpServer = require('http').createServer;
 class FallbackServer {
   /**
    * @param {string} pathToBuildDir
+   * @param {boolean|undefined} isSinglePageApplication
    */
-  constructor(pathToBuildDir) {
+  constructor(pathToBuildDir, isSinglePageApplication) {
     this._pathToBuildDir = pathToBuildDir;
     this._app = express();
     this._app.use(compression());
     this._app.use('/', express.static(pathToBuildDir));
+    if (isSinglePageApplication) {
+      this._app.use('/*', (req, res) => res.sendFile(pathToBuildDir + '/index.html'));
+    }
     this._port = 0;
     /** @type {undefined|ReturnType<typeof createHttpServer>} */
     this._server = undefined;

packages/cli/test/fallback-server.test.js

@@ -0,0 +1,51 @@
+'use strict';
+/* eslint-env jest */
+const path = require('path');
+const {startFallbackServer} = require('./test-utils.js');
+const request = require('request');
+
+describe('fallbackServer', () => {
+  const fixturesDir = path.join(__dirname, 'fixtures');
+
+  it('should "/" request result without isSinglePageApplication', async () => {
+    const server = await startFallbackServer(fixturesDir, false);
+    const body = await new Promise(resolve => {
+      request({url: `http://localhost:${server.port}`}, (error, response, body) => {
+        resolve(body);
+      });
+    });
+    expect(body.includes('index test page for staticDistDir usage')).toEqual(true);
+  });
+
+  it('should "/"  request result with isSinglePageApplication', async () => {
+    const server = await startFallbackServer(fixturesDir, true);
+    const body = await new Promise(resolve => {
+      request({url: `http://localhost:${server.port}`}, (error, response, body) => {
+        resolve(body);
+      });
+    });
+    expect(body.includes('index test page for staticDistDir usage')).toEqual(true);
+  });
+
+  it('should "/japan" request result without isSinglePageApplication', async () => {
+    const server = await startFallbackServer(fixturesDir, false);
+
+    const body = await new Promise(resolve => {
+      request({url: `http://localhost:${server.port}/japan`}, (error, response, body) => {
+        resolve(body);
+      });
+    });
+
+    expect(body.includes('Cannot GET /japan')).toEqual(true);
+  });
+
+  it('should "/japan"  request result with isSinglePageApplication', async () => {
+    const server = await startFallbackServer(fixturesDir, true);
+    const body = await new Promise(resolve => {
+      request({url: `http://localhost:${server.port}/japan`}, (error, response, body) => {
+        resolve(body);
+      });
+    });
+    expect(body.includes('index test page for staticDistDir usage')).toEqual(true);
+  });
+});

packages/cli/test/test-utils.js

@@ -11,6 +11,7 @@ const path = require('path');
 const rimraf = require('rimraf');
 const {spawn, spawnSync} = require('child_process');
 const testingLibrary = require('@testing-library/dom');
+const FallbackServer = require('../src/collect/fallback-server.js');
 
 const CLI_PATH = path.join(__dirname, '../src/cli.js');
 const UUID_REGEX = /[0-9a-f-]{36}/gi;
@@ -107,6 +108,19 @@ function runCLI(args, overrides = {}) {
   return {stdout, stderr, status, matches: {uuids}};
 }
 
+/**
+ * @param {string} staticDistDir
+ * @param {boolean} isSinglePageApplication
+ * @returns {Promise<FallbackServer>}
+ */
+async function startFallbackServer(staticDistDir, isSinglePageApplication) {
+  const pathToBuildDir = path.resolve(process.cwd(), staticDistDir);
+  const server = new FallbackServer(pathToBuildDir, isSinglePageApplication);
+  await server.listen();
+  process.stdout.write(`Started a web server on port ${server.port}...\n`);
+  return server;
+}
+
 module.exports = {
   CLI_PATH,
   runCLI,
@@ -116,4 +130,5 @@ module.exports = {
   safeDeleteFile,
   withTmpDir,
   cleanStdOutput,
+  startFallbackServer,
 };

types/collect.d.ts

@@ -41,6 +41,7 @@ declare global {
       export interface Options {
         url?: string | string[];
         staticDistDir?: string;
+        isSinglePageApplication?: boolean;
         startServerCommand?: string;
         startServerReadyPattern: string;
         chromePath?: string;