Patterns deployment cache

Dockerfile

@@ -3,15 +3,15 @@ FROM node:19.8.1-alpine as builder
 COPY . /frontend-shared
 RUN cd /frontend-shared && \
     yarn install --frozen-lockfile && \
-    yarn build-pattern-lib
+    NODE_ENV=production yarn build-pattern-lib
 
 
 FROM nginx:1.24.0-alpine
 
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
 # Copy pattern library static assets, and put them in nginx document root folder
 COPY --from=builder /frontend-shared/build /usr/share/nginx/html
-COPY ./templates/index.html /usr/share/nginx/html/index.html
+COPY --from=builder /frontend-shared/templates/index.html /usr/share/nginx/html/index.html
 COPY ./images /usr/share/nginx/html/images
 COPY conf/nginx.conf /etc/nginx/conf.d/default.conf
 

conf/nginx.conf

@@ -10,6 +10,17 @@ server {
         return 200 'Success!';
     }
 
+    # JS and CSS files can be saved for a year, as they include a hash.
+    location ~* \.(?:css|js)$ {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+    # TODO Decide on a sensible cache period for images
+    location ~* \.(?:jpg|gif|png|ico|svg)$ {
+        expires 1M;
+        add_header Cache-Control "public";
+    }
+
     # When requesting static paths with an extension, try them, and return a 404 if not found
     location ~* .+\..+ {
         try_files $uri $uri/ =404;
@@ -18,6 +29,9 @@ server {
     # When requesting a path without extension, try it, and return the index if not found
     # This allows for client-side route handling
     location / {
-        try_files $uri $uri/ /index.html$is_args$args;
+        # The index file references CSS and JS bundles, so we need to make sure it's always up to date
+        # TODO It would also be ok to cache it for a short period of time, like 5 minutes
+        expires -1;
+        try_files $uri $uri/ /index.html;
     }
 }

gulpfile.js

@@ -1,4 +1,5 @@
 import { buildCSS, runTests, watchJS } from '@hypothesis/frontend-build';
+import * as fs from 'fs';
 import gulp from 'gulp';
 
 import { servePatternLibrary } from './scripts/serve-pattern-library.js';
@@ -60,3 +61,29 @@ gulp.task(
     })
   )
 );
+
+gulp.task('update-patterns-index', async () => {
+  // Determine the name of the JS/CSS bundles (in prod they could contain a hash)
+  const jsBundleName = fs
+    .readdirSync('build/scripts')
+    .find(file => file.startsWith('pattern-library'));
+  const cssBundleName = fs
+    .readdirSync('build/styles')
+    .find(file => file.startsWith('pattern-library'));
+
+  if (!jsBundleName || !cssBundleName) {
+    throw new Error(
+      'JS and/or CSS bundles missing. Make sure bundles are generated first'
+    );
+  }
+
+  // Replace references to the generic bundle names with the resolved ones
+  const indexContent = fs
+    .readFileSync('templates/index.html')
+    .toString()
+    .replace('pattern-library.bundle.js', jsBundleName)
+    .replace('pattern-library.css', cssBundleName);
+
+  // eslint-disable-next-line no-undef
+  fs.writeFileSync('templates/index.html', Buffer.from(indexContent));
+});

package.json

@@ -65,7 +65,7 @@
   "scripts": {
     "build-lib": "babel src/ --out-dir lib/ --extensions '.js,.ts,.tsx' --source-maps --ignore '**/test' --ignore '**/karma.config.js'",
     "build": "yarn build-lib && tsc --build src/tsconfig.json",
-    "build-pattern-lib": "yarn gulp bundle-css && yarn rollup -c rollup.config.js",
+    "build-pattern-lib": "yarn gulp bundle-css && yarn rollup -c rollup.config.js && yarn gulp update-patterns-index",
     "typecheck": "tsc --build src/tsconfig.json",
     "lint": "eslint --cache .",
     "checkformatting": "prettier --cache --check '**/*.{js,scss,ts,tsx,md}'",

rollup.config.js

@@ -3,6 +3,9 @@ import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import { string } from 'rollup-plugin-string';
 
+// eslint-disable-next-line no-undef
+const isProd = process.env.NODE_ENV === 'production';
+
 function bundleConfig(name, entryFile) {
   return {
     input: {
@@ -11,8 +14,7 @@ function bundleConfig(name, entryFile) {
     output: {
       dir: 'build/scripts/',
       format: 'es',
-      chunkFileNames: '[name].bundle.js',
-      entryFileNames: '[name].bundle.js',
+      entryFileNames: isProd ? '[name]-[hash].bundle.js' : '[name].bundle.js',
     },
 
     // Suppress a warning (https://rollupjs.org/guide/en/#error-this-is-undefined)