Skip to main content
Step 2 of 8: Build a basic prototype

Create pages

Create pages by copying examples from the patterns section of the NHS Service manual.

Create a start page

Create an empty file named start-page.html in your app/views folder.

Add this line to the very top of your file:

{% extends "layout.html" %}

This line tells the kit to use the standard page layout for your page. You’ll need it on all pages you create.

Visit the start page pattern and select the Nunjucks option under the first example. This will reveal the Nunjucks code.

Copy the Nunjucks code into your file, below the line we added at the start. There is a ‘Copy code’ button to make this easier.

Preview pages by going to http://localhost:3000/name-of-file in your web browser. You don’t use the file extension in URLs.

For example, go to http://localhost:3000/start-page to see start-page.html.

Change the service name

You’ll normally edit the HTML to make changes to pages, but the service name is in a config file. This is so we can change it in one place to update it on every page in your prototype.

  1. Open the config.js file in your app folder
  2. Change serviceName from "Service name goes here" to "Order a test to check if you have magical powers"
  3. Press Cmd + S on Mac or Ctrl + S on Windows to save your change

You must save every time you make a change to a file. In most code editors, a dot appears in the tab for any file that has unsaved changes.

Normally your changes will automatically show in the browser without refreshing. But for this config change, you need to refresh the page. You should see your service name change on the Start page.

Question pages

Create 2 empty files for question pages in app/views named:

  • magical-powers.html
  • details.html

As before, add this line to the top of each file:

{% extends "layout.html" %}

Visit the question page pattern to see some example question pages.

Find the first example with radios and copy the Nunjucks in to the first file. Copy the Nunjucks in to the first file you made.

The example includes a default radio question ‘Where do you live’, but we don’t actually need this as we’ll add our own components from the design system later. Delete the radio component by deleting all the code from {{ radios({ to }) }}.

Preview the page by visiting http://localhost:3000/magical-powers in your browser. You should be left with a back link and a continue button.

For details.html you can copy all the code from the magical-powers.html page we just made. Check it works by visiting http://localhost:3000/details in your browser.

Check answers page

Create an empty file named check-your-answers.html in app/views.

Add this line to the top of the file:

{% extends "layout.html" %}

Copy the Nunjucks code from the check answers pattern page and add it to the file.

Go to http://localhost:3000/check-your-answers to check it works.

Confirmation page

Create an empty file named confirmation-page.html in app/views.

Copy the Nunjucks code from the confirmation page pattern into the file.

Add this line to the top of the file:

{% extends "layout.html" %}

Go to http://localhost:3000/confirmation-page to check.