How to add the NHS App frontend to a prototype

This guide explains how to add the NHS App frontend to the NHS prototype kit.

You must follow the NHS prototype kit setup guide first.

Step 1

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

cd ~/Documents/projects/project-prototype

If your prototype is already running, to stop it use

Ctrl + C

Step 2

Enter

npm install --save nhsapp-frontend

Step 3

In your HTML editor, open

/app/assets/sass/application.scss

After

// Import NHS.UK frontend library
@import 'node_modules/nhsuk-frontend/packages/nhsuk';

Paste

// Import all styles from the NHS App frontend library
@import 'node_modules/nhsapp-frontend/dist/nhsapp/all';

Step 4

In your root folder, open

/app.js

and find

appViews

After

path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),

Add

path.join(__dirname, 'node_modules/nhsapp-frontend/dist'),

So it looks like this

const appViews = [
  path.join(__dirname, 'app/views/'),
  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
  path.join(__dirname, 'node_modules/nhsapp-frontend/dist'),
  path.join(__dirname, 'docs/views/'),
];

Step 5

In your root folder, open

/app.js

and find

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

and on the next line paste

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

Once you have installed NHS App frontend, all NHS App components should work in your prototype.

You will now have the latest version installed, later you can easily update to the latest NHS App frontend

To use the components, you should:

  • find the component in NHS App design components
  • copy the code from the example
  • paste the code into the page in your prototype