Skip to main content
HMRC design resources
Back

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

Enter

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

Step 3

In your HTML editor, open

/app/assets/sass/application.scss

After

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

paste

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

Step 4

In your root folder, open

/server.js

and find

appViews

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

In

/server.js

find

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

In

/server.js

find

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

Open

app/views/includes/scripts.html

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