Using internal Govuk Frontend more widely

__tests__/spec/sanity-checks.js

@@ -1,7 +1,6 @@
 /* eslint-env jest */
 
 // core dependencies
-const assert = require('assert')
 const path = require('path')
 
 // npm dependencies
@@ -69,78 +68,4 @@ describe('The Prototype Kit', () => {
       expect(response.type).toBe('text/html')
     })
   })
-
-  describe('plugins', () => {
-    it('should allow known assets to be loaded from node_modules', (done) => {
-      request(app)
-        .get('/plugin-assets/govuk-frontend/govuk/all.js')
-        .expect(200)
-        .expect('Content-Type', /application\/javascript; charset=UTF-8/)
-        .end((err, res) => {
-          if (err) {
-            done(err)
-          } else {
-            assert.strictEqual(
-              '' + res.text,
-              fse.readFileSync(path.join(projectDir, 'node_modules', 'govuk-frontend', 'govuk', 'all.js'), 'utf8')
-            )
-            done()
-          }
-        })
-    })
-
-    it('should allow known assets to be loaded from node_modules', (done) => {
-      request(app)
-        .get('/plugin-assets/govuk-frontend/govuk/assets/images/favicon.ico')
-        .expect(200)
-        .expect('Content-Type', /image\/x-icon/)
-        .end((err, res) => {
-          if (err) {
-            done(err)
-          } else {
-            assert.strictEqual(
-              '' + res.body,
-              fse.readFileSync(path.join(projectDir, 'node_modules', 'govuk-frontend', 'govuk', 'assets', 'images', 'favicon.ico'), 'utf8')
-            )
-            done()
-          }
-        })
-    })
-
-    it('should not expose everything', (done) => {
-      const consoleErrorMock = jest.spyOn(global.console, 'error').mockImplementation()
-
-      request(app)
-        .get('/govuk/assets/common.js')
-        .expect(404)
-        .end((err, res) => {
-          consoleErrorMock.mockRestore()
-          if (err) {
-            done(err)
-          } else {
-            done()
-          }
-        })
-    })
-
-    describe('misconfigured prototype kit - while updating kit developer did not copy over changes in /app folder', () => {
-      it('should still allow known assets to be loaded from node_modules', (done) => {
-        request(app)
-          .get('/plugin-assets/govuk-frontend/govuk/all.js')
-          .expect(200)
-          .expect('Content-Type', /application\/javascript; charset=UTF-8/)
-          .end((err, res) => {
-            if (err) {
-              done(err)
-            } else {
-              assert.strictEqual(
-                '' + res.text,
-                fse.readFileSync(path.join(projectDir, 'node_modules', 'govuk-frontend', 'govuk', 'all.js'), 'utf8')
-              )
-              done()
-            }
-          })
-      })
-    })
-  })
 })

lib/authentication.js

@@ -1,4 +1,3 @@
-
 // core dependencies
 const url = require('url')
 
