feat: cache files for longer

Cache js forever (contents hash in filename), cache resources for a few days, cache styles only for 10 hours

Author: Troy

package-lock.json

@@ -14,7 +14,7 @@
     "watch:styles": "nodemon -e scss -x \"npm run build:styles\"",
     "build:js": "cd client && webpack --progress --profile --colors",
     "watch:js": "cd client && webpack --progress --profile --colors --watch",
-    "postbuild": "mkdir -p webpage/ && cp -r public/* webpage/",
+    "postbuild": "mkdir -p webpage/ && cp -r public/* webpage/ && node postbuild.mjs",
     "lint": "npx standard ./client",
     "lint:fix": "npx standard --fix ./client",
     "test": "babel-tape-runner client/test/*.js | tap-spec"
@@ -34,6 +34,7 @@
     "redux-thunk": "^2.1.0"
   },
   "devDependencies": {
+    "@types/node": "^25.0.3",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",

package.json

@@ -0,0 +1,28 @@
+/** This file: improves the caching behaviour of the JavaScript bundle file */
+import fs from 'fs'
+import crypto from 'crypto'
+
+// 1. rename webpage/bundle.js to "bundle.{hash}.js"
+const folderToDeploy = 'webpage';
+const bundlePath = `${folderToDeploy}/bundle.js`
+
+const bundleContents = fs.readFileSync(bundlePath, { encoding: 'utf8'})
+
+const shaHash = crypto.hash("SHA-1", bundleContents)
+const shortHash = shaHash.slice(0, 12);
+
+console.log('Adding short SHA hash to the js filename:', shortHash);
+
+const bundleNameWithHash = `bundle.${shortHash}.js`
+
+fs.renameSync(bundlePath, `${folderToDeploy}/${bundleNameWithHash}`)
+console.log(`Renamed ${bundlePath} to ${folderToDeploy}/${bundleNameWithHash}`);
+
+// 2. in webpage/index.html, replace "bundle.js" with the new name
+const indexPath = `${folderToDeploy}/index.html`
+let indexContents = fs.readFileSync(indexPath, { encoding: 'utf8'})
+
+indexContents = indexContents.replace('bundle.js', bundleNameWithHash)
+
+fs.writeFileSync(indexPath, indexContents, { encoding: 'utf8'})
+console.log(`Updated ${indexPath} to reference ${bundleNameWithHash}`);

postbuild.mjs

@@ -0,0 +1,17 @@
+# Prevent other origins from iframeing our app
+/*.html
+  X-Frame-Options: DENY
+
+# Cache hashed asset pathsand sounds (not styles) for ~72 hours
+/bundle.*.js
+  Cache-Control: public, max-age=31536000, immutable
+
+# Cache images and sounds (not styles) for ~72 hours
+/resources/sound/*
+  Cache-Control: public, max-age=260000, must-revalidate
+
+/resources/images/*
+  Cache-Control: public, max-age=260000, must-revalidate
+
+/resources/styles/*
+  Cache-Control: public, max-age=36000, must-revalidate