Skip to main content

Install HMRC Frontend in an old version of the GOVUK prototype Kit

In version 8.7.0 of GOVUK's prototype kit a new feature was introduced which made installing HMRC Frontend much simpler, we recommend that you upgrade to 9.0.0 or later and then follow the simple installation instructions

This guide explains how to install HMRC Frontend to support these styles. You will only have to follow these steps once for your prototype. You must use a version between 7 and 8.7.0 of the GOV.UK Prototype Kit for these to work.

Step 1

Using GitBash or Terminal, navigate to where your prototype is. For example

cd ~/Documents/projects/project-prototype

If your protype is already running, to stop it use

Ctrl + C

Step 2


npm install --save hmrc-frontend@0.6.x

Step 3

In your HTML editor, open



// Import GOV.UK Frontend
@import "node_modules/govuk-frontend/all";


// Import HMRC Frontend
@import "node_modules/hmrc-frontend/all";

Step 4

In your root folder, open


and find


Add the paths to hmrc-frontend layouts and components to the top of the list.

var appViews = [
  path.join(__dirname, '/node_modules/hmrc-frontend/layouts'),
  path.join(__dirname, '/node_modules/hmrc-frontend/components'),
  path.join(__dirname, '/node_modules/govuk-frontend/'),
  path.join(__dirname, '/node_modules/govuk-frontend/components'),
  path.join(__dirname, '/app/views/'),
  path.join(__dirname, '/lib/')

Step 5




app.use('/node_modules/govuk-frontend', express.static(path.join(__dirname, '/node_modules/govuk-frontend')))

and on the next line paste

app.use('/node_modules/hmrc-frontend', express.static(path.join(__dirname, '/node_modules/hmrc-frontend')))

Step 6




app.use('/assets', express.static(path.join(__dirname, 'node_modules', 'govuk-frontend', 'assets')))

and on the next line paste in

app.use('/assets', express.static(path.join(__dirname, 'node_modules', 'hmrc-frontend')))

Step 7



and at the end of the file, paste

<script src="/node_modules/hmrc-frontend/all.js"></script>

Once you have installed HMRC Frontend, All HMRC patterns should work in your prototype.

To use the patterns, you should:

  • find the pattern in HMRC Design Patterns
  • copy the code from the example
  • paste the code into the page in your prototype