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