Use nhsuk-prototype-kit package

Author: frankieroberto

.gitignore

@@ -6,4 +6,4 @@
 
 .data
 /node_modules
-/assets
+/public

app.js

@@ -0,0 +1,54 @@
+import sessionInDatabase from 'connect-pg-simple'
+import express from 'express'
+import session from 'express-session'
+import NHSPrototypeKit from 'nhsuk-prototype-kit'
+import { Pool } from 'pg'
+
+import sessionDataDefaults from './app/data.js'
+import filters from './app/filters.js'
+import globals from './app/globals.js'
+import routes from './app/routes.js'
+
+const { DATABASE_URL, NODE_ENV } = process.env
+
+const app = express()
+
+const prototype = await NHSPrototypeKit.init({
+  app,
+  buildOptions: {
+    entryPoints: [
+      'app/assets/stylesheets/*.scss',
+      'app/assets/javascripts/*.js'
+    ]
+  },
+  filters,
+  routes,
+  serviceName: 'Manage vaccinations in schools',
+  ...(DATABASE_URL && {
+    session: session({
+      cookie: {
+        maxAge: 1000 * 60 * 60 * 4, // 4 hours
+        secure: process.env.NODE_ENV === 'production'
+      },
+      resave: false,
+      saveUninitialized: false,
+      secret: 'manage-vaccinations-in-schools-prototype',
+      store: new (sessionInDatabase(session))({
+        pool: new Pool({
+          connectionString: DATABASE_URL,
+          ssl: NODE_ENV === 'production' ? { rejectUnauthorized: false } : false
+        })
+      })
+    })
+  }),
+  sessionDataDefaults,
+  viewsPath: ['app/views', 'node_modules/nhsuk-decorated-components']
+})
+
+prototype.app.set('view engine', 'njk')
+
+for (const [key, value] of Object.entries(globals())) {
+  prototype.nunjucks?.addGlobal(key, value)
+}
+
+prototype.start(3000)

app.json

@@ -1,21 +1,3 @@
 {
-  "env": {
-    "USE_AUTH": {
-      "description": "Enable or disable password protection on production.",
-      "value": "true"
-    },
-    "USE_AUTO_STORE_DATA": {
-      "description": "Automatically store form data and send to all views",
-      "value": "true"
-    },
-    "USE_DATABASE_SESSION_STORE": {
-      "description": "Enable PostgreSQL session store.",
-      "value": "true"
-    },
-    "USE_HTTPS": {
-      "description": "Force HTTP to redirect to HTTPS on production",
-      "value": "true"
-    }
-  },
   "addons": ["heroku-postgresql:essential-0"]
 }

app/filters.js

@@ -17,7 +17,7 @@ import {
  * @returns {object} Filters
  */
 export default (env) => {
-  const filters = {}
+  const filters = prototypeFilters
 
   /**
    * Remove border from last summary row

app/globals.js

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import { decorate } from 'nhsuk-decorated-components'
 
 import { healthQuestions } from './datasets/health-questions.js'
 import {
@@ -25,6 +26,8 @@ import {
 export default () => {
   const globals = {}
 
+  globals.decorate = decorate
+
   /**
    * Get boolean form field items
    *
@@ -319,7 +322,10 @@ export default () => {
       })
     }
 
-    summaryRows.at(-1).border = false
+    // Remove border from final row
+    if (summaryRows.at(-1)) {
+      summaryRows.at(-1).border = false
+    }
 
     return summaryRows
   }
@@ -376,7 +382,10 @@ export default () => {
       })
     }
 
-    summaryRows.at(-1).border = false
+    // Remove border from final row
+    if (summaryRows.at(-1)) {
+      summaryRows.at(-1).border = false
+    }
 
     return summaryRows
   }
@@ -660,7 +669,9 @@ export default () => {
     }
 
     // Remove border from final row
-    summaryRows.at(-1).border = false
+    if (summaryRows.at(-1)) {
+      summaryRows.at(-1).border = false
+    }
 
     return summaryRows
   }

app/views/_layouts/default.njk

@@ -1,4 +1,4 @@
-{% extends "rig/default.njk" %}
+{% extends "prototype-kit-template.njk" %}
 
 {#- App macros -#}
 {% from "_macros/action-list.njk" import appActionList %}
@@ -20,8 +20,8 @@
   <meta name="format-detection" content="telephone=no">
 
   {% set assetsName = assetsName | default("application") %}
-  <link rel="stylesheet" href="/assets/{{ assetsName }}.css" media="all">
-  <script src="/assets/{{ assetsName }}.js" type="module"></script>
+  <link rel="stylesheet" href="/assets/stylesheets/{{ assetsName }}.css" media="all">
+  <script src="/assets/javascripts/{{ assetsName }}.js" type="module"></script>
 {% endblock %}
 
 {% block header %}
@@ -130,7 +130,7 @@
       }, {
         text: "Clear session data",
         href: "/clear-session-data"
-      } if useAutoStoreData, {
+      }, {
         text: "Design history",
         href: "https://design-history.prevention-services.nhs.uk/manage-vaccinations-in-schools/"
       }]

app/views/patient-session/_record.njk

@@ -70,7 +70,7 @@
 {{ __("patientSession.preScreen.description", { patient: patient }) }}
 {% for question in patientSession.vaccine.preScreenQuestions %}
 - {{ question }}
-{%- endfor %}
+{% endfor %}
 {% endfilter %}
 
   {{ checkboxes({

eslint.config.js

@@ -11,6 +11,6 @@ export default [
     }
   },
   {
-    ignores: ['assets']
+    ignores: ['public']
   }
 ]

lib/create-data.js

@@ -2,7 +2,6 @@ import process from 'node:process'
 
 import { faker } from '@faker-js/faker'
 import { addMinutes, isSameDay } from 'date-fns'
-import 'dotenv/config'
 
 import clinicsData from '../app/datasets/clinics.js'
 import programmesData from '../app/datasets/programmes.js'