Allow specifying a 404 page

Author: harmony7

resources/index.js

@@ -1,7 +1,7 @@
 /// <reference types="@fastly/js-compute" />
 
 import { Router } from '@fastly/expressly';
-import { assets, spaFile, autoIndex, autoExt } from './statics';
+import { assets, spaFile, notFoundPageFile, autoIndex, autoExt } from './statics';
 
 const router = new Router();
 
@@ -41,6 +41,16 @@ function getMatchingRequestPath(path) {
   return null;
 }
 
+function requestAcceptsTextHtml(req) {
+  const accept = (req.headers.get('Accept') ?? '')
+    .split(',')
+    .map(x => x.split(';')[0]);
+  if(!accept.includes('text/html') && !accept.includes('*/*') && accept.includes('*')) {
+    return false;
+  }
+  return true;
+}
+
 router.get("*", (req, res) => {
   const assetPath = getMatchingRequestPath(req.urlObj.pathname);
   if(assetPath == null) {
@@ -72,10 +82,7 @@ router.get("*", (req, res) => {
   if(!spaFile) {
     return;
   }
-  const accept = (req.headers.get('Accept') ?? '')
-    .split(',')
-    .map(x => x.split(';')[0]);
-  if(!accept.includes('text/html') && !accept.includes('*/*') && accept.includes('*')) {
+  if(!requestAcceptsTextHtml(req)) {
     return;
   }
 
@@ -90,6 +97,18 @@ router.get("*", (req, res) => {
 });
 
 router.all("*", (req, res) => {
+  if(notFoundPageFile && requestAcceptsTextHtml(req)) {
+    const staticFile = assets[notFoundPageFile];
+    res.send(new Response(staticFile.content, {
+      status: 404,
+      headers: {
+        'Cache-Control': 'no-cache',
+        'Content-Type': 'text/html',
+      }
+    }));
+    return;
+  }
+
   res.send(new Response("404 Not Found", {
     status: 404,
     headers: {

src/build-static.ts

@@ -169,6 +169,19 @@ export async function buildStaticLoader() {
 
   fileContents += `\nexport const spaFile = ${JSON.stringify(spaFile)};\n`;
 
+  let notFoundPageFile: string | false = config.notFoundPage ?? false;
+  if(notFoundPageFile) {
+    console.log(`Application 'not found (404)' file '${notFoundPageFile}'.`);
+    if(!knownAssets[notFoundPageFile] || knownAssets[notFoundPageFile].contentType !== 'text/html') {
+      console.warn(`'${notFoundPageFile}' does not exist or is not of type 'text/html'. Ignoring.`);
+      notFoundPageFile = false;
+    }
+  } else {
+    console.log(`Application specifies no 'not found (404)' page.`);
+  }
+
+  fileContents += `\nexport const notFoundPageFile = ${JSON.stringify(notFoundPageFile)};\n`;
+
   let autoIndex: string | false = config.autoIndex ?? null;
   fileContents += `\nexport const autoIndex = ${JSON.stringify(autoIndex)};\n`;
 

src/index.ts

@@ -59,6 +59,7 @@ const optionDefinitions: OptionDefinition[] = [
   },
 
   { name: 'spa', type: String, },
+  { name: 'not-found-page', type: String, },
   { name: 'name', type: String, },
   { name: 'author', type: String, },
   { name: 'description', type: String, },

src/init-app.ts

@@ -14,6 +14,7 @@ type AppOptions = {
   'public-dir': string | undefined,
   'static-dir': string | undefined,
   spa: string | null | undefined,
+  'not-found-page': string | null | ((options: AppOptions) => string | undefined) | undefined,
   'auto-index': string[] | null | undefined,
   'auto-ext': string[] | null | undefined,
   name: string,
@@ -99,6 +100,9 @@ const defaultOptions: AppOptions = {
   'public-dir': undefined,
   'static-dir': undefined,
   spa: undefined,
+  'not-found-page': (options) => {
+    return options['public-dir'] + '/404.html';
+  },
   'auto-index': [ 'index.html', 'index.htm' ],
   'auto-ext': [ '.html', '.htm' ],
   author: '[email protected]',
@@ -154,10 +158,13 @@ export function initApp(commandLineValues: CommandLineOptions) {
   options = {
     ...options,
     ...pickKeys(['author', 'name', 'description'], packageJson ?? {}),
-    ...pickKeys(['public-dir', 'static-dir', 'spa', 'auto-index', 'auto-ext', 'author', 'name', 'description'], commandLineValues)
+    ...pickKeys(['public-dir', 'static-dir', 'spa', 'not-found-page', 'auto-index', 'auto-ext', 'author', 'name', 'description'], commandLineValues)
   };
 
-  console.log('options', options);
+  if(typeof options['not-found-page'] === 'function') {
+    // Apply function for this one
+    options['not-found-page'] = options['not-found-page'](options);
+  }
 
   if(check != null) {
     if(!check(packageJson, options)) {
@@ -180,6 +187,7 @@ export function initApp(commandLineValues: CommandLineOptions) {
   const buildStaticDir = BUILD_STATIC_DIR != null ? path.resolve(BUILD_STATIC_DIR) : null;
 
   const spa = options['spa'] as string | null | undefined;
+  const notFoundPage = options['not-found-page'] as string | null | undefined;
 
   const autoIndex = options['auto-index'] as string[] | null | undefined;
   const autoExt = options['auto-ext'] as string[] | null | undefined;
@@ -204,6 +212,26 @@ export function initApp(commandLineValues: CommandLineOptions) {
     }
   }
 
+  let notFoundPageFilename = notFoundPage;
+
+  // Specifically check for null instead of undefined
+  if(notFoundPage === null) {
+    notFoundPageFilename = path.resolve(publicDir, './404.html');
+    let rel = path.relative(path.resolve(), notFoundPageFilename);
+    if(!rel.startsWith('..')) {
+      rel = './' + rel;
+    }
+    console.log('--not-found-page provided with no value, assuming ' + rel);
+  }
+
+  if(notFoundPageFilename != null) {
+    notFoundPageFilename = path.resolve(notFoundPageFilename);
+    if(!notFoundPageFilename.startsWith(publicDir)) {
+      console.error(`❌ --not-found-page file '${notFoundPageFilename}' not inside public directory!`);
+      process.exit(1);
+    }
+  }
+
   const exists = fs.existsSync(computeJsDir);
   if(exists) {
     console.error(`❌ '${COMPUTE_JS_DIR}' directory already exists!`);
@@ -219,10 +247,16 @@ export function initApp(commandLineValues: CommandLineOptions) {
     spaRel = './' + spaRel;
   }
 
+  let notFoundRel: string | null = notFoundPageFilename != null ? path.relative(path.resolve(), notFoundPageFilename) : null;
+  if(notFoundRel != null && !notFoundRel.startsWith('..')) {
+    notFoundRel = './' + notFoundRel;
+  }
+
   console.log('');
   console.log('Public Dir  :', PUBLIC_DIR);
   console.log('Static Dir  :', BUILD_STATIC_DIR ?? '(None)');
   console.log('SPA         :', spaRel != null ? spaRel : '(None)');
+  console.log('404 Page    :', notFoundRel != null ? notFoundRel : '(None)');
   console.log('Auto-Index  :', autoIndex != null ? autoIndex : '(None)')
   console.log('Auto-Ext    :', autoExt != null ? autoExt : '(None)')
   console.log('name        :', name);
@@ -320,13 +354,19 @@ service_id = ""
     spaFileRel = '/' + path.relative(publicDir, spaFilename);
   }
 
+  let notFoundFileRel: string | false = false;
+  if(notFoundPageFilename != null) {
+    notFoundFileRel = '/' + path.relative(publicDir, notFoundPageFilename);
+  }
+
   const staticPublishJsContent = `\
 module.exports = {
   publicDir: ${JSON.stringify(publicDirRel)},
   excludeDirs: [ './node_modules' ],
   includeDirs: [ './.well-known' ],
   staticDirs: ${JSON.stringify(staticDirsRel)},
   spa: ${JSON.stringify(spaFileRel)},
+  notFoundPage: ${JSON.stringify(notFoundFileRel)},
   autoIndex: ${JSON.stringify(autoIndex)},
   autoExt: ${JSON.stringify(autoExt)},
 };`;