refactor: serve react as compressed br (#339)

apps/client/package.json

@@ -90,6 +90,7 @@
     "stylelint-config-standard-scss": "^6.1.0",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
+    "vite-plugin-compression2": "^0.8.4",
     "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.0.3",
     "vitest": "^0.29.8"

apps/client/vite.config.js

@@ -2,6 +2,7 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import react from '@vitejs/plugin-react';
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
+import { compression } from 'vite-plugin-compression2';
 import svgrPlugin from 'vite-plugin-svgr';
 
 import { ONTIME_VERSION } from './src/ONTIME_VERSION';
@@ -24,6 +25,7 @@ export default defineConfig({
           env: 'production',
         },
       }),
+    compression({ algorithm: 'brotliCompress' }),
   ],
   server: {
     port: 3000,

apps/server/package.json

@@ -10,6 +10,7 @@
     "dotenv": "^16.0.1",
     "express": "^4.18.2",
     "express-session": "^1.17.3",
+    "express-static-gzip": "^2.1.7",
     "express-validator": "^6.14.2",
     "lowdb": "^5.0.5",
     "multer": "^1.4.4",

apps/server/src/app.ts

@@ -1,5 +1,6 @@
 import 'dotenv/config';
 import express from 'express';
+import expressStaticGzip from 'express-static-gzip';
 import http from 'http';
 import cors from 'cors';
 
@@ -61,8 +62,14 @@ app.use('/playback', playbackRouter);
 // serve static - css
 app.use('/external', express.static(externalsStartDirectory));
 
-// serve static - react, in test mode we fetch the React app from module
-app.use(express.static(join(currentDirectory, resolvedPath())));
+// serve static - react, in dev/test mode we fetch the React app from module
+const reactAppPath = join(currentDirectory, resolvedPath());
+app.use(
+  expressStaticGzip(reactAppPath, {
+    enableBrotli: true,
+    orderPreference: ['br'],
+  }),
+);
 
 app.get('*', (req, res) => {
   res.sendFile(resolve(currentDirectory, resolvedPath(), 'index.html'));

pnpm-lock.yaml

@@ -88,6 +88,7 @@ importers:
       typeface-open-sans: ^1.1.13
       typescript: ^4.9.4
       vite: ^4.0.4
+      vite-plugin-compression2: ^0.8.4
       vite-plugin-svgr: ^2.4.0
       vite-tsconfig-paths: ^4.0.3
       vitest: ^0.29.8
@@ -155,6 +156,7 @@ importers:
       stylelint-config-standard-scss: 6.1.0_stylelint@14.16.1
       typescript: 4.9.4
       vite: 4.0.4_sass@1.57.1
+      vite-plugin-compression2: 0.8.4
       vite-plugin-svgr: 2.4.0_vite@4.0.4
       vite-tsconfig-paths: 4.0.3_gl4qsmwzp7wy5uclz4tx77gbli
       vitest: 0.29.8_jsdom@21.1.0+sass@1.57.1
@@ -189,6 +191,7 @@ importers:
       eslint-plugin-prettier: ^4.2.1
       express: ^4.18.2
       express-session: ^1.17.3
+      express-static-gzip: ^2.1.7
       express-validator: ^6.14.2
       lowdb: ^5.0.5
       multer: ^1.4.4
@@ -211,6 +214,7 @@ importers:
       dotenv: 16.0.3
       express: 4.18.2
       express-session: 1.17.3
+      express-static-gzip: 2.1.7
       express-validator: 6.14.2
       lowdb: 5.0.5
       multer: 1.4.4
@@ -5154,6 +5158,14 @@ packages:
       - supports-color
     dev: false
 
+  /express-static-gzip/2.1.7:
+    resolution: {integrity: sha512-QOCZUC+lhPPCjIJKpQGu1Oa61Axg9Mq09Qvit8Of7kzpMuwDeMSqjjQteQS3OVw/GkENBoSBheuQDWPlngImvw==}
+    dependencies:
+      serve-static: 1.15.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /express-validator/6.14.2:
     resolution: {integrity: sha512-8XfAUrQ6Y7dIIuy9KcUPCfG/uCbvREctrxf5EeeME+ulanJ4iiW71lWmm9r4YcKKYOCBMan0WpVg7FtHu4Z4Wg==}
     engines: {node: '>= 8.0.0'}
@@ -8680,6 +8692,14 @@ packages:
       - terser
     dev: true
 
+  /vite-plugin-compression2/0.8.4:
+    resolution: {integrity: sha512-/AEvCzKDmazIJUzyBvFxDuXcwi/x5RH2WpJXoiiRslzvIb5qiB5/1PUKxGv/YqhCq2mxhmXwfLywWDNYXrlPZg==}
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /vite-plugin-svgr/2.4.0_vite@4.0.4:
     resolution: {integrity: sha512-q+mJJol6ThvqkkJvvVFEndI4EaKIjSI0I3jNFgSoC9fXAz1M7kYTVUin8fhUsFojFDKZ9VHKtX6NXNaOLpbsHA==}
     peerDependencies: