Merge pull request #2306 from alphagov/frontend-v5-compatibility-colin

Locate GOV.UK Frontend using `require.resolve()`

Author: colinrotherham

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Fixes
+
+- [#2306: Locate GOV.UK Frontend using `require.resolve()`](https://github.com/alphagov/govuk-prototype-kit/pull/2306)
+
 ## 13.13.3
 
 ### Fixes

lib/build.js

@@ -11,6 +11,7 @@ const sass = require('sass')
 // local dependencies
 const plugins = require('./plugins/plugins')
 const {
+  packageDir,
   projectDir,
   appSassDir,
   libSassDir,
@@ -21,9 +22,10 @@ const {
   backupNunjucksDir,
   appViewsDir
 } = require('./utils/paths')
-const { recursiveDirectoryContentsSync, getInternalGovukFrontendDir } = require('./utils')
+const { recursiveDirectoryContentsSync } = require('./utils')
 const { startPerformanceTimer, endPerformanceTimer } = require('./utils/performance')
 const { verboseLog } = require('./utils/verboseLogger')
+const { govukFrontendPaths } = require('./govukFrontendPaths')
 const { hasRestartedAfterError } = require('./sync-changes')
 
 let nodemonInstance
@@ -90,11 +92,12 @@ function sassInclude (filePath) {
 function sassKitFrontendDependency () {
   const timer = startPerformanceTimer()
 
-  const internalGovUkFrontendDir = getInternalGovukFrontendDir()
-  const internalGovUkFrontendConfig = fse.readJsonSync(path.join(internalGovUkFrontendDir, 'govuk-prototype-kit.config.json'))
+  // Find GOV.UK Frontend (via internal package, project fallback)
+  const govukFrontendInternal = govukFrontendPaths([packageDir, projectDir])
 
-  const govukFrontendSass = internalGovUkFrontendConfig.sass
-    .map(sassPath => path.join(internalGovUkFrontendDir, sassPath))
+  // Get GOV.UK Frontend (internal) stylesheets
+  const govukFrontendSass = (govukFrontendInternal.config?.sass || [])
+    .map(sassPath => path.join(govukFrontendInternal.baseDir, sassPath))
 
   const fileContents = sassVariables('/manage-prototype/dependencies') +
     govukFrontendSass

lib/errorServer.js

@@ -4,10 +4,10 @@ const fs = require('fs')
 const { getNunjucksAppEnv } = require('./nunjucks/nunjucksConfiguration')
 const { getErrorModel } = require('./utils/errorModel')
 const { verboseLog } = require('./utils/verboseLogger')
+const { packageDir, projectDir } = require('./utils/paths')
+const { govukFrontendPaths } = require('./govukFrontendPaths')
 const syncChanges = require('./sync-changes')
 const { flagError } = require('./sync-changes')
-const { packageDir } = require('./utils/paths')
-const { getInternalGovukFrontendDir } = require('./utils')
 
 function runErrorServer (error) {
   flagError(error)
@@ -45,6 +45,9 @@ function runErrorServer (error) {
     }
   }
 
+  // Find GOV.UK Frontend (via internal package, project fallback)
+  const govukFrontendInternal = govukFrontendPaths([packageDir, projectDir])
+
   /**
    * @type {http.RequestListener}
    */
@@ -79,7 +82,7 @@ function runErrorServer (error) {
 
       // Route GOV.UK Frontend to internal package
       const modulesDir = filePath.startsWith('govuk-frontend/') && knownRoute.startsWith('/manage-prototype/')
-        ? path.dirname(getInternalGovukFrontendDir())
+        ? path.dirname(govukFrontendInternal.baseDir)
         : path.join(process.cwd(), 'node_modules')
 
       try {
@@ -99,15 +102,21 @@ function runErrorServer (error) {
     res.setHeader('Content-Type', 'text/html')
     res.writeHead(500)
 
+    // Get GOV.UK Frontend (internal) views
+    const govukFrontendNunjucksPaths = (govukFrontendInternal.config?.nunjucksPaths || [])
+      .map(nunjucksPath => path.join(govukFrontendInternal.baseDir, nunjucksPath))
+
     const fileContentsParts = []
 
     try {
       const nunjucksAppEnv = getNunjucksAppEnv([
         path.join(__dirname, 'nunjucks'),
-        path.join(packageDir, 'node_modules', 'govuk-frontend'),
-        path.join(process.cwd(), 'node_modules', 'govuk-frontend')
+        ...govukFrontendNunjucksPaths
       ])
-      res.end(nunjucksAppEnv.render('views/error-handling/server-error', getErrorModel(error)))
+      res.end(nunjucksAppEnv.render('views/error-handling/server-error', {
+        govukFrontendInternal, // Add GOV.UK Frontend paths to Nunjucks context
+        ...getErrorModel(error)
+      }))
     } catch (ignoreThisError) {
       console.log(JSON.stringify({ ignoreThisError }, null, 2))
       fileContentsParts.push('<h1 class="govuk-heading-l">There is an error</h1>')

lib/govukFrontendPaths.js

@@ -0,0 +1,40 @@
+// core dependencies
+const path = require('path')
+
+// npm dependencies
+const fse = require('fs-extra')
+
+/**
+ * Find GOV.UK Frontend via search paths
+ *
+ * @param {string[]} searchPaths - Search paths for `require.resolve()`
+ * @returns {{ baseDir: string, includePath: string, assetPath: string, config: { [key: string]: unknown } }}
+ */
+function govukFrontendPaths (searchPaths = []) {
+  /**
+   * GOV.UK Frontend paths normalised
+   *
+   * v4.x - `/path/to/node_modules/govuk-frontend/govuk/all.js`
+   * v5.x - `/path/to/node_modules/govuk-frontend/dist/govuk/all.bundle.js`
+   */
+  const entryPath = require.resolve('govuk-frontend', { paths: searchPaths })
+  const dependencyPath = path.join('node_modules/govuk-frontend')
+  const baseDir = path.join(entryPath.split(dependencyPath)[0], dependencyPath)
+  const includeDir = path.dirname(entryPath)
+
+  return {
+    baseDir,
+
+    includePath: `/${path.relative(baseDir, includeDir)}`,
+    assetPath: `/${path.relative(baseDir, path.join(includeDir, 'assets'))}`,
+
+    // GOV.UK Frontend plugin config
+    config: fse.readJsonSync(path.join(baseDir, 'govuk-prototype-kit.config.json'), {
+      throws: false
+    })
+  }
+}
+
+module.exports = {
+  govukFrontendPaths
+}

lib/manage-prototype-handlers.js

@@ -232,10 +232,10 @@ async function getTemplatesHandler (req, res) {
   const availableTemplates = getPluginTemplates()
 
   const commonTemplatesPackageName = '@govuk-prototype-kit/common-templates'
-  const govUkFrontendPackageName = 'govuk-frontend'
+  const govukFrontendPackageName = 'govuk-frontend'
   let commonTemplatesDetails
   const installedPlugins = (await getInstalledPackages()).map((pkg) => pkg.packageName)
-  if (installedPlugins.includes(govUkFrontendPackageName) && !installedPlugins.includes(commonTemplatesPackageName)) {
+  if (installedPlugins.includes(govukFrontendPackageName) && !installedPlugins.includes(commonTemplatesPackageName)) {
     commonTemplatesDetails = {
       pluginDisplayName: plugins.preparePackageNameForDisplay(commonTemplatesPackageName),
       installLink: `${contextPath}/plugins/install?package=${encodeURIComponent(commonTemplatesPackageName)}&returnTo=templates`

lib/manage-prototype-routes.js

@@ -26,8 +26,8 @@ const {
   pluginCacheMiddleware,
   postPluginsHandler
 } = require('./manage-prototype-handlers')
-const path = require('path')
-const { getInternalGovukFrontendDir } = require('./utils')
+const { packageDir, projectDir } = require('./utils/paths')
+const { govukFrontendPaths } = require('./govukFrontendPaths')
 
 const router = require('../index').requests.setupRouter(contextPath)
 
@@ -79,14 +79,10 @@ router.post('/plugins/:mode', postPluginsModeMiddleware)
 
 router.post('/plugins/:mode', csrfProtection, postPluginsModeHandler)
 
-const partialGovukFrontendUrls = [
-  'govuk/assets',
-  'govuk/all.js',
-  'govuk-prototype-kit/init.js'
-]
-partialGovukFrontendUrls.forEach(url => {
-  router.use(`/dependencies/govuk-frontend/${url}`, express.static(path.join(getInternalGovukFrontendDir(), url)))
-})
+// Find GOV.UK Frontend (via internal package, project fallback)
+router.use('/dependencies/govuk-frontend', express.static(
+  govukFrontendPaths([packageDir, projectDir]).baseDir)
+)
 
 setKitRestarted(true)
 

lib/nunjucks/govuk-prototype-kit/layouts/govuk-branded.njk

@@ -1,4 +1,4 @@
-{%- set assetPath = assetPath | default('/plugin-assets/govuk-frontend/govuk/assets') -%}
+{%- set assetPath = assetPath | default('/plugin-assets/govuk-frontend' + govukFrontend.assetPath) -%}
 
 {% extends "govuk/template.njk" %}
 

lib/nunjucks/views/manage-prototype/layout.njk

@@ -1,4 +1,4 @@
-{%- set assetPath = '/manage-prototype/dependencies/govuk-frontend/govuk/assets' -%}
+{%- set assetPath = '/manage-prototype/dependencies/govuk-frontend' + govukFrontendInternal.assetPath -%}
 {% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %}
 
 {% block pageTitle %}

lib/utils/index.js

@@ -17,8 +17,7 @@ const filters = require('../filters/api')
 const functions = require('../functions/api')
 const plugins = require('../plugins/plugins')
 const routes = require('../routes/api')
-const { appDir, projectDir, packageDir } = require('./paths')
-const fse = require('fs-extra')
+const { appDir, projectDir } = require('./paths')
 const { asyncSeriesMap } = require('./asyncSeriesMap')
 
 // Tweak the Markdown renderer
@@ -254,17 +253,6 @@ async function searchAndReplaceFiles (dir, searchText, replaceText, extensions)
   return modifiedFiles.flat().filter(Boolean)
 }
 
-let internalGovukFrontendDir
-
-function getInternalGovukFrontendDir () {
-  if (!internalGovukFrontendDir) {
-    const packageDirFrontend = path.join(packageDir, 'node_modules', 'govuk-frontend')
-    const projectDirFrontend = path.join(projectDir, 'node_modules', 'govuk-frontend')
-    internalGovukFrontendDir = fse.pathExistsSync(packageDirFrontend) ? packageDirFrontend : projectDirFrontend
-  }
-  return internalGovukFrontendDir
-}
-
 function sortByObjectKey (key) {
   return function (a, b) {
     if (a[key] > b[key]) {
@@ -291,6 +279,5 @@ module.exports = {
   sessionFileStoreQuietLogFn,
   searchAndReplaceFiles,
   recursiveDirectoryContentsSync,
-  getInternalGovukFrontendDir,
   sortByObjectKey
 }

server.js

@@ -8,7 +8,6 @@ const bodyParser = require('body-parser')
 const cookieParser = require('cookie-parser')
 const dotenv = require('dotenv')
 const express = require('express')
-const fse = require('fs-extra')
 const { expressNunjucks, getNunjucksAppEnv, stopWatchingNunjucks } = require('./lib/nunjucks/nunjucksConfiguration')
 
 // We want users to be able to keep api keys, config variables and other
@@ -20,11 +19,11 @@ dotenv.config()
 const { projectDir, packageDir, finalBackupNunjucksDir } = require('./lib/utils/paths')
 const config = require('./lib/config.js').getConfig()
 const packageJson = require('./package.json')
+const { govukFrontendPaths } = require('./lib/govukFrontendPaths')
 const utils = require('./lib/utils')
 const sessionUtils = require('./lib/session.js')
 const plugins = require('./lib/plugins/plugins.js')
 const routesApi = require('./lib/routes/api.js')
-const { getInternalGovukFrontendDir } = require('./lib/utils')
 
 const app = express()
 routesApi.setApp(app)
@@ -40,6 +39,12 @@ if (isSecure) {
   app.set('trust proxy', 1) // needed for secure cookies on heroku
 }
 
+// Find GOV.UK Frontend (via project, internal package fallback)
+const govukFrontend = govukFrontendPaths([projectDir, packageDir])
+
+// Find GOV.UK Frontend (via internal package, project fallback)
+const govukFrontendInternal = govukFrontendPaths([packageDir, projectDir])
+
 // Add variables that are available in all views
 app.locals.asset_path = '/public/'
 app.locals.useAutoStoreData = config.useAutoStoreData
@@ -56,6 +61,11 @@ if (plugins.legacyGovukFrontendFixesNeeded()) {
 app.locals.pluginConfig = plugins.getAppConfig({
   scripts: utils.prototypeAppScripts
 })
+
+// Add GOV.UK Frontend paths to Nunjucks locals
+app.locals.govukFrontend = govukFrontend
+app.locals.govukFrontendInternal = govukFrontendInternal
+
 // keep extensionConfig around for backwards compatibility
 // TODO: remove in v14
 app.locals.extensionConfig = app.locals.pluginConfig
@@ -70,16 +80,15 @@ app.use(cookieParser())
 // static assets to prevent unauthorised access
 app.use(require('./lib/authentication.js')())
 
-// Get internal govuk-frontend views
-const internalGovUkFrontendDir = getInternalGovukFrontendDir()
-const internalGovUkFrontendConfig = fse.readJsonSync(path.join(internalGovUkFrontendDir, 'govuk-prototype-kit.config.json'))
-const internalGovUkFrontendViews = internalGovUkFrontendConfig.nunjucksPaths.map(viewPath => path.join(internalGovUkFrontendDir, viewPath))
+// Get GOV.UK Frontend (internal) views
+const govukFrontendNunjucksPaths = (govukFrontendInternal.config?.nunjucksPaths || [])
+  .map(nunjucksPath => path.join(govukFrontendInternal.baseDir, nunjucksPath))
 
 // Set up App
 const appViews = [
   path.join(projectDir, '/app/views/')
 ].concat(plugins.getAppViews([
-  ...internalGovUkFrontendViews,
+  ...govukFrontendNunjucksPaths,
   finalBackupNunjucksDir
 ]))