Rapidly create HTML prototypes of NHS services
This repo contains the code for the NHS prototype kit is distributed as an npm package.
The code contains:
- an Express middleware app
- some useful default settings for Express
- some Nunjucks filters
- Nunjucks views, including a template
The simplest way to get started is to use the NHS prototype kit template repository.
From there, select 'Use this as a template' and follow the instructions.
You can also add the kit to an existing Express app by running:
``sh`
npm install nhsuk-prototype-kit
Then, within your app.js file, add this line to the top:
`js`
import NHSPrototypeKit from 'nhsuk-prototype-kit'
Or, if using CommonJS:
`cjs`
const NHSPrototypeKit = require('nhsuk-prototype-kit')
Initialise the prototype with a reference to your custom routes like this:
`js
import routes from './app/routes.js'
const viewsPath = [
'app/views/'
]
const entryPoints = [
'app/stylesheets/*.scss'
]
const prototype = await NHSPrototypeKit.init({
serviceName: 'Your service name',
buildOptions: {
entryPoints
},
routes,
viewsPath
})
`
You can then start the prototype using this:
`js`
prototype.start()
If you want to set session data defaults, or locals, pass them to the init function:
`js
import sessionDataDefaults from './app/data/session-data-defaults.js'
import locals from './app/locals.js'
import routes from './app/routes.js'
const viewsPath = [
'app/views/'
]
const prototype = await NHSPrototypeKit.init({
serviceName: 'Your service name',
buildOptions: {
entryPoints: ['app/stylesheets/*.scss']
},
routes,
locals,
sessionDataDefaults,
viewsPath
})
`
If you only want to use the Nunjucks filters, you can import them separately:
`js
import { nunjucksFilters } from 'nhsuk-prototype-kit'
nunjucksFilters.addAll(nunjucksEnv)
`
Or import individual filters:
`js
import { nunjucksFilters } from 'nhsuk-prototype-kit'
nunjucksEnv.addFilter('formatNhsNumber', nunjucksFilters.formatNhsNumber)
nunjucksEnv.addFilter('startsWith', nunjucksFilters.startsWith)
`
If you only want to use the Express middleware, you can import it separately:
`js
import { middleware } from 'nhsuk-prototype-kit'
middleware.configure({
app: app,
serviceName: serviceName,
locals: locals,
routes: routes,
sessionDataDefaults: sessionDataDefaults
})
`
Or you can choose to only use individual middleware functions:
`js
import { middleware } from 'nhsuk-prototype-kit'
app.use(middleware.autoRoutes)
`
You can also import the utility functions separately:
`js
import { utils } from 'nhsuk-prototype-kit'
const port = await utils.findAvailablePort(3000)
``