@@ -14,8 +13,7 @@ const allowedPathsWhenUnauthenticated = [
   '/plugin-assets/govuk-frontend/govuk/all.js',
   // Keep /extension-assets path for backwards compatibility
   // TODO: remove in v14
-  '/extension-assets/govuk-prototype-kit/lib/assets/images/unbranded.ico',
-  '/extension-assets/govuk-frontend/govuk/all.js']
+  '/extension-assets/govuk-prototype-kit/lib/assets/images/unbranded.ico']
 
 function authentication () {
   if (!shouldUseAuth()) {
@@ -38,7 +36,11 @@ function authentication () {
   const password = encryptPassword(config.getConfig().password)
 
   return (req, res, next) => {
-    if (allowedPathsWhenUnauthenticated.includes(req.path)) {
+    if (allowedPathsWhenUnauthenticated.includes(req.path) ||
+      req.path.startsWith('/manage-prototype/dependencies') ||
+      req.path.startsWith('/plugin-assets/govuk-prototype-kit') ||
+      req.path === '/public/stylesheets/manage-prototype.css'
+    ) {
       next()
     } else if (isAuthenticated(password, req)) {
       next()

lib/build.js

@@ -19,10 +19,9 @@ const {
   publicCssDir,
   shadowNunjucksDir,
   backupNunjucksDir,
-  appViewsDir,
-  packageDir
+  appViewsDir
 } = require('./utils/paths')
-const { recursiveDirectoryContentsSync } = require('./utils')
+const { recursiveDirectoryContentsSync, getInternalGovukFrontendDir } = require('./utils')
 const { startPerformanceTimer, endPerformanceTimer } = require('./utils/performance')
 const { verboseLog } = require('./utils/verboseLogger')
 const { hasRestartedAfterError } = require('./sync-changes')
@@ -84,21 +83,13 @@ function ensureTempDirExists (dir = tmpDir) {
   fse.writeFileSync(path.join(tmpDir, '.gitignore'), '*')
 }
 
-function getInternalGovUkFrontendDir () {
-  let internalGovUkFrontendDir = path.join(packageDir, 'node_modules', 'govuk-frontend')
-  if (!fse.pathExistsSync(internalGovUkFrontendDir)) {
-    internalGovUkFrontendDir = path.join(projectDir, 'node_modules', 'govuk-frontend')
-  }
-  return internalGovUkFrontendDir
-}
-
 function sassInclude (filePath) {
   return `@import "${filePath.split(path.sep).join('/')}";`
 }
 
 function sassKitFrontendDependency () {
   const timer = startPerformanceTimer()
-  const internalGovUkFrontendDir = getInternalGovUkFrontendDir()
+  const internalGovUkFrontendDir = getInternalGovukFrontendDir()
   const internalGovUkFrontendConfig = fse.readJsonSync(path.join(internalGovUkFrontendDir, 'govuk-prototype-kit.config.json'))
   const fileContents = internalGovUkFrontendConfig.sass
     .map(sassPath => path.join(internalGovUkFrontendDir, sassPath))

lib/errorServer.js

@@ -7,6 +7,7 @@ const { verboseLog } = require('./utils/verboseLogger')
 const syncChanges = require('./sync-changes')
 const { flagError } = require('./sync-changes')
 const { packageDir } = require('./utils/paths')
+const { getInternalGovukFrontendDir } = require('./utils')
 
 function runErrorServer (error) {
   flagError(error)
@@ -52,11 +53,23 @@ function runErrorServer (error) {
     }
     if (req.url.startsWith('/plugin-assets')) {
       res.setHeader('Content-Type', fileExtensionsToMimeTypes[req.url.split('.').at(-1)] || 'text/plain')
-      const urlParts = req.url.split('/')
-      urlParts.shift()
-      urlParts[0] = 'node_modules'
-      const filePath = path.join(process.cwd(), ...urlParts)
-      res.end(fs.readFileSync(filePath))
+      const urlParts = req.url.split('/').slice(2)
+      const pluginName = urlParts.shift()
+      let filePath
+      if (pluginName === 'govuk-frontend') {
+        filePath = path.join(getInternalGovukFrontendDir(), ...urlParts)
+      } else {
+        filePath = path.join(process.cwd(), 'node_modules', pluginName, ...urlParts)
+      }
+      try {
+        const contents = fs.readFileSync(filePath)
+        res.writeHead(200)
+        res.end(contents)
+      } catch (e) {
+        console.log('Couldn\'t load url in error server: ', req.url)
+        res.writeHead(500)
+        res.end('500 Server Error')
+      }
       return
     }
 

lib/manage-prototype-handlers.js

@@ -122,7 +122,7 @@ function postPasswordHandler (req, res) {
 // Middleware to ensure the routes specified below will render the manage-prototype-not-available
 // view when the prototype is not running in development
 function developmentOnlyMiddleware (req, res, next) {
-  if (config.getConfig().isDevelopment) {
+  if (config.getConfig().isDevelopment || req.url.startsWith('/dependencies/govuk-frontend')) {
     next()
   } else {
     res.render(getManagementView('manage-prototype-not-available.njk'))
@@ -131,7 +131,10 @@ function developmentOnlyMiddleware (req, res, next) {
 
 // Middleware to ensure pages load when plugin cache has been initially loaded
 async function pluginCacheMiddleware (req, res, next) {
-  await waitForPackagesCache()
+  await Promise.race([
+    waitForPackagesCache(),
+    new Promise((resolve) => setTimeout(resolve, 1000))
+  ])
   next()
 }
 

lib/manage-prototype-handlers.test.js

@@ -133,7 +133,8 @@ describe('manage-prototype-handlers', () => {
       query: {},
       params: {},
       route: {},
-      originalUrl: '/current-url'
+      originalUrl: '/current-url',
+      url: '/current-url'
     }
     res = {
       render: jest.fn(),

lib/manage-prototype-routes.js

@@ -30,11 +30,6 @@ const path = require('path')
 const { getInternalGovukFrontendDir } = require('./utils')
 
 const router = require('../index').requests.setupRouter(contextPath)
-const redirectingRouter = require('../index').requests.setupRouter('/manage-prototype')
-
-redirectingRouter.use((req, res) => {
-  res.redirect(req.originalUrl.replace('/manage-prototype', contextPath))
-})
 
 router.get('/csrf-token', getCsrfTokenHandler)
 
@@ -84,7 +79,14 @@ 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')))
+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)))
+})
 
 setKitRestarted(true)
 

lib/nunjucks/views/error-handling/page-not-found.njk

@@ -1,4 +1,4 @@
-{% extends "govuk-prototype-kit/layouts/govuk-branded.njk" %}
+{% extends "views/manage-prototype/layout.njk" %}
 
 {% block pageTitle %}
   Page not found – {{ serviceName }} – GOV.UK Prototype Kit

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

@@ -16,7 +16,12 @@
   {% include "views/manage-prototype/stylesheets.njk" %}
 {% endblock %}
 
-{% block beforeContent   %}
+{% block scripts %}
+  {% include "views/manage-prototype/scripts.njk" %}
+  {% block pageScripts %}{% endblock %}
+{% endblock %}
+
+{% block beforeContent %}
   <nav id="govuk-prototype-kit-manage-prototype-navigation" class="govuk-prototype-kit-manage-prototype-navigation js-govuk-prototype-kit-manage-prototype-navigation govuk-clearfix" role="navigation"
        aria-labelledby="govuk-prototype-kit-manage-prototype-navigation-heading">
     <h2 class="govuk-visually-hidden" id="govuk-prototype-kit-manage-prototype-navigation-heading">Menu</h2>

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

@@ -1,4 +1,4 @@
-{% extends "govuk-prototype-kit/layouts/unbranded.njk" %}
+{% extends "views/manage-prototype/layout.njk" %}
 
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
@@ -14,19 +14,25 @@
   Sign in - GOV.UK Prototype Kit
 {% endblock %}
 
-{% block head %}
-  <link href="/public/stylesheets/unbranded.css" media="all" rel="stylesheet" type="text/css" />
-{% endblock %}
 
-{% block scripts %}
-  <!-- We only need Frontend js in order to focus the error summary -->
-  <script src="/plugin-assets/govuk-frontend/govuk/all.js"></script>
-  <script>
-    window.GOVUKFrontend.initAll()
-  </script>
+{% block header %}{% endblock %}
+{% block footer %}{% endblock %}
+{% block beforeContent %}{% endblock %}
+{% block stylesheets %}
+{{ super() }}
+<style>
+  .govuk-heading-xl, 
+  .govuk-label, 
+  .govuk-button, 
+  .govuk-error-summary__title, 
+  .govuk-error-summary__body, 
+  .govuk-error-summary__list a,
+  .govuk-error-message {
+    font-family: sans-serif;
+  }
+</style>
 {% endblock %}
 
-
 {% block content %}
 
 <form method="post" action="/manage-prototype/password">

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

@@ -0,0 +1,3 @@
+<script src="/manage-prototype/dependencies/govuk-frontend/govuk/all.js"></script>
+<script src="/manage-prototype/dependencies/govuk-frontend/govuk-prototype-kit/init.js"></script>
+<script src="/plugin-assets/govuk-prototype-kit/lib/assets/javascripts/kit.js"></script>