Add the NHS App frontend to the NHS prototype kit

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

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/main.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, 'lib/example-templates/'),
  path.join(__dirname, 'lib/prototype-admin/'),
  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),
  path.join(__dirname, 'node_modules/nhsuk-frontend/packages/macros'),
  path.join(__dirname, 'node_modules/nhsapp-frontend/dist'),
];

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')));

Step 6

After installing the NHS App frontend, all NHS App components should work seamlessly in your prototype.