chore(portal): use vite for assets build

apps/api/package.json

@@ -115,6 +115,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "webpack-node-externals": "^3.0.0",
     "webpackbar": "^5.0.2"
   },

apps/cli/package.json

@@ -40,6 +40,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "webpack-node-externals": "^3.0.0",
     "webpackbar": "^5.0.2"
   },

apps/find-portion-images/package.json

@@ -36,6 +36,7 @@
     "typescript": "^4.7.4",
     "typescript-json-validator": "^2.4.2",
     "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "webpack-node-externals": "^3.0.0"
   },
   "bundledDependencies": [

apps/portal/.gitignore

@@ -1,2 +1,3 @@
-public/*
-!public/robots.txt
+public/build
+public/hot
+public/sitemap.xml

apps/portal/package.json

@@ -12,11 +12,11 @@
     "build": "run-p build:back build:front build:sitemap",
     "build:back": "pnpm build:back:clean && webpack --env NODE_ENV=production",
     "build:back:clean": "rimraf dist",
-    "build:front": "mix --production",
+    "build:front": "vite build",
     "build:sitemap": "node scripts/sitemap.mjs",
     "dev": "run-p dev:back dev:front",
     "dev:back": "webpack --env NODE_ENV=development",
-    "dev:front": "mix -- watch",
+    "dev:front": "vite",
     "lint": "eslint --ext .js,.ts src/ __tests__/ --fix",
     "start": "node dist/server.js",
     "test:unit": "jest",
@@ -45,20 +45,20 @@
     "@types/supertest": "^2.0.12",
     "@types/webpack-env": "1.17.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
-    "laravel-mix": "^6.0.49",
+    "laravel-vite-plugin": "^0.5.0",
     "nodemon": "^2.0.19",
     "nodemon-webpack-plugin": "^4.8.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.14",
     "resolve-url-loader": "^5.0.0",
     "rimraf": "^3.0.2",
-    "sass": "~1.32.13",
-    "sass-loader": "~10.2.1",
+    "sass": "^1.53.0",
     "supertest": "^6.2.4",
     "ts-loader": "^9.3.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
+    "vite": "^3.0.2",
     "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "webpack-node-externals": "^3.0.0",
     "webpackbar": "^5.0.2"
   },

apps/portal/resources/ts/site.ts

@@ -0,0 +1 @@
+import 'bootstrap';

apps/portal/resources/views/layout.njk

@@ -13,7 +13,7 @@
     <meta name="copyright" content="Newcastle University & University of Cambridge">
     <meta name="author" content="Newcastle University & University of Cambridge"/>
     <link rel="icon" href="/img/favicon.ico" type="image/png" sizes="16x16">
-    <link rel="stylesheet" href="{{ mix('/site.css') }}">
+    <link rel="stylesheet" href="{{ vite('resources/scss/site.scss', 'build') }}">
     <title>Intake24</title>
   </head>
 
@@ -80,6 +80,6 @@
       </footer>
     </div>
 
-    <script src="{{ mix('/site.js') }}"></script>
+    <script src="{{ vite('resources/ts/site.ts', 'build') }}"></script>
   </body>
 </html>

apps/portal/src/loaders/express.ts

@@ -4,7 +4,7 @@ import { FileSystemLoader, Environment } from 'nunjucks';
 import { resolve } from 'node:path';
 import { httpLogger as stream } from '@intake24/services';
 import type { Ops } from '../app';
-import { mix } from '../util';
+import { vite } from '../util';
 
 export default async (app: Express, { config }: Ops): Promise<void> => {
   const {
@@ -28,7 +28,7 @@ export default async (app: Express, { config }: Ops): Promise<void> => {
   });
 
   nunjucksEnv.express(app);
-  nunjucksEnv.addGlobal('mix', mix);
+  nunjucksEnv.addGlobal('vite', vite);
 
   app.engine('njk', nunjucksEnv.render);
   app.set('view engine', 'njk');

apps/portal/src/util/index.ts

@@ -1 +1 @@
-export * from './mix';
+export * from './vite';

apps/portal/src/util/vite.ts

@@ -0,0 +1,12 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import config from '../config/filesystem';
+
+export const vite = (asset: string, outputFolder?: string): string => {
+  const segments = [config.local.public, outputFolder, 'manifest.json'].filter(Boolean) as string[];
+
+  const contents = readFileSync(resolve(...segments), { encoding: 'utf8' });
+  const manifest = JSON.parse(contents);
+
+  return `/${[outputFolder, manifest[asset].file ?? asset].filter(Boolean).join('/')}`;
+};

apps/portal/vite.config.ts

@@ -0,0 +1,18 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import path from 'node:path';
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
+    },
+  },
+  plugins: [
+    laravel({
+      input: ['resources/scss/site.scss', 'resources/ts/site.ts'],
+      refresh: true,
+    }),
+  ],
+});