Fix error server /manage-prototype/dependencies

[colinrotherham]

This PR fixes a few error page issues

It picks up from changes to isolate GOV.UK Frontend versions in:

• Using internal Govuk Frontend more widely #2317

Sass variables

The error page Sass $govuk-assets-path uses /manage-prototype/dependencies/govuk-frontend but we didn't handle error server responses for this route so fonts and background images were missing:

govuk-prototype-kit/lib/assets/sass/manage-prototype.scss

Line 1 in 86fb72a

$govuk-assets-path: '/manage-prototype/dependencies/govuk-frontend/govuk/assets/';

Nunjucks assets

The error page Nunjucks assetPath uses /plugin-assets/govuk-frontend which would typically route to a plugin version of GOV.UK Frontend rather than one internal to the Prototype Kit

This was handled but with different URLs to the CSS:

<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/plugin-assets/govuk-frontend/govuk/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/plugin-assets/govuk-frontend/govuk/assets/images/govuk-mask-icon.svg" color="#0b0c0c">

govuk-prototype-kit/lib/errorServer.js

Lines 59 to 61 in d262239

	if (pluginName === 'govuk-frontend') {
	filePath = path.join(getInternalGovukFrontendDir(), ...urlParts)
	} else {

Sass variables

The error page shares the manage-prototype.scss stylesheet which is hard coded to use:

govuk-prototype-kit/lib/assets/sass/manage-prototype.scss

Line 1 in 86fb72a

$govuk-assets-path: '/manage-prototype/dependencies/govuk-frontend/govuk/assets/';

HTTP content-type headers

GOV.UK Frontend includes fonts (*.woff, *.woff2), images (*.png, *.svg) and favicons (*.ico)

These have now been added to the error server including *.mjs with the old-but-new text/javascript type

govuk-prototype-kit/lib/errorServer.js

Lines 27 to 30 in 86fb72a

	const fileExtensionsToMimeTypes = {
	js: 'application/javascript',
	css: 'text/css'
	}

Legacy GOV.UK Frontend

The Prototype Kit currently patches versions of GOV.UK Frontend prior to v4.4.0 (where nunjucksMacros and sass fields were added to the plugin config) but the $govuk-assets-path variable was missing leaving the default as:

$govuk-assets-path: '/govuk/assets/';

[colinrotherham]

To confirm it works, this error is back on Manage prototype pages:

• Using GOV.UK Frontend 4.5.0, opening dev tools causes an error in the terminal #1950

The kit must be running [email protected] internally?

It's fixed on plugin pages which appear to use [email protected]

[nataliecarey]

Historically we've tested the isolation by trying scenarios where:

• The user is running the same Frontend version of the kit
• The user is running a different Frontend version to the kit
• The user has uninstalled Frontend

The case that's most relevant to supporting future versions of Frontend hasn't historically been tested. The way I'm testing this today is:

1. mkdir ../govuk-frontend
2. (cd ../govuk-frontend; npm init -y)
3. npm install ../govuk-frontend

That will install a completely blank govuk-frontend showing clearly where we expect certain things to exist in the user's version.

In that scenario the kit fails to start both in main and in error-server-assets.

[colinrotherham]

In that scenario the kit fails to start both in main and in error-server-assets.

Happy to accept a challenge, but some of your tests need govuk-frontend installed

Is running without GOV.UK Frontend entirely more for this one?

• Revisit how unbranded/opting out of GOV.UK Frontend works #1705

[colinrotherham]

Thanks @nataliecarey

Just a reminder that you'll now see GOV.UK Frontend v4.5.0 internally due to --save-exact

govuk-prototype-kit/package.json

Line 75 in 86fb72a

"govuk-frontend": "^4.5.0",

Prototype pages using plugin assets won't be affected

Would be good to do another PR to avoid the source map 404 issue #2333 (comment)

[nataliecarey]

Just taking another look. We've got a layout we're using for Manage Prototype section which I think we should be using here, that layout sets assetPath as you are here so I'd suggest we remove the explicit assetPath and extend views/manage-prototype/layout.njk instead.

You can see this on the 404 page, I must have missed the error page when I was going through the internal pages.

[colinrotherham]

Sounds good to me. Pushed it up 👍

[colinrotherham]

@nataliecarey Going to push again as the new layout changes application.css to manage-prototype.css

There was a knownPaths entry that expected application.css

const knownPaths = {
  '/public/stylesheets/application.css': {
    type: 'text/css',
    contents: fs.readFileSync(path.join(process.cwd(), '.tmp', 'public', 'stylesheets', 'manage-prototype.css'))
  }
}