⚙ Simplify updates of GOV.UK frontend and any other frontend dependencies

[MatMoore]

User Story

As a developer
I expect to update GOV.UK frontend frequently
To pick up fixes and improvements to the design system components

Value / Purpose

Currently we haven't automated frontend builds, so when dependabot detects there are new versions, it's not enough to merge the PR, we also need to perform some steps manually:

1. Run an npm install
2. Copy the javascript from node modules to the assets directory
3. Run npm sass to recompile CSS from SASS

This could be simplified if we

• Adopt a build tool
• Build the asset as part of our docker build

This would mean we can merge updates to GOV.UK frontend as they come in and they would be tested in CI and reflected in the next deployment.

Useful Contacts

Mat

User Types

Developers

Hypothesis

If we make it easier to update our Javascript and CSS dependencies
Then we will do a better job at keeping them up to date

Proposal

Pick a build tool and integrate it into the repo.

The build tool could be a frontend focused tool like webpack, something simple like a Makefile, or something more geared towards Django development.

Have a look at some of our other django repos and see how this is done there.

Additional Information

No response

Definition of Done

• There is one command to build all frontend assets (pull in dependencies, stick them somewhere Django's asset pipeline can pull from)
• The command is documented in our readme
• The command is run as part of building the docker image
• The command is run as part of CI

[murdo-moj]

gulp is a build tool I've seen in another repo https://github.com/ministryofjustice/cla_public/blob/master/gulpfile.js

Here's a comparison of it vs npm scripts https://gist.github.com/elijahmanor/179e47828bf760c218bb3820d929836d

The tasks in this ticket are simple enough we could keep using npm scripts for now, but gulp provides plugins for more complicated builds

[murdo-moj]

#330

[murdo-moj]

https://design-patterns.service.justice.gov.uk/get-started/installing-with-npm/#recommended-solution Justice Gov have recommendations for how to install with npm. Using npm scripts is one of the solutions they list. I have chosen it over a tool such as gulp for simplicity and so we don't need to worry about gulp plugin updates.