hof 23.0.0-frontend-v4-beta.15 → 23.0.2-vite-sourcemap-beta

package/CHANGELOG.md

@@ -1,4 +1,15 @@
-## 2025-12-09, Version 23.0.0 (Stable), @Rhodine-orleans-lindsay
+## 2025-12-16, Version 23.0.0 (Stable), @PaolaDMadd-Pro @Rhodine-orleans-lindsay
+### Changed
+- Replaced Browserify with Vite
+  - removed browserify dependencies including in tests
+  - added vite configuration and related tests
+- Updated readme.md
+- Potential **breaking changes**:
+  - Node version required for Vite is `20.19.0 || >=22.12.0`
+  - Updated engine requirements to use node to `>=20.19.0`
+  - Vite uses Rollup in production and requires optional rollup dependencies to be loaded. Setting `--ignore-optional flag`  in Dockerfiles will result in "Module not found" errors in CI/CD or Docker.
+
+## 2025-12-09, Version 22.13.0 (Stable), @Rhodine-orleans-lindsay
 ### Changed
 - Updated cookie banner view to follow GOV.UK design system. Updated cookieSettings.js to allow for different confirmation text based on whether cookies were accepted or rejected
 - Added inputmode='numeric' to date component

package/README.md

@@ -60,7 +60,7 @@ It is recommended to alias `hof-build` to an npm script in your package.json.
 
 ## Tasks
 
-- `browserify` - compiles client-side js with browserify
+- `vite` - compiles client-side js with vite in development and rollup in production. Requires node version `^20.19.0 || >=22.12.0`.
 - `sass` - compiles sass
 - `images` - copies images from ./assets/images directory to ./public/images
 - `translate` - compiles translation files
@@ -69,21 +69,18 @@ Note: For SASS compilation it's possible to additionally configure the following
 - `outputStyle` - Controls whether the CSS output is compressed or not, expanded (default) = non compressed and compressed = compressed CSS output.
 - `quietDeps` - This controls whether you get deprecation warning shown in the console output, if set to false (default) SASS deprecation warnings will be shown in the console, if set to true then deprecation warnings will not be shown in the console output.
 - `sourceMaps` - This controls whether the build will output css sourcemaps to help with debugging. These will be output to the same directory as the css output as a .map file. This option is not currently available in production.
-
-For JavaScript compilation, browserify can be set to debug mode by setting the `debug` option to true. This will cause browserify to output JavaScript sourcemaps as a .js.map file to the same directory as the js bundle.
-
-Debugging example (in hof.settings or your build config)
+For JavaScript compilation, Vite outputs JavaScript sourcemaps as a .js.map file to the same directory as the js bundle.
+You can change sourcemaps' default settings in hof.settings or your build config as follows:
 ```
   "build": {
     "sass": {
       "sourceMaps": true
     },
-    "browserify": {
-      "debug": true
+     "js": {
+      "sourceMaps": true
     }
   }
 ```
-
 ## Watch
 
 You can additionally run a `watch` task to start a server instance, which will automatically restart based on changes to files. This will also re-perform the tasks above when relevant files change.
@@ -109,7 +106,7 @@ hof-build watch --env .envdev
 
 ## Configuration
 
