Skip to main content
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.

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 empty file. There is a ‘Copy code’ button to make this easier.

Add this line to the very top of your code:

{% extends "layout.html" %}

Preview the pages in your prototype by going to http://localhost:3000/name-of-file in your web browser.

For example, go to http://localhost:3000/start-page to preview 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

Visit the question page pattern and copy the Nunjucks from the example into each file.

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

{% extends "layout.html" %}

Go to the following URLs to check your pages:

In the magical-powers.html file, change the text after "legend": { "text": from "Heading or question goes here" to "Have you felt symptoms of magical powers in the last 30 days?".

In the details.html file, change the text after "legend": { "text": to "Tell us your symptoms of magical powers".

Check answers page

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

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

Add this line to the top of the file:

{% extends "layout.html" %}

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

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.