Fixing asset loading in Manage Prototype pages.

alphagov · Apr 20, 2023 · 953830a · 953830a
1 parent b2fd3cc
commit 953830a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 8 deletions.
diff --git a/lib/assets/sass/manage-prototype.scss b/lib/assets/sass/manage-prototype.scss
@@ -1,3 +1,4 @@
+$govuk-assets-path: '/manage-prototype/dependencies/govuk-frontend/govuk/assets/';
 
 // Import GOV.UK Frontend within the kit dependency
 @import ".tmp/sass/kit-frontend-dependency";
@@ -534,4 +535,4 @@ body .govuk-prototype-kit-manage-prototype-govuk-tag {
       color: #d4351c;
     }
   }
-}
+}
diff --git a/lib/manage-prototype-routes.js b/lib/manage-prototype-routes.js
@@ -1,5 +1,6 @@
 // npm dependencies
 const csrf = require('csurf')
+const express = require('express')
 
 const csrfProtection = csrf({ cookie: false })
 
@@ -23,6 +24,8 @@ const {
   postPluginsModeHandler,
   postPluginsStatusHandler
 } = require('./manage-prototype-handlers')
+const path = require('path')
+const { getInternalGovukFrontendDir } = require('./utils')
 
 const router = require('../index').requests.setupRouter(contextPath)
 const redirectingRouter = require('../index').requests.setupRouter('/manage-prototype')
@@ -70,6 +73,8 @@ router.post('/plugins/:mode', postPluginsModeMiddleware)
 
 router.post('/plugins/:mode', csrfProtection, postPluginsModeHandler)
 
+router.use('/dependencies/govuk-frontend/govuk/assets', express.static(path.join(getInternalGovukFrontendDir(), 'govuk', 'assets')))
+
 setKitRestarted(true)
 
 module.exports = router
diff --git a/lib/nunjucks/govuk-prototype-kit/layouts/govuk-branded.njk b/lib/nunjucks/govuk-prototype-kit/layouts/govuk-branded.njk
@@ -1,4 +1,4 @@
-{%- set assetPath = '/plugin-assets/govuk-frontend/govuk/assets' -%}
+{%- set assetPath = assetPath | default('/plugin-assets/govuk-frontend/govuk/assets') -%}
 
 {% extends "govuk/template.njk" %}
 

diff --git a/lib/nunjucks/views/manage-prototype/layout.njk b/lib/nunjucks/views/manage-prototype/layout.njk
@@ -1,3 +1,4 @@
+{%- set assetPath = '/manage-prototype/dependencies/govuk-frontend/govuk/assets' -%}
 {% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %}
 
 {% block pageTitle %}

diff --git a/lib/utils/index.js b/lib/utils/index.js
@@ -18,7 +18,8 @@ const filters = require('../filters/api')
 const functions = require('../functions/api')
 const plugins = require('../plugins/plugins')
 const routes = require('../routes/api')
-const { appDir, projectDir } = require('./paths')
+const { appDir, projectDir, packageDir } = require('./paths')
+const fse = require('fs-extra')
 
 // Tweak the Markdown renderer
 const defaultMarkedRenderer = marked.defaults.renderer || new marked.Renderer()
@@ -277,6 +278,14 @@ async function searchAndReplaceFiles (dir, searchText, replaceText, extensions)
   return modifiedFiles.flat().filter(Boolean)
 }
 
+function getInternalGovukFrontendDir () {
+  if (!fse.pathExistsSync(path.join(packageDir, 'node_modules', 'govuk-frontend'))) {
+    return path.join(projectDir, 'node_modules', 'govuk-frontend')
+  } else {
+    return path.join(packageDir, 'node_modules', 'govuk-frontend')
+  }
+}
+
 module.exports = {
   prototypeAppScripts: scripts,
   addNunjucksFilters,
@@ -291,5 +300,6 @@ module.exports = {
   requestHttpsJson,
   sessionFileStoreQuietLogFn,
   searchAndReplaceFiles,
-  recursiveDirectoryContentsSync
+  recursiveDirectoryContentsSync,
+  getInternalGovukFrontendDir
 }
diff --git a/server.js b/server.js
@@ -24,6 +24,7 @@ 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)
@@ -70,10 +71,7 @@ app.use(require('./lib/authentication.js')())
 app.use(sessionUtils.getSessionMiddleware())
 
 // Get internal govuk-frontend views
-let internalGovUkFrontendDir = path.join(packageDir, 'node_modules', 'govuk-frontend')
-if (!fse.pathExistsSync(internalGovUkFrontendDir)) {
-  internalGovUkFrontendDir = path.join(projectDir, 'node_modules', 'govuk-frontend')
-}
+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))