Install NHS App frontend in your prototype

While most NHS App components are created to automatically work with the NHS prototype kit, some patterns have been created with specific NHS App styles.

This guide explains how to install NHS App frontend to support these styles. You will only have to follow these steps once for your prototype. You must use version 4.0.0 or later of the NHS 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 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