chore: upgrade govuk frontend to v5.14 and improve public assets setup

package.json

@@ -8,11 +8,11 @@
     "dev": "npm run copy-assets && nodemon src/backend/server.ts --ignore src/frontend",
     "local": "env $(cat .env-signon-mock|xargs) npm run start",
     "clean-build": "rm -rf dist public && npm run build",
-    "build": "npm run build-frontend && npm run copy-assets && npm run build-app",
+    "build": "npm run copy-assets && npm run build-frontend && npm run build-app",
     "postbuild": "mv dist/src/* dist/ && cp -r src/backend/views dist/backend/views",
     "build-app": "tsc",
     "build-frontend": "webpack",
-    "copy-assets": "cp -r ./node_modules/govuk-frontend/govuk/assets ./public/assets && cp ./node_modules/govuk-frontend/govuk/all.js ./public/assets/all.js && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js ./public/assets/accessible-autocomplete.min.js && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css ./public/assets/aaccessible-autocomplete.min.css && cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map ./public/assets/accessible-autocomplete.min.js.map && cp ./node_modules/govuk-frontend/govuk/all.js.map ./public/assets/all.js.map",
+    "copy-assets": "sh scripts/install-govuk-frontend.sh && sh scripts/install-accessible-autocomplete.sh",
     "test": "jest --watchAll --coverage --verbose --detectOpenHandles",
     "test-ci": "jest --coverage --coverageReporters=json --verbose --detectOpenHandles --colors",
     "lint": "eslint './**/*.{ts,tsx}' --fix",
@@ -51,7 +51,7 @@
     "express-session": "^1.18.2",
     "google-libphonenumber": "^3.2.33",
     "got": "^12.5.0",
-    "govuk-frontend": "^4.7.0",
+    "govuk-frontend": "^5.0.0",
     "ioredis": "^5.3.2",
     "nunjucks": "^3.2.4",
     "passport": "^0.6.0",

scripts/install-accessible-autocomplete.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# CSS
+mkdir -p public/stylesheets
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.css ./public/stylesheets/accessible-autocomplete.min.css
+
+# JS
+mkdir -p public/javascripts
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js ./public/javascripts/accessible-autocomplete.min.js
+cp ./node_modules/accessible-autocomplete/dist/accessible-autocomplete.min.js.map ./public/javascripts/accessible-autocomplete.min.js.map

scripts/install-govuk-frontend.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# CSS
+mkdir -p public/stylesheets
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css public/stylesheets/govuk-frontend.min.css
+
+# Images
+mkdir -p public/assets
+cp -r ./node_modules/govuk-frontend/dist/govuk/assets/images public/assets/images
+
+# Fonts
+mkdir -p public/assets
+cp -r ./node_modules/govuk-frontend/dist/govuk/assets/fonts public/assets/
+
+# Manifest
+mkdir -p public/assets
+cp ./node_modules/govuk-frontend/dist/govuk/assets/manifest.json public/assets
+
+# JS
+mkdir -p ./public/javascripts
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js ./public/javascripts/govuk-frontend.min.js
+cp ./node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js.map ./public/javascripts/govuk-frontend.min.js.map

src/backend/app.ts

@@ -98,7 +98,7 @@ class App {
 
   private initializeRenderEngine() {
     const views = [
-      path.join(__dirname, '../../node_modules/govuk-frontend'),
+      path.join(__dirname, '../../node_modules/govuk-frontend/dist'),
       path.join(__dirname, './views'),
     ]
 

src/backend/views/layouts/main.njk

@@ -27,8 +27,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.2/dist/ag-grid-community.min.js" integrity="sha256-ULzU4/8xnTp9F6pbUw2GByUtsteCMTKi2W0+QNGuzwA=" crossorigin="anonymous"></script>
 
 <!--[if !IE 8]><!-->
-<link href="/main.css" rel="stylesheet" />
-<link href="/assets/aaccessible-autocomplete.min.css" rel="stylesheet">
+<link href="/stylesheets/main.css" rel="stylesheet" />
+<link href="/stylesheets/accessible-autocomplete.min.css" rel="stylesheet">
 <!--<![endif]-->
 
 <!--[if IE 8]>
@@ -95,11 +95,12 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 {% endblock %}
 {% block bodyEnd %}
   {% block scripts %}
-  <script src="/assets/all.js"></script>
-  <script src="/assets/accessible-autocomplete.min.js"></script>
-  <script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
+  <script src="/javascripts/accessible-autocomplete.min.js"></script>
+  <script type="module">
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     window.havePostScriptsRun = false;
-    window.GOVUKFrontend.initAll();
+    initAll()
   </script>
 
     {% block pageScripts %}{% endblock %}

src/backend/views/search.njk

@@ -31,5 +31,5 @@
 {% endblock %}
 
 {% block pageScripts %}
-  <script type="module" src="/main.js"></script>
+  <script type="module" src="/javascripts/main.js"></script>
 {% endblock %}

src/frontend/scss/main.scss

@@ -1,4 +1,4 @@
-@import '../../../node_modules/govuk-frontend/govuk/all';
+@import '~govuk-frontend/dist/govuk/all';
 @import './app-masthead';
 @import './grid.scss';
 
@@ -283,17 +283,6 @@ h2:focus-visible {
     color: $govuk-inverse-button-text-colour;
   }
 
-  // alphagov/govuk_template includes a specific a:link:focus selector
-  // designed to make unvisited links a slightly darker blue when focussed, so
-  // we need to override the text colour for that combination of selectors so
-  // so that unvisited links styled as buttons do not end up with dark blue
-  // text when focussed.
-  @include _govuk-compatibility(govuk_template) {
-    &:link:focus {
-      color: $govuk-inverse-button-text-colour;
-    }
-  }
-
   &:hover {
     background-color: $govuk-inverse-button-hover-colour;
 

webpack.config.js

@@ -36,14 +36,14 @@ module.exports = (env) => ({
     extensions: ['.tsx', '.ts', '.js'],
   },
   output: {
-    filename: '[name].js',
+    filename: 'javascripts/[name].js',
     path: path.resolve(__dirname, 'public'),
   },
   plugins: [
     env?.enableHMR
       ? new webpack.HotModuleReplacementPlugin()
       : new MiniCssExtractPlugin({
-          filename: '[name].css',
+          filename: 'stylesheets/[name].css',
         }),
     new webpack.DefinePlugin({
       buildConfig: {