Switching from the GOV.UK prototype kit

If you have learned how to use the GOV.UK Prototype Kit, you will be able to use the NHS.UK prototype kit. This is because the two prototype kits are built in the same way. However, you must do some things differently.

Installing and running the NHS.UK prototype kit

Information:

There are some extra steps for NHS England Windows laptops you must do before you start.

When you are installing and running your prototype:

Do

Don’t

  • do not try to create a prototype by running a command in the terminal - you must download it
  • do not start your local server the same way as in the GOV.UK Prototype Kit as it will not work

Making pages

When you are making pages:

Do

  • use the NHS.UK design system for styles, components and patterns - you can also copy template pages in the NHS prototype kit
  • use NHS.UK macro naming conventions which do not have a prefix, for example {{ radios }} instead of {{ govukRadios }}
  • use NHS.UK typography classes on headings and other text, for example 
    <p class="nhsuk-body">nhsuk-body</p>
  • know that the NHS.UK prototype kit does not have some functionality that is in the GOV.UK one, for example the interface to create pages from templates
  • know that plugins designed for the GOV.UK Prototype Kit may not work or may need to be installed differently - for example, if you want to use the GOV.UK Prototype Kit Filters plugin you must use instructions for earlier versions of the kit and make changes in filters.js.

Don’t

  • do not copy pages from the GOV.UK Prototype Kit or GOV.UK Design System and expect them to work - you may need to copy over extra code like CSS to make them work properly
  • do not use GOV.UK macro naming conventions or GOV.UK typography classes as they will not work

Using routing and session data

When you save any changes to routes.js file, the app will restart. This will also delete all session data and reset them with any values set in data/session-data-defaults.js.

Publishing your prototype online

Set the password using the variable PROTOTYPE_PASSWORD - check the guide to publish your prototype online for more details.

Help and support

If you have any problems, ask a developer on your team (if you have one), email us or get in touch on the NHS digital service manual #prototype-kit Slack channel.