Add build script to kit (using esbuild) (#96)

This adds the compiling of SASS and javascript to the kit, using
`esbuild`.

It's an optional extra, enabled by adding an `buildOptions` config to
the `init` function with references to the files you’d like to build:

For example, to compile SASS only:

```js
NHSPrototypeKit.init({
  buildOptions: {
    entryPoints: ['assets/css/*.scss']
  },
  ...
})
```

or for both SASS and javascript:

```js
NHSPrototypeKit.init({
  buildOptions: {
    entryPoints: ['assets/css/*.scss', 'assets/javascript/*.js']
  },
  ...
})
```

It could also be run standalone by using this async function:

```js
await NHSPrototypeKit.build(true, {entryPoints: ['assets/css/*.scss']})
```

This is a replacement for `gulpfile.js` in the existing NHS prototype
kit.

Author: frankieroberto

.gitignore

@@ -17,3 +17,6 @@ Thumbs.db
 
 # ESlint cache
 .cache
+
+# Compiled assets for the test app
+testapp/public

README.md

@@ -39,7 +39,10 @@ const prototype = NHSPrototypeKit.init({
   express: app,
   nunjucks: nunjucks,
   routes: routes,
-  sessionDataDefaults: sessionDataDefaults
+  sessionDataDefaults: sessionDataDefaults,
+  buildOptions: {
+    entryPoints: ['assets/sass/*.scss', 'assets/javascript/*.js']
+  }
 })
 ```
 

eslint.config.mjs

@@ -169,6 +169,7 @@ export default defineConfig([
   globalIgnores([
     '**/app/**',
     '**/public/**',
+    'testapp/assets/javascript/application.js',
 
     // Enable dotfile linting
     '!.*',

lib/build/index.js

@@ -0,0 +1,36 @@
+const esbuild = require('esbuild')
+const { sassPlugin } = require('esbuild-sass-plugin')
+
+const build = async function (watch, options = {}) {
+  const sassLoadPaths = options.sassLoadPaths || ['node_modules']
+
+  const esbuildOptions = {
+    entryPoints: options.entryPoints,
+    entryNames: '[name]',
+    bundle: true,
+    legalComments: 'none',
+    minify: true,
+    outdir: 'public',
+    plugins: [
+      sassPlugin({
+        loadPaths: sassLoadPaths,
+        silenceDeprecations: ['import'],
+        quietDeps: true
+      })
+    ],
+    sourcemap: true
+  }
+
+  try {
+    if (watch) {
+      const ctx = await esbuild.context(esbuildOptions)
+      await ctx.watch()
+    } else {
+      await esbuild.build(esbuildOptions)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+module.exports = build

lib/index.js

@@ -1,14 +1,16 @@
 const { join } = require('node:path')
 
+const build = require('./build')
 const expressMiddleware = require('./express-middleware')
 const expressSettings = require('./express-settings')
 const nunjucksFilters = require('./nunjucks-filters')
 const utils = require('./utils')
 
-function NHSPrototypeKit({ express, nunjucks, config }) {
+function NHSPrototypeKit({ express, nunjucks, config, buildOptions }) {
   this.express = express
   this.nunjucks = nunjucks
   this.config = config
+  this.buildOptions = buildOptions
 }
 
 NHSPrototypeKit.nunjucksFilters = nunjucksFilters
@@ -41,7 +43,8 @@ NHSPrototypeKit.init = function (options) {
   return new NHSPrototypeKit({
     express: options.express,
     nunjucks: options.nunjucks,
-    config: options.config
+    config: options.config,
+    buildOptions: options.buildOptions
   })
 }
 
@@ -69,6 +72,9 @@ NHSPrototypeKit.prototype.start = async function (port) {
     return
   }
 
+  // Build the frontend assets (if configured)
+  await this.build()
+
   this.express.listen(availablePort, () => {
     if (nodeEnv === 'production') {
       console.info(`Running on port ${availablePort}`)
@@ -78,4 +84,18 @@ NHSPrototypeKit.prototype.start = async function (port) {
   })
 }
 
+// This function can be used to compile the frontend assets
+NHSPrototypeKit.prototype.build = async function () {
+  const nodeEnv = process.env.NODE_ENV || 'development'
+
+  if (this.buildOptions) {
+    const watch = nodeEnv !== 'production'
+    try {
+      await build(watch, this.buildOptions)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}
+
 module.exports = NHSPrototypeKit