Frontend assets and tools

The Digital Marketplace has 6 frontend apps. These apps mostly use shared templates, JavaScript, Sass and image assets, but occasionally have custom assets specific to that app.

For a list of supported browsers, see Browser and accessibility support.

Shared assets

The Digital Marketplace frontend was originally built using the following (now deprecated) libraries:

  • GOV.UK Elements

  • GOV.UK Template

  • GOV.UK Frontend Toolkit

We also have our own custom Digital Marketplace Frontend Toolkit, for shared patterns and assets.

We are currently migrating to use the following libraries:

  • GOV.UK Frontend (managed by the Design System team)

  • Digital Marketplace GOV.UK Frontend

For more information on how and when to use the new frontend components, see the Digital Marketplace GOV.UK Frontend repo README.

Building assets

Each frontend app has:

  • a gulpfile.js with steps to copy and compile assets

  • a .nvmrc file denoting the version of Node to use (currently v14.x)

  • package.json and package-lock.json files to manage dependencies

Serving assets

Each app copies its assets to the /static folder, and serves that folder from the app’s base url. For example, the User FE assets are served from /user/static.

CSS, JS and favicons are also gzipped. This is set in the nginx config of the app’s Docker base image.

Note that large files such as PDFs and CSVs should not be served from this folder. Use an S3 bucket instead!

Testing

Running npm test in any frontend app will carry out linting using StandardJS. We also have unit tests with Jasmine/PhantomJS in digitalmarketplace-frontend-toolkit (see spec/javascripts/manifest.js)

We use Backstop.js for Visual Regression tests, as part of our deployment pipeline.

See the Visual regression tests repo README for details on how to add a scenario.

Analytics

See the Google Analytics manual page.