Added ESBuild for building app and bundling/minfiying assets

.eslintrc.json

@@ -57,6 +57,12 @@
           }
         ]
       }
+    },
+    {
+      "files": ["esbuild/**/*"],
+      "rules": {
+        "no-console": "off"
+      }
     }
   ],
 
@@ -87,7 +93,7 @@
     "comma-dangle": ["error", "always-multiline"],
     "import/no-extraneous-dependencies": [
       "error",
-      { "devDependencies": ["**/*.test.js", "**/*.test.ts", "**/testutils/**", "cypress.config.ts"] }
+      { "devDependencies": ["**/*.test.js", "**/*.test.ts", "**/testutils/**", "cypress.config.ts", "esbuild/**/*"] }
     ],
     "no-only-tests/no-only-tests": "error",
     "prettier/prettier": [

Dockerfile

@@ -39,6 +39,7 @@ ARG GIT_BRANCH
 
 COPY package*.json ./
 RUN CYPRESS_INSTALL_BINARY=0 npm ci --no-audit
+ENV NODE_ENV='production'
 
 COPY . .
 RUN npm run build
@@ -53,9 +54,6 @@ COPY --from=build --chown=appuser:appgroup \
         /app/package-lock.json \
         ./
 
-COPY --from=build --chown=appuser:appgroup \
-        /app/assets ./assets
-
 COPY --from=build --chown=appuser:appgroup \
         /app/dist ./dist
 

assets/js/index.js

@@ -0,0 +1,5 @@
+import * as govukFrontend from 'govuk-frontend'
+import * as mojFrontend from '@ministryofjustice/frontend'
+
+govukFrontend.initAll()
+mojFrontend.initAll()

assets/scss/application.scss

@@ -4,8 +4,8 @@ $path: "/assets/images/";
 $moj-page-width: 1170px;
 $govuk-page-width: $moj-page-width;
 
-@import 'govuk/all';
-@import 'moj/all';
+@import "govuk-frontend/dist/govuk/all";
+@import "@ministryofjustice/frontend/moj/all";
 
 @import './components/header-bar';
-@import 'assets/scss/local';
+@import './local';

esbuild/app.config.js

@@ -0,0 +1,26 @@
+const { copy } = require('esbuild-plugin-copy')
+const { typecheckPlugin } = require('@jgoz/esbuild-plugin-typecheck')
+const esbuild = require('esbuild')
+const glob = require('glob')
+
+module.exports = buildConfig => {
+  console.log('\u{1b}[1m\u{2728}  Building app....\u{1b}[0m')
+
+  esbuild
+    .build({
+      entryPoints: glob.sync(buildConfig.app.entryPoints),
+      outdir: buildConfig.app.outDir,
+      bundle: false,
+      sourcemap: true,
+      platform: 'node',
+      format: 'cjs',
+      plugins: [
+        typecheckPlugin(),
+        copy({
+          resolveFrom: 'cwd',
+          assets: buildConfig.app.copy,
+        }),
+      ],
+    })
+    .catch(() => process.exit(1))
+}

esbuild/assets.config.js

@@ -0,0 +1,49 @@
+const { copy } = require('esbuild-plugin-copy')
+const { sassPlugin } = require('esbuild-sass-plugin')
+const { clean } = require('esbuild-plugin-clean')
+const esbuild = require('esbuild')
+const path = require('path')
+const { glob } = require('glob')
+
+const buildAdditionalAssets = buildConfig =>
+  esbuild.build({
+    outdir: buildConfig.assets.outDir,
+    plugins: [
+      copy({
+        resolveFrom: 'cwd',
+        assets: buildConfig.assets.copy,
+      }),
+    ],
+  })
+
+const buildAssets = buildConfig => {
+  return esbuild.build({
+    entryPoints: buildConfig.assets.entryPoints,
+    outdir: buildConfig.assets.outDir,
+    entryNames: '[ext]/app',
+    minify: buildConfig.isProduction,
+    sourcemap: !buildConfig.isProduction,
+    platform: 'browser',
+    target: 'es2018',
+    external: ['/assets/*'],
+    bundle: true,
+    plugins: [
+      clean({
+        patterns: glob.sync(buildConfig.assets.clear),
+      }),
+      sassPlugin({
+        quietDeps: true,
+        loadPaths: [process.cwd(), path.join(process.cwd(), 'node_modules')],
+      }),
+    ],
+  })
+}
+
+module.exports = buildConfig => {
+  console.log('\u{1b}[1m\u{2728}  Building assets....\u{1b}[0m')
+
+  Promise.all([buildAssets(buildConfig), buildAdditionalAssets(buildConfig)]).catch(e => {
+    console.log(e)
+    process.exit(1)
+  })
+}

esbuild/esbuild.config.js

@@ -0,0 +1,68 @@
+const path = require('path')
+const { glob } = require('glob')
+const chokidar = require('chokidar')
+const { spawn } = require('child_process')
+const buildAssets = require('./assets.config')
+const buildApp = require('./app.config')
+
+const cwd = process.cwd()
+const buildConfig = {
+  isProduction: process.env.NODE_ENV === 'production',
+  app: {
+    outDir: path.join(cwd, 'dist'),
+    entryPoints: glob
+      .sync([path.join(cwd, '*.ts'), path.join(cwd, 'server/**/*.ts')])
+      .filter(file => !file.endsWith('.test.ts')),
+    copy: [
+      {
+        from: path.join(cwd, 'server/views/**/*'),
+        to: path.join(cwd, 'dist/server/views'),
+      },
+    ],
+  },
+
+  assets: {
+    outDir: path.join(cwd, 'dist/assets'),
+    entryPoints: glob.sync([path.join(cwd, 'assets/js/index.js'), path.join(cwd, 'assets/scss/application.scss')]),
+    copy: [
+      {
+        from: path.join(cwd, 'assets/images/**/*'),
+        to: path.join(cwd, 'dist/assets/images'),
+      },
+    ],
+    clear: glob.sync([path.join(cwd, 'dist/assets/{css,js}')]),
+  },
+}
+
+function main() {
+  const chokidarOptions = {
+    persistent: true,
+    ignoreInitial: true,
+  }
+
+  const args = process.argv
+  if (args.includes('--build')) {
+    buildApp(buildConfig)
+    buildAssets(buildConfig)
+  }
+
+  if (args.includes('--dev-server')) {
+    let serverProcess = null
+    chokidar.watch(['dist']).on('all', () => {
+      if (serverProcess) serverProcess.kill()
+      serverProcess = spawn('node', ['dist/server.js'], { stdio: 'inherit' })
+    })
+  }
+
+  if (args.includes('--watch')) {
+    console.log('\u{1b}[1m\u{1F52D} Watching for changes...\u{1b}[0m')
+    // Assets
+    chokidar.watch(['assets/**/*'], chokidarOptions).on('all', () => buildAssets(buildConfig))
+
+    // App
+    chokidar
+      .watch(['server/**/*'], { ...chokidarOptions, ignored: ['**/*.test.ts'] })
+      .on('all', () => buildApp(buildConfig))
+  }
+}
+main()