Implement discount fingerprinting without webpack (#17337)

JamesMGreene · web-flow · commit 9724f763f54a · 2021-01-19T23:00:54.000-06:00
diff --git a/includes/head.html b/includes/head.html
@@ -23,7 +23,7 @@
     />
   {% endfor %}
 
-  <link rel="stylesheet" href="/dist/index.css">
+  <link rel="stylesheet" href="{{ builtAssets.main.css }}">
   <link rel="alternate icon" type="image/png" href="/assets/images/site/favicon.png">
   <link rel="icon" type="image/svg+xml" href="/assets/images/site/favicon.svg">
 </head>
diff --git a/includes/scripts.html b/includes/scripts.html
@@ -1 +1 @@
-<script src="/dist/index.js"></script>
+<script src="{{ builtAssets.main.js }}"></script>
diff --git a/layouts/dev-toc.html b/layouts/dev-toc.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8" />
 <title>Docs TOC</title>
-<link rel="stylesheet" href="/dist/index.css">
+<link rel="stylesheet" href="{{ builtAssets.main.css }}">
 <link rel="alternate icon" type="image/png" href="/assets/images/site/favicon.png">
 <link rel="icon" type="image/svg+xml" href="/assets/images/site/favicon.svg">
 </head>
diff --git a/lib/built-asset-urls.js b/lib/built-asset-urls.js
@@ -0,0 +1,23 @@
+const fs = require('fs')
+const path = require('path')
+const crypto = require('crypto')
+
+// Get an MD4 Digest Hex content hash, loosely based on Webpack `[contenthash]`
+function getContentHash (absFilePath) {
+  const buffer = fs.readFileSync(absFilePath)
+  const hash = crypto.createHash('md4')
+  hash.update(buffer)
+  return hash.digest('hex')
+}
+
+function getUrl (relFilePath) {
+  const absFilePath = path.join(process.cwd(), relFilePath)
+  return `/${relFilePath}?hash=${getContentHash(absFilePath)}`
+}
+
+module.exports = {
+  main: {
+    js: getUrl('dist/index.js'),
+    css: getUrl('dist/index.css')
+  }
+}
diff --git a/middleware/context.js b/middleware/context.js
@@ -7,6 +7,7 @@ const { getVersionStringFromPath, getProductStringFromPath, getPathWithoutLangua
 const productNames = require('../lib/product-names')
 const warmServer = require('../lib/warm-server')
 const featureFlags = Object.keys(require('../feature-flags'))
+const builtAssets = require('../lib/built-asset-urls')
 
 // Supply all route handlers with a baseline `req.context` object
 // Note that additional middleware in middleware/index.js adds to this context object
@@ -42,5 +43,8 @@ module.exports = async function contextualize (req, res, next) {
   req.context.siteTree = siteTree
   req.context.pages = pageMap
 
+  // JS + CSS asset paths
+  req.context.builtAssets = builtAssets
+
   return next()
 }
diff --git a/tests/rendering/server.js b/tests/rendering/server.js
@@ -4,6 +4,7 @@ const { get, getDOM, head } = require('../helpers/supertest')
 const { describeViaActionsOnly } = require('../helpers/conditional-runs')
 const path = require('path')
 const { loadPages } = require('../../lib/pages')
+const builtAssets = require('../../lib/built-asset-urls')
 
 describe('server', () => {
   jest.setTimeout(60 * 1000)
@@ -694,7 +695,8 @@ describe('?json query param for context debugging', () => {
 
 describe('stylesheets', () => {
   it('compiles and sets the right content-type header', async () => {
-    const res = await get('/dist/index.css')
+    const stylesheetUrl = builtAssets.main.css
+    const res = await get(stylesheetUrl)
     expect(res.statusCode).toBe(200)
     expect(res.headers['content-type']).toBe('text/css; charset=UTF-8')
   })
@@ -703,7 +705,8 @@ describe('stylesheets', () => {
 describe('client-side JavaScript bundle', () => {
   let res
   beforeAll(async (done) => {
-    res = await get('/dist/index.js')
+    const scriptUrl = builtAssets.main.js
+    res = await get(scriptUrl)
     done()
   })
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<script src="/dist/index.js"></script>`
	`1`	`+<script src="{{ builtAssets.main.js }}"></script>`