-The default settings will match those for an app generated using [`hof-generator`](https://npmjs.com/hof-generator).
+The default settings will match those for an app generated using [`hof-generator`](https://npmjs.com/hof-generator) (⚠️ This package has been deprecated).
 
 If a `hof.settings.json` file is found in the application root, then the `build` section of the settings file will be used to override [the default configuration](./defaults.js).
 
@@ -119,17 +116,9 @@ Alternatively you can define a path to a local config file by passing a `--confi
 hof-build --config /path/to/my/config.js
 ```
 
-Any task can be disabled by setting its configuration to `false` (or any falsy value).
-
-```js
-module.exports = {
-  browserify: false,
-};
-```
-
 ### Configuration options
 
-Each task has a common configuration format with the following options:
+Each task (except Vite) has a common configuration format with the following options:
 
 - `src` - defines the input file or files for the build task
 - `out` - defines the output location of the built code where relevant

package/build/tasks/images/index.js

@@ -4,7 +4,6 @@
 const fs = require('fs');
 const chalk = require('chalk');
 const spawn = require('../../lib/spawn');
-const mkdir = require('../../lib/mkdir');
 
 module.exports = config => {
   if (!config.images) {
@@ -28,11 +27,11 @@ module.exports = config => {
       console.log(`${chalk.yellow('warning')}: Skipping missing images folder: ${src}`);
       return Promise.resolve();
     }
-    return mkdir(imagesOutput)
-      .then(() => spawn('cp', ['-r', `${src}/.`, imagesOutput]));
+    return spawn('cp', ['-r', `${src}/.`, imagesOutput]);
   }))
     .catch(e => {
       if (e.code !== 'ENOENT') {
+        console.error(`${chalk.red('error')}: Failed to copy images - ${e.message}`);
         throw e;
       } else {
         console.log(`${chalk.yellow('warning')}: no images directory found at ${config.images.src}`);

package/build/tasks/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 module.exports = {
-  browserify: require('./browserify'),
+  vite: require('./vite'),
   sass: require('./sass'),
   translate: require('./translate'),
   images: require('./images')

package/build/tasks/vite/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const vite = require('vite');
+const viteConfig = path.resolve(__dirname, './vite.config.js');
+const hofDefaults = require('../../../config/hof-defaults');
+
+module.exports = config => {
+  process.env.NODE_ENV = hofDefaults.env;
+  fs.writeFileSync(
+    path.resolve(__dirname, './hof-vite-config.json'),
+    JSON.stringify(config, null, 2)
+  );
+  if(!config.production) {
+    return vite.build({
+      configFile: viteConfig,
+      mode: 'development'
+    });
+  }
+  return vite.build({
+    configFile: viteConfig
+  });
+};
+module.exports.task = 'vite';

package/build/tasks/vite/vite.config.js

@@ -0,0 +1,105 @@
+/* eslint-disable no-console */
+'use strict';
+
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import fs from 'fs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+// import hofDefaults from '../../../config/hof-defaults';
+
+let tempConfig = {};
+try {
+  tempConfig = JSON.parse(
+    fs.readFileSync(resolve(__dirname, './hof-vite-config.json'), 'utf8')
+  );
+}catch (e) {
+  console.warn('Could not load hof-vite-config.json. ' + e.message);
+}
+
+const publicDirectory = resolve(process.cwd(), 'public');
+// const config = require('../../../config/builder-defaults.js');
+const entryFile = (() => {
+  const src = resolve(process.cwd(), 'assets/js/index.js');
+  if (fs.existsSync(src)) return src;
+
+  throw new Error(`vite: entry file not found. Checked: ${src}`);
+})();
+
+console.log('5555555555 Vite build -in vite.config.js  file :', tempConfig);
+export default defineConfig({
+  plugins: [
+    commonjs({
+      include: [/node_modules/, /assets\/js/, /frontend/]
+    }),
+    nodeResolve({ browser: true, preferBuiltins: false }),
+    // Intercept all console warnings printed during build
+    // Custom plugin to suppress specific resolve warnings.
+    // Vite does not process and optimise static images and assets files, it uses a src/ folder.
+    // the images and assets folders are therefore loaded at runtime from the public/ folder.
+    // This should be resolved with the v5/nunjucks work so we can ignore these warnings for now.
+    // TODO: Remove this when v5/nunjucks is implemented.
+    {
+      name: 'suppress-resolve-warnings',
+      apply: 'build',
+      configResolved() {
+        const originalWarning = console.warn;
+        console.warn = (...args) => {
+          if (
+            args.some(arg =>
+              typeof arg === 'string' &&
+              arg.includes("didn't resolve at build time")
+            )
+          ) {
+            return; // skip this specific warning
+          }
+          originalWarning(...args);
+        };
+      }
+    },
+    {
+      name: 'delete-hof-vite-config',
+      closeBundle() {
+        const configPath = resolve(__dirname, './hof-vite-config.json');
+        if (fs.existsSync(configPath)) {
+          try {
+            fs.unlinkSync(configPath);
+            console.log('.hof-vite-config.json deleted after build');
+          } catch (err) {
+            console.warn('Failed to delete .hof-vite-config.json:', err);
+          }
+        }
+      }
+    }
+  ],
+  base: '/assets/',
+  publicDir: 'static', // static files copied as-is
+  build: {
+    outDir: publicDirectory,
+    emptyOutDir: false,
+    sourcemap: tempConfig.js && tempConfig.js.sourceMaps,
+    rollupOptions: {
+      input: {
+        index: entryFile
+      },
+      output: {
+        entryFileNames: 'js/bundle.js',
+        chunkFileNames: 'js/[name]-[hash].js',
+        assetFileNames: assetInfo => {
+          const ext = assetInfo.name && assetInfo.name.split('.').pop();
+          if (/css/i.test(ext)) return 'css/[name]-[hash][extname]';
+          if (/svg|png|jpg|jpeg|gif|webp|ico/i.test(ext)) return 'images/[name]-[hash][extname]';
+          return 'assets/[name]-[hash][extname]';
+        },
+        format: 'iife'
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          includes: ['node_modules']
+        }
+      }
+    }
+  }
+});

package/build/tasks/watch/index.js

@@ -125,7 +125,6 @@ module.exports = config => {
         const rootDir = require('path').resolve(__dirname, '../../../');
         ignored.push(`${rootDir}/frontend/govuk-template/govuk_template_generated.html`);
         watchLocation = [rootDir, '.'];
-        process.env.SESSION_SECRET = require('crypto').randomBytes(16).toString('hex');
       }
 
       const watcher = chokidar.watch(watchLocation, { ignored });

package/config/builder-defaults.js

@@ -5,14 +5,6 @@ const toolkitImages =
     : 'node_modules/hof/frontend/toolkit/assets/rebrand/images';
 
 module.exports = {
-  browserify: {
-    src: 'assets/js/index.js',
-    out: 'public/js/bundle.js',
-    match: 'assets/js/**/*.js',
-    restart: false,
-    compress: false,
-    debug: false
-  },
   sass: {
     src: 'assets/scss/app.scss',
     out: 'public/css/app.css',
@@ -22,6 +14,9 @@ module.exports = {
     outputStyle: 'expanded',
     sourceMaps: false
   },
+  js: {
+    sourceMaps: false
+  },
   translate: {
     src: 'apps/**/translations/src',
     match: 'apps/**/translations/src/**/*.json',

package/frontend/govuk-template/build/config.js

@@ -4,6 +4,7 @@ module.exports = {
   htmlLang: '{{htmlLang}}',
   assetPath: '{{govukAssetPath}}',
   assetRebrandPath: '{{govukAssetPath}}rebrand/',
+  themeColour: '#1d70b8',
   afterHeader: '{{$afterHeader}}{{/afterHeader}}',
   bodyClasses: '{{$bodyClasses}}{{/bodyClasses}}',
   bodyStart: '{{$bodyStart}}{{/bodyStart}}',

package/frontend/govuk-template/build/govuk_template.html

@@ -6,15 +6,15 @@
     <meta charset="utf-8" />
     <title>{{ pageTitle }}</title>
     {{{ head }}}
-
-<meta name="theme-color" content="#1d70b8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<link rel="icon" sizes="48x48" href="{{assetRebrandPath}}images/favicon.ico">
-<link rel="icon" sizes="any" href="{{assetRebrandPath}}images/favicon.svg" type="image/svg+xml">
-<link rel="mask-icon" href="{{assetRebrandPath}}images/govuk-icon-mask.svg" color="#1d70b8">
-<link rel="apple-touch-icon" href="{{assetRebrandPath}}images/govuk-icon-180.png">
-<link rel="manifest" href="{{assetRebrandPath}}manifest.json">
-<meta property="og:image" content="{{assetRebrandPath}}images/govuk-opengraph-image.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="{{themeColour}}">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" sizes="48x48" href="{{assetRebrandPath}}images/favicon.ico">
+    <link rel="icon" sizes="any" href="{{assetRebrandPath}}images/favicon.svg" type="image/svg+xml">
+    <link rel="mask-icon" href="{{assetRebrandPath}}images/govuk-icon-mask.svg" color="{{themeColour}}">
+    <link rel="apple-touch-icon" href="{{assetRebrandPath}}images/govuk-icon-180.png">
+    <link rel="manifest" href="{{assetRebrandPath}}manifest.json">
+    <meta property="og:image" content="{{assetRebrandPath}}images/govuk-opengraph-image.png">
   </head>
 
   <body class="{{ bodyClasses }} govuk-template__body  js-enabled" >

package/frontend/govuk-template/govuk_template_generated.html

@@ -6,15 +6,15 @@
     <meta charset="utf-8" />
     <title>{{$pageTitle}}{{/pageTitle}}</title>
     {{$head}}{{/head}}
-
-<meta name="theme-color" content="#1d70b8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<link rel="icon" sizes="48x48" href="{{govukAssetPath}}rebrand/images/favicon.ico">
-<link rel="icon" sizes="any" href="{{govukAssetPath}}rebrand/images/favicon.svg" type="image/svg+xml">
-<link rel="mask-icon" href="{{govukAssetPath}}rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
-<link rel="apple-touch-icon" href="{{govukAssetPath}}rebrand/images/govuk-icon-180.png">
-<link rel="manifest" href="{{govukAssetPath}}rebrand/manifest.json">
-<meta property="og:image" content="{{govukAssetPath}}rebrand/images/govuk-opengraph-image.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#1d70b8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" sizes="48x48" href="{{govukAssetPath}}rebrand/images/favicon.ico">
+    <link rel="icon" sizes="any" href="{{govukAssetPath}}rebrand/images/favicon.svg" type="image/svg+xml">
+    <link rel="mask-icon" href="{{govukAssetPath}}rebrand/images/govuk-icon-mask.svg" color="#1d70b8">
+    <link rel="apple-touch-icon" href="{{govukAssetPath}}rebrand/images/govuk-icon-180.png">
+    <link rel="manifest" href="{{govukAssetPath}}rebrand/manifest.json">
+    <meta property="og:image" content="{{govukAssetPath}}rebrand/images/govuk-opengraph-image.png">
   </head>
 
   <body class="{{$bodyClasses}}{{/bodyClasses}} govuk-template__body  js-enabled" >

package/frontend/template-mixins/mixins/template-mixins.js

@@ -359,7 +359,7 @@ module.exports = function (options) {
         renderWith: inputText,
         options: {
           maxlength: 18,
-          className: 'govuk-input govuk-input--extra-letter-spacing'
+          className: 'govuk-input'
         }
       },
       'input-file': {

package/frontend/template-mixins/partials/forms/checkbox.html

@@ -1,6 +1,6 @@
 <div id="{{key}}-group" class="govuk-form-group {{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
     {{#error}}
-    <p class="govuk-error-message" aria-hidden="true">
+    <p id="{{key}}-error" class="govuk-error-message" aria-hidden="true">
         <span class="govuk-visually-hidden">Error:</span> {{error.message}}
     </p>
     {{/error}}

package/frontend/themes/gov-uk/styles/govuk.scss

@@ -1,7 +1,7 @@
 // App styles
 
 // set the default image directory
-$path: "/public/images/" !default;
+$path: "/images/" !default;
 
 // GOV.UK front end toolkit
 // Sass variables, mixins and functions

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "23.0.0-frontend-v4-beta.15",
+  "version": "23.0.2-vite-sourcemap-beta",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=20.19.0"
   },
   "bin": {
     "hof-build": "./bin/hof-build",
@@ -20,12 +20,12 @@
     "url": "https://github.com/UKHomeOfficeForms/hof/issues"
   },
   "scripts": {
-    "test": "yarn run unit && yarn run test:jest && yarn run test:functional && yarn run test:client && yarn run test:lint",
+    "test": "yarn run unit && yarn run test:jest && yarn run test:functional && yarn run test:vite && yarn run test:lint",
     "unit": "LOG_LEVEL=error nyc _mocha \"test/**/*.spec.js\" \"sandbox/test/**/*.spec.js\"",
     "unit:nocov": "LOG_LEVEL=error mocha \"test/**/*.spec.js\" \"sandbox/test/**/*.spec.js\"",
     "test:lint": "eslint . --config ./node_modules/eslint-config-hof/default.js",
     "test:functional": "funkie mocha ./test/functional-tests --timeout 20000 --exit",
-    "test:client": "karma start test/frontend/toolkit/karma.conf.js",
+    "test:vite": "vitest run --config test/frontend/toolkit/vitest.config.js",
     "test:jest": "jest test/frontend/jest test/integration/index test/utilities/helpers/jest",
     "test:acceptance": "TAGS=\"${TAGS:=@feature}\" yarn run test:cucumber",
     "test:acceptance_browser": "ACCEPTANCE_WITH_BROWSER=true TAGS=\"${TAGS:=@feature}\" yarn run test:cucumber",
@@ -34,11 +34,12 @@
     "postversion": "git push && git push --tags"
   },
   "dependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "aliasify": "^2.1.0",
     "axios": "^1.12.2",
     "bluebird": "^3.7.2",
     "body-parser": "^1.20.3",
-    "browserify": "^17.0.1",
     "callsite": "^1.0.0",
     "chalk": "^2.4.2",
     "chokidar": "^3.6.0",
@@ -51,7 +52,6 @@
     "dialog-polyfill": "^0.5.6",
     "dotenv": "^4.0.0",
     "duplexify": "^3.7.1",
-    "exorcist": "^2.0.0",
     "express": "^4.21.2",
     "express-healthcheck": "^0.1.0",
     "express-partial-templates": "^0.2.1",
@@ -91,12 +91,14 @@
     "underscore": "^1.13.7",
     "urijs": "^1.19.11",
     "uuid": "^8.3.2",
+    "vite": "^7.1.12",
     "winston": "^3.18.3"
   },
   "devDependencies": {
     "@cucumber/cucumber": "^7.3.2",
     "@cucumber/pretty-formatter": "^1.0.1",
     "@types/jest": "^26.0.24",
+    "@vitest/coverage-v8": "^4.0.8",
     "@xmldom/xmldom": "~0.8.11",
     "chai": "^3.5.0",
     "chai-as-promised": "^7.1.2",
@@ -110,12 +112,6 @@
     "istanbul": "^0.4.5",
     "jest": "^26.6.3",
     "jquery": "^3.7.1",
-    "karma": "^6.4.4",
-    "karma-browserify": "^8.1.0",
-    "karma-chai": "^0.1.0",
-    "karma-cli": "^2.0.0",
-    "karma-mocha": "^2.0.1",
-    "karma-phantomjs-launcher": "^1.0.4",
     "mocha": "^8.4.0",
     "mocha-sandbox": "^1.0.0",
     "node-mocks-http": "^1.17.2",
@@ -129,6 +125,7 @@
     "sinon-chai": "^3.7.0",
     "supertest": "^3.4.2",
     "travis-conditions": "0.0.0",
+    "vitest": "^4.0.8",
     "watchify": "^4.0.0",
     "webdriverio": "^4.14.4"
   },